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,24 +25,25 @@ export default function Accounts (): React.ReactElement<Props> {
   const mediaAllowed = useContext(MediaContext);
   return (
     <>
-      <Header showSettings />
       {
         (accounts.length === 0)
           ? <AddAccount />
           : (
-            <AccountsArea>
-              <>
-                <Title>Accounts</Title>
-                {
-                  accounts.map((json, index): React.ReactNode => (
-                    <Account
-                      {...json}
-                      key={`${index}:${json.address}`}
-                    />
-                  ))
-                }
-              </>
-            </AccountsArea>
+            <>
+              <Header showSettings text={'Accounts'} />
+              <AccountsArea>
+                <>
+                  {
+                    accounts.map((json, index): React.ReactNode => (
+                      <Account
+                        {...json}
+                        key={`${index}:${json.address}`}
+                      />
+                    ))
+                  }
+                </>
+              </AccountsArea>
+            </>
           )
       }
       <ButtonArea>
@@ -79,5 +79,10 @@ const QrButton = styled(Button)`
 
 const AccountsArea = styled.div`
   height: 100%;
-  overflow: scroll;
+  overflow-y: scroll;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;

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 text='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 text={'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 text='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 text='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>
+      <HeaderWithSmallerMargin text='Import account' showBackArrow />
       <SeedInput
         rowsCount={2}
         isError={!account}
@@ -72,6 +68,10 @@ export default function Import (): React.ReactElement<Props> {
   );
 }
 
+const HeaderWithSmallerMargin = styled(Header)`
+  margin-bottom: 15px;
+`;
+
 const SeedInput = styled(TextAreaWithLabel)`
   margin-bottom: 16px;