Extend Portal component with title, buttons & steps (as per Modal) (#4392)

* Allow Portal to take title & buttons props

* Fix tests

* Portal consistent in screen center

* Allow hiding of Close (e.g. FirstRun usage)

* Set overflow style on body based on open

* Don't lock scroll for child popups (overlaps)

* Override buttons to be white

* Expose ~/ui/Modal/Title as re-usable component

* Use ~/ui/Title to render the Title

* Update tests

* Added a portal example with buttons and steps

* Address PR comments

* Fix AddressSelect with new container withing container

* Move legend to "buttons"

* AddressSelect extra padding

js/src/modals/AddDapps/addDapps.css

@@ -20,7 +20,6 @@
 }
 
 .container {
-  margin-top: 1.5em;
   overflow-y: auto;
 }
 

js/src/modals/AddDapps/addDapps.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { ContainerTitle, DappCard, Portal, SectionList } from '~/ui';
+import { DappCard, Portal, SectionList } from '~/ui';
 import { CheckIcon } from '~/ui/Icons';
 
 import styles from './addDapps.css';
@@ -41,15 +41,13 @@ export default class AddDapps extends Component {
         className={ styles.modal }
         onClose={ store.closeModal }
         open
+        title={
+          <FormattedMessage
+            id='dapps.add.label'
+            defaultMessage='visible applications'
+          />
+        }
       >
-        <ContainerTitle
-          title={
-            <FormattedMessage
-              id='dapps.add.label'
-              defaultMessage='visible applications'
-            />
-          }
-        />
         <div className={ styles.container }>
           <div className={ styles.warning } />
           {

js/src/modals/DappPermissions/dappPermissions.css

@@ -15,12 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.modal {
-  flex-direction: column;
-}
-
 .container {
-  margin-top: 1.5em;
   overflow-y: auto;
 }
 
@@ -65,7 +60,6 @@
 
 .legend {
   opacity: 0.75;
-  margin-top: 1em;
 
   span {
     line-height: 24px;

js/src/modals/DappPermissions/dappPermissions.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { AccountCard, ContainerTitle, Portal, SectionList } from '~/ui';
+import { AccountCard, Portal, SectionList } from '~/ui';
 import { CheckIcon, StarIcon, StarOutlineIcon } from '~/ui/Icons';
 
 import styles from './dappPermissions.css';
@@ -38,18 +38,27 @@ export default class DappPermissions extends Component {
 
     return (
       <Portal
-        className={ styles.modal }
+        buttons={
+          <div className={ styles.legend }>
+            <FormattedMessage
+              id='dapps.permissions.description'
+              defaultMessage='{activeIcon} account is available to application, {defaultIcon} account is the default account'
+              values={ {
+                activeIcon: <CheckIcon />,
+                defaultIcon: <StarIcon />
+              } }
+            />
+          </div>
+        }
         onClose={ store.closeModal }
         open
+        title={
+          <FormattedMessage
+            id='dapps.permissions.label'
+            defaultMessage='visible dapp accounts'
+          />
+        }
       >
-        <ContainerTitle
-          title={
-            <FormattedMessage
-              id='dapps.permissions.label'
-              defaultMessage='visible dapp accounts'
-            />
-          }
-        />
         <div className={ styles.container }>
           <SectionList
             items={ store.accounts }
@@ -57,16 +66,6 @@ export default class DappPermissions extends Component {
             renderItem={ this.renderAccount }
           />
         </div>
-        <div className={ styles.legend }>
-          <FormattedMessage
-            id='dapps.permissions.description'
-            defaultMessage='{activeIcon} account is available to application, {defaultIcon} account is the default account'
-            values={ {
-              activeIcon: <CheckIcon />,
-              defaultIcon: <StarIcon />
-            } }
-          />
-        </div>
       </Portal>
     );
   }