add new tip and accounts screen without accounts

fileMock.js

@@ -0,0 +1,2 @@
+// eslint-disable-line
+module.exports = '';

jest.config.js

@@ -6,7 +6,7 @@ module.exports = Object.assign({}, config, {
   moduleNameMapper: {
     '@polkadot/extension-(chains|dapp|inject|ui)(.*)$': '<rootDir>/packages/extension-$1/src/$2',
     '@polkadot/extension(.*)$': '<rootDir>/packages/extension/src/$1',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/fileMock.js',
     '\\.(css|less)$': 'empty/object'
   },
   modulePathIgnorePatterns: [

packages/extension-ui/src/Popup/Accounts/index.tsx

@@ -4,7 +4,7 @@
 
 import React, { useContext } from 'react';
 
-import { AccountContext, Button, Header, Link, MediaContext, Tip } from '../../components';
+import { AccountContext, Button, Header, Link, MediaContext, AddAccount } from '../../components';
 import Account from './Account';
 
 type Props = {};
@@ -21,7 +21,14 @@ export default function Accounts (): React.ReactElement<Props> {
       />
       {
         (accounts.length === 0)
-          ? <Tip header='add accounts' type='warn'>You currently don&apos;t have any accounts. Either create a new account or if you have an existing account you wish to use, import it with the seed phrase</Tip>
+          ? <AddAccount
+            header='add accounts'
+            type='warn'
+            to='/account/create'
+            imageVisible
+          >
+            You currently don&apos;t have any accounts. Either create a new account or if you have an existing account you wish to use, import it with the seed phrase.
+          </AddAccount>
           : accounts.map((json, index): React.ReactNode => (
             <Account
               {...json}

packages/extension-ui/src/Popup/Export.tsx

@@ -39,7 +39,7 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
       <Header label='export account' />
       <Back />
       <Address address={address}>
-        <Tip header='danger' type='error'>You are exporting your account. Keep it safe and don&apos;t share it with anyone.</Tip>
+        <Tip warning type='error'>You are exporting your account. Keep it safe and don&apos;t share it with anyone.</Tip>
         <InputWithLabel
           isError={pass.length < MIN_LENGTH || wrongPasswordHighlight}
           label='password for this account'

packages/extension-ui/src/Popup/Forget.tsx

@@ -24,7 +24,7 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
       <Header label='forget account' />
       <Back />
       <Address address={address}>
-        <Tip header='danger' type='error'>You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.</Tip>
+        <Tip warning type='error'>You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.</Tip>
         <Button
           isDanger
           label='I want to forget this account'

packages/extension-ui/src/assets/images.d.ts

@@ -0,0 +1,11 @@
+/* eslint-disable import/export,import/no-default-export */
+
+declare module '*.svg' {
+  const url: string;
+  export default url;
+}
+
+declare module '*.png' {
+  const url: string;
+  export default url;
+}

packages/extension-ui/src/components/AddAccount.tsx

@@ -0,0 +1,63 @@
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import styled from 'styled-components';
+import { Theme } from './themes';
+import addAccountImage from '../assets/addAccount.png';
+
+interface Props {
+  children: React.ReactNode;
+  className?: string;
+  header?: React.ReactNode;
+  type?: keyof Theme['box'];
+  to?: string;
+  onClick?: () => void;
+  imageVisible?: boolean;
+}
+
+function AddAccount ({ children, className, header, to, onClick, imageVisible }: Props): React.ReactElement<Props> {
+  const _onClick = (): void => {
+    onClick && onClick();
+
+    if (to) {
+      window.location.hash = to;
+    }
+  };
+
+  return (
+    <div>
+      {imageVisible && <Image src={addAccountImage} alt="add account" onClick={_onClick}/>}
+      <article className={className}>
+        {header && <h3>{header}</h3>}
+        <TipText>{children}</TipText>
+      </article>
+    </div>
+  );
+}
+
+const TipText = styled.p`
+  text-align: center;
+  font-size: 16px;
+  line-height: 26px;
+  margin: 0 30px;
+`;
+
+const Image = styled.img`
+  display: flex;
+  justify-content: center;
+  width: 185px;
+  height: 185px;
+  margin: 30px auto;
+`;
+
+export default styled(AddAccount)`
+  color: ${({ theme }): string => theme.color};
+
+  h3 {
+    color: ${({ theme }): string => theme.color};
+    font-weight: normal;
+    text-align: center;
+  }
+`;

packages/extension-ui/src/components/Tip.tsx

@@ -5,6 +5,7 @@
 import React from 'react';
 import styled, { ThemedStyledProps } from 'styled-components';
 import { Theme } from './themes';
+import warningImage from '../assets/warning.png';
 
 interface Color {
   background: string;
@@ -17,31 +18,45 @@ interface Props {
   className?: string;
   header?: React.ReactNode;
   type?: keyof Theme['box'];
+  warning?: boolean;
 }
 
 function getColor ({ type, theme }: ThemedStyledProps<Props, Theme>): Color {
   return theme.box[type || 'info'] || theme.box.info;
 }
 
-function Tip ({ children, className, header }: Props): React.ReactElement<Props> {
+function Tip ({ children, className, header, warning }: Props): React.ReactElement<Props> {
   return (
     <article className={className}>
       {header && <h3>{header}</h3>}
-      <div>{children}</div>
+      {warning && <Image src={warningImage} alt="Warning"/>}
+      <div><TipText warning={!warning}>{children}</TipText></div>
     </article>
   );
 }
 
-// box-shadow: ${({theme}) => theme.boxShadow};
+const Image = styled.img`
+  width: 16px;
+  height: 14px;
+`;
+
+const TipText = styled.p<{warning: boolean}>`
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: normal;
+  color: #fff;
+  margin: ${({ warning }): string => warning ? '0 0 0 24px' : '-28px 0 0 24px'};
+`;
+
 export default styled(Tip)`
-  background: ${(p): string => getColor(p).background};
+  background: ${({ theme }): string => theme.background};
   border-left: 0.25rem solid ${(p): string => getColor(p).border};
   color: ${(p): string => getColor(p).color};
-  margin: 0.75rem -1rem;
+  margin: 0 -1rem;
   padding: 1rem 1.5rem;
 
   h3 {
-    color: ${(p): string => getColor(p).border};
+    color: ${({ theme }): string => theme.color};
     font-weight: normal;
   }
 `;

packages/extension-ui/src/components/index.ts

@@ -17,6 +17,7 @@ export { default as TextAreaWithLabel } from './TextAreaWithLabel';
 export { default as Tip } from './Tip';
 export { default as View } from './View';
 export { Input, TextArea } from './TextInputs';
+export { default as AddAccount } from './AddAccount';
 
 export * from './contexts';
 export * from './themes';