feat: Relates to #337. Part 1 of 2 - Account view - Change header acc…

…ount design * Change Account screen so its header uses the Information component with a big identicon, a short address, so it is clickable, and with identicon on left of name and address. * Apply extra bottom margin between name and account address when Information component used in the header * Update header so it uses Flexbox according to docs as intended * Since we're using Flexbox without placeholder spacing for the left and right header buttons, when the title is shown in the header it is offset if there is only a left or right button. So a `titleOffset` prop is used on pages where the Header component is used to indicate if the title needs to be offset to the left or right so it appears centered in the screen. We also pass a `screen` prop (named after the component where the Header component is being used so we can tailor the header spacing on specific screens. * Re-order props alphabetically * QUESTION - should we consider always adding placeholder spacing for where both right and left buttons in header would be as an alternative so no offset for the title is require?
openethereum · Jan 18, 2019 · ece7123 · ece7123
1 parent b435ce3
commit ece7123
Show file tree

Hide file tree

Showing 15 changed files with 108 additions and 36 deletions.
diff --git a/packages/fether-react/src/Accounts/AccountsList/AccountsList.js b/packages/fether-react/src/Accounts/AccountsList/AccountsList.js
@@ -48,13 +48,15 @@ class AccountsList extends Component {
     return (
       <div className='accounts-list'>
         <Header
-          title={<h1>Accounts</h1>}
           right={
             <Clickable
               className='icon -new'
               onClick={this.handleCreateAccount}
             />
           }
+          screen='accounts'
+          title={<h1>Accounts</h1>}
+          titleOffset='right'
         />
 
         <div className='window_content'>
@@ -72,6 +74,7 @@ class AccountsList extends Component {
                       className='-clickable'
                       type={accountsInfo[address].type}
                       name={accountsInfo[address].name || '(no name)'}
+                      screen='accounts'
                       shortAddress
                     />
                   </li>

diff --git a/packages/fether-react/src/Accounts/CreateAccount/CreateAccount.js b/packages/fether-react/src/Accounts/CreateAccount/CreateAccount.js
@@ -74,9 +74,11 @@ class CreateAccount extends Component {
               </Link>
             )
           }
+          screen='create-account'
           title={
             <h1>{isImport ? 'Import account' : 'Create a new account'}</h1>
           }
+          titleOffset='left'
         />
 
         <div className='window_content'>

diff --git a/packages/fether-react/src/Onboarding/Onboarding.js b/packages/fether-react/src/Onboarding/Onboarding.js
@@ -50,7 +50,7 @@ class Onboarding extends Component {
   render () {
     return (
       <div>
-        <Header title={<h1>Terms of Use</h1>} />
+        <Header screen='onboarding' title={<h1>Terms of Use</h1>} />
 
         <div className='window_content'>
           <div className='box -padded'>

diff --git a/packages/fether-react/src/Send/ScanSignedTx/ScanSignedTx.js b/packages/fether-react/src/Send/ScanSignedTx/ScanSignedTx.js
@@ -67,7 +67,9 @@ class ScanSignedTx extends Component {
               Close
             </Link>
           }
+          screen='scan-signed-tx'
           title={token && <h1>Send {token.name}</h1>}
+          titleOffset='left'
         />
 
         <RequireHealth require='sync'>

diff --git a/packages/fether-react/src/Send/SignedTxSummary/SignedTxSummary.js b/packages/fether-react/src/Send/SignedTxSummary/SignedTxSummary.js
@@ -57,7 +57,9 @@ class SignedTxSummary extends Component {
               Close
             </Link>
           }
+          screen='signed-tx-summary'
           title={token && <h1>Send {token.name}</h1>}
+          titleOffset='left'
         />
 
         <RequireHealth require='sync'>

diff --git a/packages/fether-react/src/Send/TxForm/TxForm.js b/packages/fether-react/src/Send/TxForm/TxForm.js
@@ -185,12 +185,14 @@ class TxForm extends Component {
     return (
       <div>
         <Header
+          screen='txform'
           left={
             <Link to={`/tokens/${address}`} className='icon -back'>
               Close
             </Link>
           }
           title={token && <h1>Send {token.name}</h1>}
+          titleOffset='left'
         />
 
         <RequireHealth require='sync'>

diff --git a/packages/fether-react/src/Send/TxQrCode/TxQrCode.js b/packages/fether-react/src/Send/TxQrCode/TxQrCode.js
@@ -51,7 +51,9 @@ class TxQrCode extends Component {
               Close
             </Link>
           }
+          screen='tx-qr-code'
           title={token && <h1>Send {token.name}</h1>}
+          titleOffset='left'
         />
 
         <RequireHealth require='sync'>

diff --git a/packages/fether-react/src/Send/Unlock/Unlock.js b/packages/fether-react/src/Send/Unlock/Unlock.js
@@ -59,7 +59,9 @@ class Unlock extends Component {
               Close
             </Link>
           }
+          screen='unlock'
           title={token && <h1>Send {token.name}</h1>}
+          titleOffset='left'
         />
 
         <RequireHealth require='sync'>

diff --git a/packages/fether-react/src/Whitelist/Whitelist.js b/packages/fether-react/src/Whitelist/Whitelist.js
@@ -106,7 +106,9 @@ class Whitelist extends Component {
               Close
             </Link>
           }
+          screen='whitelist'
           title={<h1>Search tokens</h1>}
+          titleOffset='left'
         />
 
         <div className='window_content'>

diff --git a/packages/fether-react/src/assets/sass/components/_account.scss b/packages/fether-react/src/assets/sass/components/_account.scss
@@ -2,9 +2,12 @@
   display: flex;
 
   &.-header {
-    .account_address {
-      font-size: 0.7rem;
-    }
+    display: flex !important;
+    align-items: center;
+  }
+
+  &.-header-container {
+    display: flex;
   }
 
   .account_avatar {
@@ -41,6 +44,14 @@
     color: $black;
     font-weight: 500;
     margin-bottom: 0.1rem;
+
+    /* Information component when used with components
+     * in the header requires more bottom margin than
+     * where it is used in the AccountList componet
+     */
+    &.-header {
+      margin-bottom: 0.3rem;
+    }
   }
 
   .account_address {

diff --git a/packages/fether-react/src/assets/sass/components/_header-nav.scss b/packages/fether-react/src/assets/sass/components/_header-nav.scss
@@ -1,28 +1,60 @@
 .header-nav {
+  // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
   display: flex;
-  justify-content: space-between;
-  padding: 1rem 0.5rem;
-  position: relative;
-  overflow: hidden;
+  flex-direction: row;
   height: 3.5rem;
 
   .header-nav_left,
   .header-nav_right {
-    display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+  }
+
+  .header-nav_left {
+    padding-left: 0.5rem;
+  }
+
+  .header-nav_right {
+    padding-right: 0.5rem;
   }
 
   .header-nav_title {
+    flex: 1; // https://stackoverflow.com/a/35270047/3208553
     z-index: 2;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    padding: 1rem 0.5rem;
-    text-align: center;
+
+    /**
+     * Postfix is component to apply these styles to.
+     * Explicit list so easy to change incase header
+     * modified on a specific page
+     */
+    &.-header-accounts,
+    &.-header-create-account,
+    &.-header-onboarding,
+    &.-header-scan-signed-tx,
+    &.-header-signed-tx-summary,
+    &.-header-tx-qr-code,
+    &.-header-txform,
+    &.-header-unlock,
+    &.-header-whitelist, {
+      justify-content: center;
+      align-items: center;
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+
+      /* Offset from right when only button on left */
+      &.-offset-left {
+        padding-right: 2rem;
+      }
+
+      /* Offset from left when only button on right */
+      &.-offset-right {
+        padding-left: 2rem;
+      }
+    }
+
+    &.-header-tokens {
+      padding-left: 0.5rem;
+    }
 
     a,
     a:link,

diff --git a/packages/fether-ui/src/AccountCard/AccountCard.js b/packages/fether-ui/src/AccountCard/AccountCard.js
@@ -16,14 +16,15 @@ export const AccountCard = ({
   address,
   name,
   type,
+  screen,
   shortAddress,
   ...otherProps
 }) => (
   <Card {...otherProps}>
     <div className='account'>
       <Avatar address={address} type={type} />
       <Information>
-        <Name name={name} />
+        <Name name={name} screen={screen} />
         <Address address={address} short={shortAddress} />
       </Information>
     </div>
@@ -38,5 +39,6 @@ AccountCard.Name = Name;
 AccountCard.propTypes = {
   address: PropTypes.string,
   name: PropTypes.string,
+  screen: PropTypes.string,
   shortAddress: PropTypes.bool
 };
diff --git a/packages/fether-ui/src/AccountCard/Name/Name.js b/packages/fether-ui/src/AccountCard/Name/Name.js
@@ -8,12 +8,16 @@ import PropTypes from 'prop-types';
 
 import { Placeholder } from '../../Placeholder';
 
-export const Name = ({ name, ...otherProps }) => (
-  <div className='account_name' {...otherProps}>
+export const Name = ({ name, screen, ...otherProps }) => (
+  <div
+    className={`account_name ${screen !== 'accounts' ? '-header' : ''}`}
+    {...otherProps}
+  >
     {name || <Placeholder height={18} width={100} />}
   </div>
 );
 
 Name.propTypes = {
-  name: PropTypes.string
+  name: PropTypes.string,
+  screen: PropTypes.string
 };
diff --git a/packages/fether-ui/src/AccountHeader/AccountHeader.js b/packages/fether-ui/src/AccountHeader/AccountHeader.js
@@ -6,7 +6,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Address } from '../AccountCard/Address';
 import { Avatar } from '../AccountCard/Avatar';
+import { Information } from '../AccountCard/Information';
+import { Name } from '../AccountCard/Name';
 import { Clickable } from '../Clickable';
 import { ClickToCopy } from '../ClickToCopy';
 import { Header } from '../Header';
@@ -32,22 +35,21 @@ export const AccountHeader = ({
   return (
     <div>
       <Header
+        screen='tokens'
         title={
           address &&
           name &&
           type && (
-            <Container address={address}>
-              <Avatar
-                address={address}
-                scale={2}
-                type={type}
-                style={{ display: 'inline-block', marginRight: '5px' }}
-              />
-              {name} <br />
-              <span className='account_address'>{address}</span>
+            <Container address={address} className='account -header-container'>
+              <Avatar address={address} scale={4} type={type} />
+              <Information>
+                <Name name={name} />
+                <Address address={address} short />
+              </Information>
             </Container>
           )
         }
+        titleOffset='left'
         {...otherProps}
       />
     </div>

diff --git a/packages/fether-ui/src/Header/Header.js b/packages/fether-ui/src/Header/Header.js
@@ -8,18 +8,22 @@ import PropTypes from 'prop-types';
 
 import { Placeholder } from '../Placeholder';
 
-export const Header = ({ left, right, title }) => (
+export const Header = ({ left, right, screen, title, titleOffset }) => (
   <div className='header-nav'>
-    <div className='header-nav_left'>{left}</div>
-    <div className='header-nav_title'>
+    <div className='header-nav header-nav_left'>{left}</div>
+    <div
+      className={`header-nav header-nav_title -header-${screen} -offset-${titleOffset}`}
+    >
       {title || <Placeholder height={24} width={150} />}
     </div>
-    <div className='header-nav_right'>{right}</div>
+    <div className='header-nav header-nav_right'>{right}</div>
   </div>
 );
 
 Header.propTypes = {
   left: PropTypes.node,
   right: PropTypes.node,
-  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string])
+  screen: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  titleOffset: PropTypes.string
 };