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

[jacogr]

• Closer align the Portal with the Modal (for which it is supposed to be a replacement)
• DRY up Portal-user, i.e. no ~/ui/ContainerTitle imports, no additional classes for e.g. buttons
• Center Portal fully on-screen (margin around)
• Add overflow: hidden to body when Portal is visible
• Allow the ability to discard onClose when hideClose prop is set (e.g. FirstRun, non-closable)
• Add ~/ui/Title for rendering between Portal & Modal
• Consistency between use, i.e. the output looks the same regardless of where it is used

Future -

This is very much the start of a journey along a road. Future work will be driven by conversion of some of the modals to Portal, the changes here make at least ~/modals/FirstRun operational. (Part of another WIP PR)

[ngotchac]

This feels wrong :

I suggested something like this:

diff --git a/js/src/modals/AddDapps/addDapps.js b/js/src/modals/AddDapps/addDapps.js
index 0a4d19a..b91920f 100644
--- a/js/src/modals/AddDapps/addDapps.js
+++ b/js/src/modals/AddDapps/addDapps.js
@@ -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 } />
           {
diff --git a/js/src/ui/Portal/portal.css b/js/src/ui/Portal/portal.css
index a7d650c..72cd621 100644
--- a/js/src/ui/Portal/portal.css
+++ b/js/src/ui/Portal/portal.css
@@ -101,6 +101,10 @@ $popoverZ: 3600;
     }
   }
 
+  .content {
+    flex: 1;
+  }
+
   .closeIcon {
     font-size: 4em;
     position: absolute;
diff --git a/js/src/ui/Portal/portal.js b/js/src/ui/Portal/portal.js
index fea64fd..f93b037 100644
--- a/js/src/ui/Portal/portal.js
+++ b/js/src/ui/Portal/portal.js
@@ -102,7 +102,9 @@ export default class Portal extends Component {
               steps={ steps }
               title={ title }
             />
-            { children }
+            <div className={ styles.content }>
+              { children }
+            </div>
           </div>
         </div>
       </ReactPortal>

[ngotchac]

Can we have the first step as default if activeStep is not passed ?

[ngotchac]

(Added an example with steps and button in the Playground) => The buttons doesn't have any bottom-padding. Might want to add some

[ngotchac]

Only remark : now the addDapps__container has a margin-top and the portal title has a margin-bottom. So the result is twice the wanted margin I think

[ngotchac]

And the Address Selector is broken

[ngotchac]

[jacogr]

Oompf. Doesn't seem to like the .container idea as proposed then. (Ok, will get to it eventually to actually run through.)

[jacogr]

Fixed selector, removed extra padding.

[jacogr]

One annoyance (regression) issue remaining where the category headers are now scrollable. However, the PR fixes the titles & (very annoying) body scrollbar positions. Logged issue for outstanding issue.