Convert all remaining Modals to use Portal (UI consistency) (#4625)

* FirstRun dialog -> Portal

* CreateAccount Modal -> Portal

* CreateWallet dialog -> Portal

* Transfer dialog -> Portal

* Fix failing tests

* ShapeShift dialog -> Portal

* Verification dialog -> Portal

* EditMeta dialog -> Portal

* PasswordManager dialog -> Portal

* WalletSettings dialog -> Portal

* AddAddress dialog -> Portal

* s/delete address/forget address/

* AddContract dialog -> Portal

* DeployContract dialog -> Portal

* ExceuteContract dialog -> Portal

* LoadContract dialog -> Portal

* SaveContract dialog -> Portal

* UpgradeParity dialog -> Portal

* Convert inline modals (tsk, tsk)

* Remove ui/Modal

* Import dialog i18n

* Button array returns (thanks @derhuerst)

* Unneeded debug

* Typo

* Readability formatting

js/src/modals/PasswordManager/passwordManager.css

@@ -78,6 +78,6 @@
 
 .form {
   margin-top: 0;
-  padding: 0 0.5rem 1rem;
+  padding: 0.75rem 1.5rem 1.5rem 1.5rem;
   background-color: rgba(255, 255, 255, 0.05);
 }

js/src/modals/PasswordManager/passwordManager.js

@@ -23,7 +23,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError, openSnackbar } from '~/redux/actions';
-import { Button, Modal, IdentityName, IdentityIcon } from '~/ui';
+import { Button, IdentityName, IdentityIcon, Portal } from '~/ui';
 import PasswordStrength from '~/ui/Form/PasswordStrength';
 import Form, { Input } from '~/ui/Form';
 import { CancelIcon, CheckIcon, SendIcon } from '~/ui/Icons';
@@ -38,7 +38,7 @@ const MSG_FAILURE_STYLE = {
   backgroundColor: 'rgba(229, 115, 115, 0.75)'
 };
 const TABS_INKBAR_STYLE = {
-  backgroundColor: 'rgba(255, 255, 255, 0.55)'
+  backgroundColor: 'rgb(0, 151, 167)' // 'rgba(255, 255, 255, 0.55)'
 };
 const TABS_ITEM_STYLE = {
   backgroundColor: 'rgba(255, 255, 255, 0.05)'
@@ -61,20 +61,21 @@ class PasswordManager extends Component {
 
   render () {
     return (
-      <Modal
-        actions={ this.renderDialogActions() }
+      <Portal
+        buttons={ this.renderDialogActions() }
+        onClose={ this.onClose }
+        open
         title={
           <FormattedMessage
             id='passwordChange.title'
             defaultMessage='Password Manager'
           />
         }
-        visible
       >
         { this.renderAccount() }
         { this.renderPage() }
         { this.renderMessage() }
-      </Modal>
+      </Portal>
     );
   }
 
@@ -273,7 +274,6 @@ class PasswordManager extends Component {
 
   renderDialogActions () {
     const { actionTab, busy, isRepeatValid } = this.store;
-    const { onClose } = this.props;
 
     const cancelBtn = (
       <Button
@@ -285,7 +285,7 @@ class PasswordManager extends Component {
             defaultMessage='Cancel'
           />
         }
-        onClick={ onClose }
+        onClick={ this.onClose }
       />
     );
 
@@ -367,6 +367,10 @@ class PasswordManager extends Component {
     this.store.setValidatePassword(password);
   }
 
+  onClose = () => {
+    this.props.onClose();
+  }
+
   changePassword = () => {
     return this.store
       .changePassword()
@@ -380,7 +384,7 @@ class PasswordManager extends Component {
               />
             </div>
           );
-          this.props.onClose();
+          this.onClose();
         }
       })
       .catch((error) => {