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/ui/ModalBox/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './modalBox';

js/src/ui/ModalBox/modalBox.css

@@ -0,0 +1,62 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.body {
+  display: flex;
+  justify-content: flex-start;
+
+  .content {
+    flex: 1;
+
+    .body {
+      width: 100%;
+    }
+
+    .summary {
+      line-height: 1.618em;
+      padding: 0 4em 1.5em 4em;
+      text-align: center;
+    }
+  }
+
+  .icon {
+    align-items: center;
+    background: rgb(167, 151, 0);
+    border-radius: 50%;
+    display: flex;
+    flex: 0 0 5em;
+    flex-direction: column;
+    height: 5em;
+    justify-content: center;
+    margin-right: 1.5em;
+    padding: 0.75em;
+    width: 5em;
+
+    img {
+      margin: 0;
+      padding: 0;
+    }
+
+    svg {
+      fill: white !important;
+      font-size: 3.5em !important;
+      height: 3.5em !important;
+      margin: 0 !important;
+      width: 3.5em !important;
+    }
+  }
+}

js/src/ui/ModalBox/modalBox.js

@@ -0,0 +1,61 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { nodeOrStringProptype } from '~/util/proptypes';
+
+import styles from './modalBox.css';
+
+export default class ModalBox extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    icon: PropTypes.node.isRequired,
+    summary: nodeOrStringProptype()
+  }
+
+  render () {
+    const { children, icon } = this.props;
+
+    return (
+      <div className={ styles.body }>
+        <div className={ styles.icon }>
+          { icon }
+        </div>
+        <div className={ styles.content }>
+          { this.renderSummary() }
+          <div className={ styles.body }>
+            { children }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderSummary () {
+    const { summary } = this.props;
+
+    if (!summary) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.summary }>
+        { summary }
+      </div>
+    );
+  }
+}

js/src/ui/ModalBox/modalBox.spec.js

@@ -0,0 +1,56 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import ModalBox from './';
+
+let component;
+
+function render () {
+  component = shallow(
+    <ModalBox
+      children={ <div id='testChild'>testChild</div> }
+      icon={ <div id='testIcon'>testIcon</div> }
+      summary={ <div id='testSummary'>testSummary</div> }
+    />
+  );
+
+  return component;
+}
+
+describe('ui/ModalBox', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  it('adds the children as supplied', () => {
+    expect(component.find('#testChild').text()).to.equal('testChild');
+  });
+
+  it('adds the icon as supplied', () => {
+    expect(component.find('#testIcon').text()).to.equal('testIcon');
+  });
+
+  it('adds the summary as supplied', () => {
+    expect(component.find('#testSummary').text()).to.equal('testSummary');
+  });
+});