Add new header

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

@@ -9,7 +9,6 @@ import {
   AccountContext,
   Button,
   Header,
-  Link,
   MediaContext,
   AddAccount,
   ButtonArea
@@ -18,8 +17,7 @@ import Account from './Account';
 import styled from 'styled-components';
 
 const ButtonWithSubtitle = styled(Button)`
-  margin-right: 8px;
-
+
   button {
     padding-top: 0;
     padding-bottom: 0;
@@ -40,14 +38,14 @@ const ButtonWithSubtitle = styled(Button)`
 
 const QrButton = styled(Button)`
   width: 60px;
-  
+
   span {
     width: 20px;
     height: 20px;
     display: block;
     mask: url(${QrImage});
     mask-size: cover;
-    background: ${({ theme }): string => theme.color}; 
+    background: ${({ theme }): string => theme.color};
   }
 `;
 
@@ -64,10 +62,7 @@ export default function Accounts (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header
-        label='accounts'
-        labelExtra={<Link to='/settings'>Options</Link>}
-      />
+      <Header showSettings/>
       {
         (accounts.length === 0)
           ? <AddAccount

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

@@ -12,7 +12,7 @@ export default function Authorize (): React.ReactElement<{}> {
 
   return (
     <div>
-      <Header label='authorize' />
+      <Header />
       {requests.map(({ id, request, url }, index): React.ReactNode => (
         <Request
           authId={id}

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

@@ -43,7 +43,7 @@ export default function CreateAccount (): React.ReactElement {
 
   return (
     <>
-      <Header label='create account' />
+      <Header/>
       <CreationStep step={step} onClick={_onCancel}/>
       <Loading>{account && (step === 1 ? (
         <Mnemonic seed={account.seed} onNextStep={_onNextStep}/>

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

@@ -5,7 +5,7 @@
 import React, { useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
-import { ActionContext, Address, Button, Header, InputWithLabel, Warning } from '../components';
+import { ActionContext, Address, Button, InputWithLabel, Warning } from '../components';
 import { exportAccount } from '../messaging';
 import { Back } from '../partials';
 
@@ -36,7 +36,6 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
 
   return (
     <div>
-      <Header label='export account' />
       <Back />
       <Address address={address}>
         <Warning danger>You are exporting your account. Keep it safe and don&apos;t share it with anyone.</Warning>

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

@@ -5,7 +5,7 @@
 import React, { useContext } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
-import { ActionContext, Address, Button, Header, Tip } from '../components';
+import { ActionContext, Address, Button, Tip } from '../components';
 import { forgetAccount } from '../messaging';
 import { Back } from '../partials';
 
@@ -21,7 +21,6 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
 
   return (
     <div>
-      <Header label='forget account' />
       <Back />
       <Address address={address}>
         <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>

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

@@ -27,7 +27,7 @@ export default function ImportQr (): React.ReactElement<Props> {
 
   return (
     <div>
-      <Header label='import external' />
+      <Header/>
       <Back />
       {!account && <QrScanAddress onScan={setAccount} />}
       {account && (

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

@@ -33,7 +33,7 @@ export default function Import (): React.ReactElement<Props> {
 
   return (
     <div>
-      <Header label='import account' />
+      <Header/>
       <Back />
       <TextAreaWithLabel
         isError={!account}

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

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import settings from '@polkadot/ui-settings';
 import { setSS58Format } from '@polkadot/util-crypto';
 
-import { Button, Dropdown, Header } from '../../components';
+import { Button, Dropdown } from '../../components';
 import { windowOpen } from '../../messaging';
 import { Back } from '../../partials';
 
@@ -47,7 +47,6 @@ export default function Settings (): React.ReactElement<{}> {
 
   return (
     <div>
-      <Header label='settings' />
       <Back />
       <Dropdown
         label='display addresses formatted for'

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

@@ -12,7 +12,7 @@ export default function Signing (): React.ReactElement<{}> {
 
   return (
     <div>
-      <Header label='transactions' />
+      <Header/>
       {requests.map(({ account, id, request, url }, index): React.ReactNode => (
         <Request
           account={account}

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

@@ -32,7 +32,7 @@ export default function Welcome (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header label='welcome' />
+      <Header/>
       <WelcomeLabel/>
       <Note>Before we start, just a couple of notes regarding use:</Note>
       <Box>

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

@@ -27,9 +27,9 @@ function AddAccount ({ children, className, header, to, onClick, imageVisible }:
   };
 
   return (
-    <div>
+    <div className={className}>
       {imageVisible && <Image src={addAccountImage} alt="add account" onClick={_onClick}/>}
-      <article className={className}>
+      <article>
         {header && <h3>{header}</h3>}
         <TipText>{children}</TipText>
       </article>
@@ -54,6 +54,7 @@ const Image = styled.img`
 
 export default styled(AddAccount)`
   color: ${({ theme }): string => theme.color};
+  height: 100%;
 
   h3 {
     color: ${({ theme }): string => theme.color};

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

@@ -3,15 +3,20 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import styled from 'styled-components';
+import Button from './Button';
 
 export default styled.div`
   display: flex;
   flex-direction: row;
   background: ${({ theme }): string => theme.btnAreaBackground};
   padding: 12px 1rem;
-  
+
   &&& {
     margin-left: 0;
     margin-right: 0;
   }
+
+  & > ${Button}:not(:last-of-type) {
+    margin-right: 8px;
+  }
 `;

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

@@ -4,44 +4,79 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import logo from '../assets/pjs.svg';
+import gear from '../assets/gear.svg';
+import { Link } from '.';
 
 interface Props {
   children?: React.ReactNode;
   className?: string;
-  label?: React.ReactNode;
-  labelExtra?: React.ReactNode;
+  showSettings?: boolean;
 }
 
-function Header ({ children, className, label, labelExtra }: Props): React.ReactElement<Props> {
+function Header ({ children, className, showSettings }: Props): React.ReactElement<Props> {
   return (
     <h2 className={className}>
-      <div className='label'>{label}</div>
-      {labelExtra && (
-        <div className='labelExtra'>{labelExtra}</div>
-      )}
-      {children}
+      <Container>
+        {showSettings && <Space/>}
+        <Branding>
+          <Logo src={logo} />
+          <LogoText>polkadot</LogoText>
+        </Branding>
+        {showSettings && <Link to='/settings'>
+          <Gear src={gear} />
+        </Link>}
+        {children}
+      </Container>
     </h2>
   );
 }
 
+const Container = styled.div`
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    border-bottom: 1px solid ${({ theme }): string => theme.inputBorder};
+`;
+
+const Branding = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${({ theme }): string => theme.hdrColor};
+  font-family: ${({ theme }): string => theme.fontFamily};
+  text-align: center;
+  width: 100%;
+`;
+
+const Space = styled.div`
+  width: 21px;
+  margin-left: 1rem;
+`;
+
+const Logo = styled.img`
+  height: 28px;
+  width: 28px;
+  margin: 12px;
+`;
+
+const Gear = styled.img`
+  height: 18px;
+  width: 18px;
+  margin-right: 1rem;
+  align-self: center;
+`;
+
+const LogoText = styled.span`
+  color: ${({ theme }): string => theme.color};
+  font-family: ${({ theme }): string => theme.fontFamily};
+`;
+
 export default styled(Header)`
   background: ${({ theme }): string => theme.hdrBg};
   box-sizing: border-box;
   font-weight: normal;
   margin: 0 -1rem;
   padding: 0.75rem 1rem;
   position: relative;
-
-  .label {
-    color: ${({ theme }): string => theme.hdrColor};
-    font-family: ${({ theme }): string => theme.fontFamily};
-    text-transform: uppercase;
-  }
-
-  .labelExtra {
-    bottom: 0.75rem;
-    font-size: 1rem;
-    position: absolute;
-    right: 1rem;
-  }
 `;

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

@@ -23,6 +23,8 @@ function Link ({ children, className, onClick, to }: Props): React.ReactElement<
 }
 
 export default styled(Link)`
+  display: flex;
+  align-items: center;
   color: ${({ isDanger, theme }): string => isDanger ? theme.linkColorDanger : theme.linkColor};
   opacity: 0.9;
   text-decoration: none;