Import account screens

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

@@ -5,9 +5,9 @@
 import React, { useContext, useState } from 'react';
 import { QrScanAddress } from '@polkadot/react-qr';
 
-import { ActionContext, Address, Button, Header } from '../components';
+import { ActionContext, ActionText, Address, Button, ButtonArea, Header, VerticalSpace } from '../components';
 import { createAccountExternal } from '../messaging';
-import { Back, Name } from '../partials';
+import { Name, TitleWithAction } from '../partials';
 
 type Props = {};
 
@@ -26,10 +26,16 @@ export default function ImportQr (): React.ReactElement<Props> {
   };
 
   return (
-    <div>
+    <>
       <Header/>
-      <Back />
-      {!account && <QrScanAddress onScan={setAccount} />}
+      <TitleWithAction title='Import account from QR code'>
+        <ActionText text='Cancel' onClick={(): void => onAction('/')}/>
+      </TitleWithAction>
+      {!account && (
+        <div>
+          <QrScanAddress onScan={setAccount} />
+        </div>
+      )}
       {account && (
         <>
           <Name
@@ -39,16 +45,18 @@ export default function ImportQr (): React.ReactElement<Props> {
           <Address
             {...account}
             name={name}
-          >
-            {name && (
+          />
+          <VerticalSpace/>
+          {name && (
+            <ButtonArea>
               <Button
                 label='Add the account with identified address'
                 onClick={_onCreate}
               />
-            )}
-          </Address>
+            </ButtonArea>
+          )}
         </>
       )}
-    </div>
+    </>
   );
 }

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

@@ -4,9 +4,19 @@
 
 import React, { useContext, useState } from 'react';
 
-import { ActionContext, Address, Button, Header, TextAreaWithLabel } from '../components';
+import {
+  ActionContext,
+  ActionText,
+  Address,
+  Button,
+  ButtonArea,
+  Header,
+  TextAreaWithLabel,
+  VerticalSpace
+} from '../components';
 import { createAccountSuri, validateSeed } from '../messaging';
-import { Back, Name, Password } from '../partials';
+import { TitleWithAction, Name, Password } from '../partials';
+import styled from 'styled-components';
 
 type Props = {};
 
@@ -32,10 +42,13 @@ export default function Import (): React.ReactElement<Props> {
   };
 
   return (
-    <div>
+    <>
       <Header/>
-      <Back />
-      <TextAreaWithLabel
+      <TitleWithAction title='Import account'>
+        <ActionText text='Cancel' onClick={(): void => onAction('/')}/>
+      </TitleWithAction>
+      <SeedInput
+        rowsCount={2}
         isError={!account}
         isFocused
         label='existing 12 or 24-word mnemonic seed'
@@ -44,16 +57,28 @@ export default function Import (): React.ReactElement<Props> {
       {account && <Name onChange={setName} />}
       {account && name && <Password onChange={setPassword} />}
       {account && name && password && (
-        <Address
-          address={account.address}
-          name={name}
-        >
-          <Button
-            label='Add the account with the supplied seed'
-            onClick={_onCreate}
+        <>
+          <Address
+            address={account.address}
+            name={name}
           />
-        </Address>
+          <VerticalSpace/>
+          <ButtonArea>
+            <Button
+              label='Add the account with the supplied seed'
+              onClick={_onCreate}
+            />
+          </ButtonArea>
+        </>
       )}
-    </div>
+    </>
   );
 }
+
+const SeedInput = styled(TextAreaWithLabel)`
+  margin-bottom: 16px;
+
+  textarea {
+    height: unset;  
+  }
+`;

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

@@ -76,24 +76,26 @@ function Address ({ address, className, children, genesisHash, name, actions }:
   const theme = ((chain && chain.icon) || 'polkadot') as 'polkadot';
 
   return <div className={className}>
-    <AccountInfoRow>
-      <Identicon
-        iconTheme={theme}
-        value={address}
-      />
-      <Info>
-        <Name>{name || (account && account.name) || '<unknown>'}</Name>
-        <FullAddress>{formatted || '<unknown>'}</FullAddress>
-      </Info>
-      {actions &&
+    <div>
+      <AccountInfoRow>
+        <Identicon
+          iconTheme={theme}
+          value={address}
+        />
+        <Info>
+          <Name>{name || (account && account.name) || '<unknown>'}</Name>
+          <FullAddress>{formatted || '<unknown>'}</FullAddress>
+        </Info>
+        {actions &&
       <>
         <Settings onClick={(): void => setShowActionsMenu(!showActionsMenu)} ref={actionsRef}>
           {showActionsMenu ? <ActiveActionsIcon/> : <ActionsIcon/>}
         </Settings>
         {showActionsMenu && <Menu>{actions}</Menu>}
       </>}
-    </AccountInfoRow>
-    {children}
+      </AccountInfoRow>
+      {children}
+    </div>
   </div>;
 }
 
@@ -171,7 +173,10 @@ const ActiveActionsIcon = styled(Svg).attrs(() => ({
 
 export default styled(Address)`
   position: relative;
-  background: ${({ theme }): string => theme.highlightedAreaBackground};
+
+  & > div {
+    background: ${({ theme }): string => theme.highlightedAreaBackground};
+  }
 
   & ${Identicon} {
     margin-left: 25px;

packages/extension-ui/src/partials/TitleWithAction.tsx

@@ -0,0 +1,30 @@
+// 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 { Title } from '../components';
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+  title: string;
+}
+
+function TitleWithAction ({ className, children, title }: Props): React.ReactElement<Props> {
+  return (
+    <div className={className}>
+      <Title>{title}</Title>
+      {children}
+    </div>
+  );
+}
+
+export default styled(TitleWithAction)`
+  display: flex;
+
+  ${Title} {
+    margin-top: 8px;
+  }
+`;

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

@@ -5,3 +5,4 @@
 export { default as Back } from './Back';
 export { default as Name } from './Name';
 export { default as Password } from './Password';
+export { default as TitleWithAction } from './TitleWithAction';