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