Merge pull request #118 from parity-js/am-ux

Small UI improvements

package.json

@@ -41,11 +41,11 @@
   "scripts": {
     "build": "lerna run build",
     "preelectron": "yarn build",
-    "electron": "lerna run electron --scope fether",
+    "electron": "cd packages/fether-electron && yarn electron",
     "lint": "semistandard 'packages/**/*.js' --parser babel-eslint",
     "prepackage": "yarn build",
-    "package": "lerna run package --scope fether",
-    "release": "lerna run release --scope fether",
+    "package": "cd packages/fether-electron && yarn package",
+    "release": "cd packages/fether-electron && yarn release",
     "start": "npm-run-all -l -p start-*",
     "start-electron": "cd packages/fether-electron && yarn start",
     "start-hoc": "cd packages/light-hoc && yarn start",

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

@@ -96,6 +96,7 @@ class AccountsList extends Component {
                           ? accountsInfo[address].name
                           : '(No name)')
                       }
+                      shortAddress
                     />
                   </li>
                 ))

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

@@ -6,18 +6,22 @@
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import { TokenCard } from 'fether-ui';
+import { withRouter } from 'react-router-dom';
 
+@withRouter
 @inject('tokensStore')
 @observer
 class NewTokenItem extends Component {
   handleAddToken = () => {
-    const { token, tokensStore } = this.props;
+    const { history, token, tokensStore } = this.props;
     tokensStore.addToken(token.address, token);
+    history.goBack();
   };
 
   handleRemoveToken = () => {
-    const { token, tokensStore } = this.props;
+    const { history, token, tokensStore } = this.props;
     tokensStore.removeToken(token.address);
+    history.goBack();
   };
 
   render () {

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

@@ -9,7 +9,6 @@ import debounce from 'lodash/debounce';
 import { Header } from 'fether-ui';
 import { inject, observer } from 'mobx-react';
 import light from 'light-hoc';
-import { Link } from 'react-router-dom';
 
 import Health from '../Health';
 import NewTokenItem from './NewTokenItem';
@@ -96,17 +95,18 @@ class Whitelist extends Component {
   };
 
   render () {
+    const { history } = this.props;
     const { matches, search } = this.state;
 
     return (
       <div>
         <Header
           left={
-            <Link to='/tokens' className='icon -close'>
+            <a to='/tokens' className='icon -close' onClick={history.goBack}>
               Close
-            </Link>
+            </a>
           }
-          title={<h1>My tokens</h1>}
+          title={<h1>Search tokens</h1>}
         />
 
         <div className='window_content'>

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

 .account {
   display: flex;
 
+  &.-header {
+    .account_address {
+      font-size: 0.6rem;
+    }
+  }
+
   .account_avatar {
     width: (ms(0) * 1.3) + 1rem;
     height: (ms(0) * 1.3) + 1rem;
@@ -38,7 +44,7 @@
   .account_address {
     font-family: $mono;
     color: $grey;
-    font-size: ms(-2) * 0.9; // 0.9 is ugly here
+    font-size: ms(-2);
     line-height: ms(-2) * 1.3;
   }
 }

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

@@ -32,7 +32,7 @@
       padding: 0.25rem 0.5rem 0.175rem;
       display: inline-block;
       font-size: ms(0);
-      line-height: ms(0) * 1.3;
+      line-height: ms(0) * 0.8;
       color: rgba($black, 0.675);
       font-weight: 500;
     }

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

@@ -4,39 +4,35 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React from 'react';
-import Blockies from 'react-blockies';
 import PropTypes from 'prop-types';
 
+import Address from './Address';
+import Avatar from './Avatar';
 import Card from '../Card';
-import Placeholder from '../Placeholder';
+import Information from './Information';
+import Name from './Name';
 
-const AccountCard = ({ address, animate, name, ...otherProps }) => (
+const AccountCard = ({ address, name, shortAddress, ...otherProps }) => (
   <Card {...otherProps}>
     <div className='account'>
-      <div className='account_avatar'>
-        {address ? (
-          <Blockies seed={address.toLowerCase()} />
-        ) : (
-          <Placeholder animate={animate} height={36} width={36} />
-        )}
-      </div>
-      <div className='account_information'>
-        {name ? (
-          <div className='account_name'>{name}</div>
-        ) : (
-          <Placeholder animate={animate} height={18} width={100} />
-        )}
-        <div className='account_address'>
-          {address || <Placeholder animate={animate} height={12} width={150} />}
-        </div>
-      </div>
+      <Avatar address={address} />
+      <Information>
+        <Name name={name} />
+        <Address address={address} short={shortAddress} />
+      </Information>
     </div>
   </Card>
 );
 
+AccountCard.Address = Address;
+AccountCard.Avatar = Avatar;
+AccountCard.Information = Information;
+AccountCard.Name = Name;
+
 AccountCard.propTypes = {
   address: PropTypes.string,
-  name: PropTypes.string
+  name: PropTypes.string,
+  shortAddress: PropTypes.bool
 };
 
 export default AccountCard;

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

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import AddressShort from '../../AddressShort';
+import Placeholder from '../../Placeholder';
+
+const Address = ({ address, short, ...otherProps }) => (
+  <div className='account_address' {...otherProps}>
+    {address ? (
+      short ? (
+        <AddressShort address={address} />
+      ) : (
+        address
+      )
+    ) : (
+      <Placeholder height={18} width={100} />
+    )}
+  </div>
+);
+
+Address.defaultProps = {
+  short: false
+};
+
+Address.propTypes = {
+  name: PropTypes.string,
+  short: PropTypes.bool
+};
+
+export default Address;

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

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import Address from './Address';
+
+export default Address;

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

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from 'react';
+import Blockies from 'react-blockies';
+import PropTypes from 'prop-types';
+
+import Placeholder from '../../Placeholder';
+
+const Avatar = ({ address, ...otherProps }) => (
+  <div className='account_avatar' {...otherProps}>
+    {address ? (
+      <Blockies seed={address.toLowerCase()} />
+    ) : (
+      <Placeholder height={36} width={36} />
+    )}
+  </div>
+);
+
+Avatar.propTypes = {
+  address: PropTypes.string
+};
+
+export default Avatar;

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

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import Avatar from './Avatar';
+
+export default Avatar;

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

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+const Information = ({ children, ...otherProps }) => (
+  <div className='account_information' {...otherProps}>
+    {children}
+  </div>
+);
+
+Information.propTypes = {
+  children: PropTypes.node
+};
+
+export default Information;

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

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import Information from './Information';
+
+export default Information;

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

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Placeholder from '../../Placeholder';
+
+const Name = ({ name, ...otherProps }) => (
+  <div className='account_name' {...otherProps}>
+    {name || <Placeholder height={18} width={100} />}
+  </div>
+);
+
+Name.propTypes = {
+  name: PropTypes.string
+};
+
+export default Name;

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

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import Name from './Name';
+
+export default Name;

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

@@ -11,11 +11,11 @@ import ClickToCopy from '../ClickToCopy';
 import Header from '../Header';
 
 const NormalContainer = ({ children }) => (
-  <h1 className='account'>{children}</h1>
+  <h1 className='account -header'>{children}</h1>
 );
 const CopyContainer = ({ address, children, ...otherProps }) => (
   <ClickToCopy label='Copy address' textToCopy={address} {...otherProps}>
-    <a className='account'>{children}</a>
+    <a className='account -header'>{children}</a>
   </ClickToCopy>
 );
 
@@ -30,10 +30,8 @@ const AccountHeader = ({ address, copyAddress, name, ...otherProps }) => {
           name && (
             <Container address={address}>
               <Blockies seed={address.toLowerCase()} scale={2} size={8} />{' '}
-              {name}{' '}
-              <span className='account_address'>
-                {address.slice(0, 4)}..{address.slice(-4)}
-              </span>
+              {name} <br />
+              <span className='account_address'>{address}</span>
             </Container>
           )
         }

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

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const AddressShort = ({ address, as: T = 'span', ...otherProps }) => (
+  <T {...otherProps}>
+    {address.slice(0, 4)}..{address.slice(-4)}
+  </T>
+);
+
+AddressShort.propTypes = {
+  address: PropTypes.string.isRequired
+};
+
+export default AddressShort;

packages/fether-ui/src/AddressShort/index.js

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import AddressShort from './AddressShort';
+
+export default AddressShort;

packages/fether-ui/src/index.js

@@ -5,6 +5,7 @@
 
 import AccountCard from './AccountCard';
 import AccountHeader from './AccountHeader';
+import AddressShort from './AddressShort';
 import Card from './Card';
 import FormField from './FormField';
 import Header from './Header';
@@ -14,6 +15,7 @@ import TokenCard from './TokenCard';
 export {
   AccountCard,
   AccountHeader,
+  AddressShort,
   Card,
   FormField,
   Header,