review-fix: Remove titleOffset nad instead

* Remove titleOffset and add placeholder width for header nav buttons

* Remove passing `screen` prop for specific pages

packages/fether-react/src/Accounts/AccountsList/AccountsList.js

@@ -56,7 +56,6 @@ class AccountsList extends Component {
           }
           screen='accounts'
           title={<h1>Accounts</h1>}
-          titleOffset='right'
         />
 
         <div className='window_content'>

packages/fether-react/src/Accounts/CreateAccount/CreateAccount.js

@@ -74,11 +74,9 @@ class CreateAccount extends Component {
               </Link>
             )
           }
-          screen='create-account'
           title={
             <h1>{isImport ? 'Import account' : 'Create a new account'}</h1>
           }
-          titleOffset='left'
         />
 
         <div className='window_content'>

packages/fether-react/src/Onboarding/Onboarding.js

@@ -50,7 +50,7 @@ class Onboarding extends Component {
   render () {
     return (
       <div>
-        <Header screen='onboarding' title={<h1>Terms of Use</h1>} />
+        <Header title={<h1>Terms of Use</h1>} />
 
         <div className='window_content'>
           <div className='box -padded'>

packages/fether-react/src/Send/ScanSignedTx/ScanSignedTx.js

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

packages/fether-react/src/Send/SignedTxSummary/SignedTxSummary.js

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

packages/fether-react/src/Send/TxForm/TxForm.js

@@ -185,14 +185,12 @@ 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'>

packages/fether-react/src/Send/TxQrCode/TxQrCode.js

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

packages/fether-react/src/Send/Unlock/Unlock.js

@@ -59,9 +59,7 @@ class Unlock extends Component {
               Close
             </Link>
           }
-          screen='unlock'
           title={token && <h1>Send {token.name}</h1>}
-          titleOffset='left'
         />
 
         <RequireHealth require='sync'>

packages/fether-react/src/Whitelist/Whitelist.js

@@ -106,9 +106,7 @@ class Whitelist extends Component {
               Close
             </Link>
           }
-          screen='whitelist'
           title={<h1>Search tokens</h1>}
-          titleOffset='left'
         />
 
         <div className='window_content'>

packages/fether-react/src/assets/sass/components/_account.scss

@@ -8,6 +8,7 @@
 
   &.-header-container {
     display: flex;
+    padding-left: 0.5rem;
   }
 
   .account_avatar {

packages/fether-react/src/assets/sass/components/_header-nav.scss

@@ -8,6 +8,7 @@
   .header-nav_right {
     flex-direction: column;
     justify-content: center;
+    width: 2.3rem;
   }
 
   .header-nav_left {
@@ -19,40 +20,13 @@
   }
 
   .header-nav_title {
+    align-items: center;
     flex: 1; // https://stackoverflow.com/a/35270047/3208553
+    justify-content: center;
     z-index: 2;
 
-    /**
-     * 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 {
+      flex: 0;
       padding-left: 0.5rem;
     }
 

packages/fether-ui/src/AccountHeader/AccountHeader.js

@@ -49,7 +49,6 @@ export const AccountHeader = ({
             </Container>
           )
         }
-        titleOffset='left'
         {...otherProps}
       />
     </div>

packages/fether-ui/src/Header/Header.js

@@ -8,12 +8,10 @@ import PropTypes from 'prop-types';
 
 import { Placeholder } from '../Placeholder';
 
-export const Header = ({ left, right, screen, title, titleOffset }) => (
+export const Header = ({ left, right, screen, title }) => (
   <div className='header-nav'>
     <div className='header-nav header-nav_left'>{left}</div>
-    <div
-      className={`header-nav header-nav_title -header-${screen} -offset-${titleOffset}`}
-    >
+    <div className={`header-nav header-nav_title -header-${screen}`}>
       {title || <Placeholder height={24} width={150} />}
     </div>
     <div className='header-nav header-nav_right'>{right}</div>
@@ -24,6 +22,5 @@ Header.propTypes = {
   left: PropTypes.node,
   right: PropTypes.node,
   screen: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  titleOffset: PropTypes.string
+  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string])
 };