Enhance dialog layouts (round 1) (#4637)

* Added SelectionList component for selections

* Use SelectionList in DappPermisions

* AddDapps uses SelectionList

* Fix AccountCard to consistent height

* Display type icons in creation dialog

* Complimentary colours

* Convert Signer defaults to SelectionList

* Fix Geth import - actually pass addresses through

* Work from addresses returned via RPC

* Display actual addresses imported (not selected)

* Update tests to cover bug fixed

* Prettyfy Geth import

* Description on selection actions

* SelectionList as entry point

* Update failing tests

* Subtle selection border

* Styling updates for account details

* Add ModalBox summary

* AddAddress updated

* Convert VaultAccounts to SelectionList

* Add tests for SectionList component

* Add tests for ModalBox component

* Re-apply stretch fix

* Apply scroll fixes from lates commit in #4621

* Clear name on switch (test in #4652, not pulling in)

* Remove refs (cleanup)

js/src/modals/AddAddress/addAddress.js

@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Form, Input, InputAddress, Portal } from '~/ui';
-import { AddIcon, CancelIcon } from '~/ui/Icons';
+import { Button, Form, Input, InputAddress, ModalBox, Portal } from '~/ui';
+import { AddIcon, AddressesIcon, CancelIcon } from '~/ui/Icons';
 
 import Store from './store';
 
@@ -76,7 +76,6 @@ export default class AddAddress extends Component {
           />
         }
         onClick={ this.onClose }
-        ref='closeButton'
       />,
       <Button
         disabled={ hasError }
@@ -89,7 +88,6 @@ export default class AddAddress extends Component {
           />
         }
         onClick={ this.onAdd }
-        ref='addButton'
       />
     ];
   }
@@ -98,64 +96,71 @@ export default class AddAddress extends Component {
     const { address, addressError, description, name, nameError } = this.store;
 
     return (
-      <Form>
-        <InputAddress
-          allowCopy={ false }
-          autoFocus
-          disabled={ !!this.props.address }
-          error={ addressError }
-          hint={
-            <FormattedMessage
-              id='addAddress.input.address.hint'
-              defaultMessage='the network address for the entry'
-            />
-          }
-          label={
-            <FormattedMessage
-              id='addAddress.input.address.label'
-              defaultMessage='network address'
-            />
-          }
-          onChange={ this.onEditAddress }
-          ref='inputAddress'
-          value={ address }
-        />
-        <Input
-          error={ nameError }
-          hint={
-            <FormattedMessage
-              id='addAddress.input.name.hint'
-              defaultMessage='a descriptive name for the entry'
-            />
-          }
-          label={
-            <FormattedMessage
-              id='addAddress.input.name.label'
-              defaultMessage='address name'
-            />
-          }
-          onChange={ this.onEditName }
-          ref='inputName'
-          value={ name }
-        />
-        <Input
-          hint={
-            <FormattedMessage
-              id='addAddress.input.description.hint'
-              defaultMessage='an expanded description for the entry'
-            />
-          }
-          label={
-            <FormattedMessage
-              id='addAddress.input.description.label'
-              defaultMessage='(optional) address description'
-            />
-          }
-          onChange={ this.onEditDescription }
-          ref='inputDescription'
-          value={ description }
-        />
-      </Form>
+      <ModalBox
+        icon={ <AddressesIcon /> }
+        summary={
+          <FormattedMessage
+            id='addAddress.header'
+            defaultMessage='To add a new entry to your addressbook, you need the network address of the account and can supply an optional description. Once added it will reflect in your address book.'
+          />
+        }
+      >
+        <Form>
+          <InputAddress
+            allowCopy={ false }
+            autoFocus
+            disabled={ !!this.props.address }
+            error={ addressError }
+            hint={
+              <FormattedMessage
+                id='addAddress.input.address.hint'
+                defaultMessage='the network address for the entry'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='addAddress.input.address.label'
+                defaultMessage='network address'
+              />
+            }
+            onChange={ this.onEditAddress }
+            value={ address }
+          />
+          <Input
+            error={ nameError }
+            hint={
+              <FormattedMessage
+                id='addAddress.input.name.hint'
+                defaultMessage='a descriptive name for the entry'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='addAddress.input.name.label'
+                defaultMessage='address name'
+              />
+            }
+            onChange={ this.onEditName }
+            value={ name }
+          />
+          <Input
+            hint={
+              <FormattedMessage
+                id='addAddress.input.description.hint'
+                defaultMessage='an expanded description for the entry'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='addAddress.input.description.label'
+                defaultMessage='(optional) address description'
+              />
+            }
+            onChange={ this.onEditDescription }
+            value={ description }
+          />
+        </Form>
+      </ModalBox>
     );
   }
 

js/src/modals/CreateAccount/AccountDetails/accountDetails.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, Input, InputAddress, QrCode } from '~/ui';
+import { IdentityIcon, Input, QrCode, Title } from '~/ui';
 
 import styles from '../createAccount.css';
 
@@ -29,56 +29,51 @@ export default class AccountDetails extends Component {
   }
 
   render () {
-    const { address, name } = this.props.store;
+    const { address, description, name } = this.props.store;
 
     return (
       <div className={ styles.details }>
-        <p>
-          <FormattedMessage
-            id='createAccount.accountDetails.intro'
-            defaultMessage='Your account has been created with the following details:'
-          />
-        </p>
-        <Form className={ styles.infoForm }>
-          <Input
-            allowCopy
-            hint={
-              <FormattedMessage
-                id='createAccount.accountDetails.name.hint'
-                defaultMessage='a descriptive name for the account'
+        <div className={ styles.info }>
+          <div className={ styles.account }>
+            <div className={ styles.name }>
+              <IdentityIcon
+                address={ address }
+                className={ styles.icon }
+                center
               />
-            }
-            label={
-              <FormattedMessage
-                id='createAccount.accountDetails.name.label'
-                defaultMessage='account name'
-              />
-            }
-            readOnly
-            value={ name }
-          />
-          <InputAddress
-            disabled
-            hint={
-              <FormattedMessage
-                id='createAccount.accountDetails.address.hint'
-                defaultMessage='the network address for the account'
+              <Title
+                byline={ description }
+                className={ styles.title }
+                title={ name }
               />
-            }
-            label={
-              <FormattedMessage
-                id='createAccount.accountDetails.address.label'
-                defaultMessage='address'
+            </div>
+            <div className={ styles.description }>
+              <Input
+                readOnly
+                hideUnderline
+                hint={
+                  <FormattedMessage
+                    id='createAccount.accountDetails.address.hint'
+                    defaultMessage='the network address for the account'
+                  />
+                }
+                label={
+                  <FormattedMessage
+                    id='createAccount.accountDetails.address.label'
+                    defaultMessage='address'
+                  />
+                }
+                value={ address }
+                allowCopy={ address }
               />
-            }
+              { this.renderPhrase() }
+            </div>
+          </div>
+          <QrCode
+            className={ styles.qr }
             value={ address }
           />
-          { this.renderPhrase() }
-        </Form>
-        <QrCode
-          className={ styles.qr }
-          value={ address }
-        />
+        </div>
       </div>
     );
   }

js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js

@@ -18,7 +18,10 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import styles from './accountDetailsGeth.css';
+import { SectionList } from '~/ui';
+import GethCard from '../GethCard';
+
+import styles from '../createAccount.css';
 
 @observer
 export default class AccountDetailsGeth extends Component {
@@ -27,33 +30,37 @@ export default class AccountDetailsGeth extends Component {
   }
 
   render () {
-    const { gethImported } = this.props.store;
+    const { gethAccountsAvailable, gethImported } = this.props.store;
+
+    const accounts = gethAccountsAvailable.filter((account) => gethImported.includes(account.address));
 
     return (
       <div>
-        <div>
+        <div className={ styles.summary }>
           <FormattedMessage
             id='createAccount.accountDetailsGeth.imported'
-            defaultMessage='You have imported {number} addresses from the Geth keystore:'
+            defaultMessage='You have completed the import of {number} addresses from the Geth keystore. These will now be available in your accounts list as a normal account, along with their associated balances on the network.'
             values={ {
               number: gethImported.length
             } }
           />
         </div>
-        <div className={ styles.address }>
-          { this.formatAddresses(gethImported) }
-        </div>
+        <SectionList
+          items={ accounts }
+          noStretch
+          renderItem={ this.renderAccount }
+        />
       </div>
     );
   }
 
-  formatAddresses (addresses) {
-    return addresses.map((address, index) => {
-      const comma = !index
-        ? ''
-        : ((index === addresses.length - 1) ? ' & ' : ', ');
-
-      return `${comma}${address}`;
-    }).join('');
+  renderAccount = (account, index) => {
+    return (
+      <GethCard
+        address={ account.address }
+        balance={ account.balance }
+        name={ `Geth Import ${index + 1}` }
+      />
+    );
   }
 }

js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.spec.js

@@ -39,22 +39,4 @@ describe('modals/CreateAccount/AccountDetailsGeth', () => {
   it('renders with defaults', () => {
     expect(render()).to.be.ok;
   });
-
-  describe('utility', () => {
-    describe('formatAddresses', () => {
-      let instance;
-
-      beforeEach(() => {
-        instance = component.instance();
-      });
-
-      it('renders a single item', () => {
-        expect(instance.formatAddresses(['one'])).to.equal('one');
-      });
-
-      it('renders multiple items', () => {
-        expect(instance.formatAddresses(['one', 'two', 'three'])).to.equal('one, two & three');
-      });
-    });
-  });
 });