Merge pull request #363 from paritytech/luke-337-screen-address-lengths

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

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

@@ -48,13 +48,13 @@ class AccountsList extends Component {
     return (
       <div className='accounts-list'>
         <Header
-          title={<h1>Accounts</h1>}
           right={
             <Clickable
               className='icon -new'
               onClick={this.handleCreateAccount}
             />
           }
+          title={<h1>Accounts</h1>}
         />
 
         <div className='window_content'>
@@ -72,6 +72,7 @@ class AccountsList extends Component {
                       className='-clickable'
                       type={accountsInfo[address].type}
                       name={accountsInfo[address].name || '(no name)'}
+                      screen='accounts'
                       shortAddress
                     />
                   </li>

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

 .account {
-  display: flex;
+  display: flex !important;
 
   &.-header {
-    .account_address {
-      font-size: 0.7rem;
-    }
+    justify-content: center;
+    width: 16rem;
   }
 
   .account_avatar {
@@ -26,9 +25,7 @@
   }
 
   .account_information {
-    padding-left: 0.325rem;
-    overflow: hidden;
-    flex-grow: 1;
+    padding-left: 0.325rem; /* gap from avatar */
   }
 
   .account_change_blockies {
@@ -41,6 +38,16 @@
     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 component
+     */
+    &.-header {
+      margin-top: 0.2rem;
+      margin-bottom: 0.3rem;
+    }
   }
 
   .account_address {

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

 .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;
+    width: 2.3rem;
+  }
+
+  .header-nav_left {
+    padding-left: 0.5rem;
+  }
+
+  .header-nav_right {
+    padding-right: 0.5rem;
   }
 
   .header-nav_title {
+    align-items: center; /* vertical alignment of titles */
+    /**
+     * Push the the area for the right button to the right
+     * https://stackoverflow.com/a/35270047/3208553
+     */
+    flex-grow: 1;
+    justify-content: center;
     z-index: 2;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    padding: 1rem 0.5rem;
-    text-align: center;
 
     a,
     a:link,

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

@@ -16,6 +16,7 @@ export const AccountCard = ({
   address,
   name,
   type,
+  screen,
   shortAddress,
   ...otherProps
 }) => (
@@ -23,7 +24,7 @@ export const AccountCard = ({
     <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
 };

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
 };

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';
@@ -36,15 +39,12 @@ export const AccountHeader = ({
           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'>
+              <Avatar address={address} scale={4} type={type} />
+              <Information>
+                <Name name={name} />
+                <Address address={address} short />
+              </Information>
             </Container>
           )
         }

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

@@ -10,11 +10,11 @@ import { Placeholder } from '../Placeholder';
 
 export const Header = ({ left, right, title }) => (
   <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'>
       {title || <Placeholder height={24} width={150} />}
     </div>
-    <div className='header-nav_right'>{right}</div>
+    <div className='header-nav header-nav_right'>{right}</div>
   </div>
 );