New color and improve UI

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

@@ -13,7 +13,6 @@ import {
   AddAccount,
   ButtonArea,
   Svg,
-  Title,
   ButtonWithSubtitle
 } from '../../components';
 import Account from './Account';
@@ -26,14 +25,13 @@ export default function Accounts (): React.ReactElement<Props> {
   const mediaAllowed = useContext(MediaContext);
   return (
     <>
-      <Header showSettings />
+      <Header showSettings headerText={ accounts.length === 0 ? 'Add Account' : 'Accounts'}/>
       {
         (accounts.length === 0)
           ? <AddAccount />
           : (
             <AccountsArea>
               <>
-                <Title>Accounts</Title>
                 {
                   accounts.map((json, index): React.ReactNode => (
                     <Account

packages/extension-ui/src/Popup/Authorize/Authorize.test.tsx

@@ -25,7 +25,7 @@ describe('Authorize', () => {
   it('render component', () => {
     const wrapper = mountAuthorize();
 
-    expect(wrapper.find(Header).text()).toBe('polkadot{.js}');
+    expect(wrapper.find(Header).text()).toBe('Authorize');
     expect(wrapper.find(Request).length).toBe(0);
   });
 

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

@@ -14,7 +14,7 @@ export default function Authorize (): React.ReactElement<{}> {
   return (
     <>
       <Scroll isLastRequest={requests.length === 1}>
-        <Header />
+        <Header headerText='Authorize'/>
         {requests.map(({ id, request, url }, index): React.ReactNode => (
           <Request
             authId={id}
@@ -31,4 +31,12 @@ export default function Authorize (): React.ReactElement<{}> {
 
 const Scroll = styled.div<{isLastRequest: boolean}>`
   overflow-y: ${({ isLastRequest }): string => isLastRequest ? 'hidden' : 'auto'};
+
+  && {
+    padding: 0;
+  }
+
+  ${Request} {
+    padding: 0 24px;
+  }
 `;

packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx

@@ -16,9 +16,9 @@ import {
   Button,
   themes,
   Input,
-  InputWithLabel
+  InputWithLabel,
+  Header
 } from '@polkadot/extension-ui/components';
-import CreationStep from '@polkadot/extension-ui/Popup/CreateAccount/CreationStep';
 import { ThemeProvider } from 'styled-components';
 
 configure({ adapter: new Adapter() });
@@ -59,18 +59,18 @@ describe('Create Account', () => {
     });
 
     it('action text is "Cancel"', () => {
-      expect(wrapper.find(CreationStep).find(ActionText).text()).toBe('Cancel');
+      expect(wrapper.find(Header).find(ActionText).text()).toBe('Cancel');
     });
 
     it('clicking "Cancel" redirects to main screen', () => {
-      wrapper.find(CreationStep).find(ActionText).simulate('click');
+      wrapper.find(Header).find(ActionText).simulate('click');
       expect(onActionStub).toBeCalledWith('/');
     });
 
     it('clicking on Next activates phase 2', () => {
       check(wrapper.find('input[type="checkbox"]'));
       wrapper.find('button').simulate('click');
-      expect(wrapper.find(CreationStep).text()).toBe('Create an account:2/2Back');
+      expect(wrapper.find(Header).text()).toBe('Create an account 2/2Back');
     });
   });
 

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

@@ -3,11 +3,10 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useContext, useEffect, useState } from 'react';
-
-import { ActionContext, Header, Loading } from '../../components';
+import styled from 'styled-components';
+import { ActionContext, Header, Loading, ActionText } from '../../components';
 import { createAccountSuri, createSeed } from '../../messaging';
 import Mnemonic from '@polkadot/extension-ui/Popup/CreateAccount/Mnemonic';
-import CreationStep from '@polkadot/extension-ui/Popup/CreateAccount/CreationStep';
 import AccountName from '@polkadot/extension-ui/Popup/CreateAccount/AccountName';
 
 export default function CreateAccount (): React.ReactElement {
@@ -43,8 +42,15 @@ export default function CreateAccount (): React.ReactElement {
 
   return (
     <>
-      <Header />
-      <CreationStep step={step} onClick={_onCancel} />
+      <Header headerText={'Create an account '}>
+        <CreationSteps>
+          <div>
+            <CurrentStep>{step}</CurrentStep>
+            <TotalSteps>/2</TotalSteps>
+          </div>
+          <ActionText text={step === 1 ? 'Cancel' : 'Back'} onClick={_onCancel} />
+        </CreationSteps>
+      </Header>
       <Loading>{account && (step === 1 ? (
         <Mnemonic seed={account.seed} onNextStep={_onNextStep} />
       ) : (
@@ -53,3 +59,27 @@ export default function CreateAccount (): React.ReactElement {
     </>
   );
 }
+
+const CreationSteps = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  flex-grow: 1;
+  padding-right: 24px;
+  margin-top: 3px;
+`;
+
+const CurrentStep = styled.span`
+  font-size: ${({ theme }): string => theme.labelFontSize};
+  line-height: ${({ theme }): string => theme.labelLineHeight};
+  color: ${({ theme }): string => theme.primaryColor};
+  font-weight: 800;
+  margin-left: 10px;
+`;
+
+const TotalSteps = styled.span`
+  font-size: ${({ theme }): string => theme.labelFontSize};
+  line-height: ${({ theme }): string => theme.labelLineHeight};
+  color: ${({ theme }): string => theme.textColor};
+  font-weight: 800;
+`;

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

@@ -5,9 +5,17 @@
 import React, { useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
-import { ActionContext, Address, Button, InputWithLabel, Title, Warning } from '../components';
+import {
+  ActionContext,
+  Address,
+  Button,
+  InputWithLabel,
+  Warning,
+  Header,
+  ActionText,
+  ActionBar
+} from '../components';
 import { exportAccount } from '../messaging';
-import { Back } from '../partials';
 import styled from 'styled-components';
 
 const MIN_LENGTH = 6;
@@ -37,8 +45,7 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
 
   return (
     <>
-      <Back />
-      <Title>Export account</Title>
+      <Header headerText='Export account' showBackArrow/>
       <div>
         <Address address={address}>
           <MovedWarning danger>You are exporting your account. Keep it safe and don&apos;t share it with anyone.</MovedWarning>
@@ -59,6 +66,9 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
             >
               I want to export this account
             </Button>
+            <CancelButton>
+              <ActionText text='Cancel' onClick={(): void => onAction('/')} />
+            </CancelButton>
           </ActionArea>
         </Address>
       </div>
@@ -71,7 +81,16 @@ const MovedWarning = styled(Warning)`
 `;
 
 const ActionArea = styled.div`
-  padding: 25px 24px;
+  padding: 10px 24px;
+`;
+
+const CancelButton = styled(ActionBar)`
+  margin-top: 4px;
+  text-decoration: underline;
+
+  ${ActionText} {
+    margin: auto;
+  }
 `;
 
 export default withRouter(Export);

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

@@ -4,10 +4,9 @@
 
 import React, { useContext } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
-import { ActionContext, Address, Button, Warning, Title } from '../components';
+import { ActionContext, Address, Button, Warning, Header, ActionBar, ActionText } from '../components';
 
 import { forgetAccount } from '../messaging';
-import { Back } from '../partials';
 import styled from 'styled-components';
 
 type Props = RouteComponentProps<{ address: string }>;
@@ -22,8 +21,7 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
 
   return (
     <>
-      <Back />
-      <Title>Forget account</Title>
+      <Header headerText='Forget account' showBackArrow/>
       <div>
         <Address address={address}>
           <MovedWarning danger>
@@ -36,6 +34,9 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
             >
               I want to forget this account
             </Button>
+            <CancelButton>
+              <ActionText text='Cancel' onClick={(): void => onAction('/')} />
+            </CancelButton>
           </ActionArea>
         </Address>
       </div>
@@ -48,7 +49,15 @@ const MovedWarning = styled(Warning)`
 `;
 
 const ActionArea = styled.div`
-  padding: 25px 24px;
+  padding: 10px 24px;
+`;
+
+const CancelButton = styled(ActionBar)`
+  margin-top: 4px;
+
+  ${ActionText} {
+    margin: auto;
+  }
 `;
 
 export default withRouter(Forget);

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, ActionText, Address, Button, ButtonArea, Header, VerticalSpace } from '../components';
+import { ActionContext, Address, Button, ButtonArea, Header, VerticalSpace } from '../components';
 import { createAccountExternal } from '../messaging';
-import { Name, TitleWithAction } from '../partials';
+import { Name } from '../partials';
 
 type Props = {};
 
@@ -27,10 +27,7 @@ export default function ImportQr (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header />
-      <TitleWithAction title='Import account from QR code'>
-        <ActionText text='Cancel' onClick={(): void => onAction('/')} />
-      </TitleWithAction>
+      <Header showBackArrow />
       {!account && (
         <div>
           <QrScanAddress onScan={setAccount} />

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

@@ -6,7 +6,6 @@ import React, { useContext, useState } from 'react';
 
 import {
   ActionContext,
-  ActionText,
   Address,
   Button,
   ButtonArea,
@@ -15,7 +14,7 @@ import {
   VerticalSpace
 } from '../components';
 import { createAccountSuri, validateSeed } from '../messaging';
-import { TitleWithAction, Name, Password } from '../partials';
+import { Name, Password } from '../partials';
 import styled from 'styled-components';
 
 type Props = {};
@@ -43,10 +42,7 @@ export default function Import (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header />
-      <TitleWithAction title='Import account'>
-        <ActionText text='Cancel' onClick={(): void => onAction('/')} />
-      </TitleWithAction>
+      <Header headerText='Import account' showBackArrow/>
       <SeedInput
         rowsCount={2}
         isError={!account}
@@ -67,6 +63,7 @@ export default function Import (): React.ReactElement<Props> {
             <Button onClick={_onCreate}>Add the account with the supplied seed</Button>
           </ButtonArea>
         </>
+
       )}
     </>
   );

packages/extension-ui/src/Popup/Signing/Qr.tsx

@@ -31,23 +31,35 @@ function Qr ({ className, onSignature, payload, request }: Props): React.ReactEl
 
   return (
     <div className={className}>
-      {isScanning
-        ? <QrScanSignature onScan={onSignature} />
-        : (
-          <QrDisplayPayload
-            address={request.address}
-            cmd={CMD_MORTAL}
-            payload={payloadU8a}
-          />
-        )
-      }
+      <QrArea>
+        {isScanning
+          ? <QrScanSignature onScan={onSignature} />
+          : (
+            <QrDisplayPayload
+              address={request.address}
+              cmd={CMD_MORTAL}
+              payload={payloadU8a}
+            />
+          )
+        }
+      </QrArea>
       {!isScanning && (
-        <Button onClick={_onShowQr}>Scan signature via camera</Button>
+        <ScanButton onClick={_onShowQr}>Scan signature via camera</ScanButton>
       )}
     </div>
   );
 }
 
+const ScanButton = styled(Button)`
+  margin-bottom: 8px;
+`;
+
+const QrArea = styled.div`
+  width: 65%;
+  margin: 5px auto 10px auto;
+  border: white solid 1px;
+`;
+
 export default styled(Qr)`
-  padding: 0.75rem 1.5rem 0 1.5rem;
+  height: 100%;
 `;

packages/extension-ui/src/Popup/Signing/Request.tsx

@@ -70,8 +70,7 @@ export default function Request ({ account: { isExternal }, request, signId, url
               request={payload}
               onSignature={_onSignature}
             />
-          )
-          : (
+          ) : (
             <Extrinsic
               isDecoded={true}
               payload={extrinsic}