Ui 2 ui (#5582)

Ui 2 small UI fixes

js/src/ui/ModalBox/modalBox.css

@@ -34,16 +34,12 @@
   }
 
   .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;
+    text-align: center;
     width: 5em;
 
     img {
@@ -51,12 +47,10 @@
       padding: 0;
     }
 
-    svg {
+    i {
-      fill: white !important;
+      color: white;
-      font-size: 3.5em !important;
+      font-size: 3.5rem;
-      height: 3.5em !important;
+      margin: 0.75rem -0.125rem;
-      margin: 0 !important;
-      width: 3.5em !important;
     }
   }
 }

js/src/ui/Portal/portal.css

@@ -120,7 +120,7 @@ $backgroundOverlay: rgba(255, 255, 255, 0.95);
     font-size: 3em;
     position: absolute;
     right: 1rem;
-    top: 0.5rem;
+    top: 1.5rem;
     z-index: 100;
 
     i {

js/src/views/Accounts/CreateAccount/TypeIcon/typeIcon.js

@@ -28,35 +28,45 @@ export default class TypeIcon extends Component {
   }
 
   render () {
-    const { className, createStore, type } = this.props;
+    const { className } = this.props;
+
+    return (
+      <div className={ className }>
+        { this.getIcon() }
+      </div>
+    );
+  }
+
+  getIcon () {
+    const { createStore, type } = this.props;
     const { createType, stage } = createStore;
 
     if (stage === STAGE_INFO) {
-      return <DoneIcon className={ className } />;
+      return <DoneIcon />;
     }
 
     switch (type || createType) {
       case 'fromGeth':
-        return <FileUploadIcon className={ className } />;
+        return <FileUploadIcon />;
 
       case 'fromJSON':
-        return <FileIcon className={ className } />;
+        return <FileIcon />;
 
       case 'fromPhrase':
-        return <KeyboardIcon className={ className } />;
+        return <KeyboardIcon />;
 
       case 'fromPresale':
-        return <MembershipIcon className={ className } />;
+        return <MembershipIcon />;
 
       case 'fromQr':
-        return <QrIcon className={ className } />;
+        return <QrIcon />;
 
       case 'fromRaw':
-        return <KeyIcon className={ className } />;
+        return <KeyIcon />;
 
       case 'fromNew':
       default:
-        return <AccountsIcon className={ className } />;
+        return <AccountsIcon />;
     }
   }
 }

js/src/views/Accounts/CreateAccount/createAccount.css

@@ -111,9 +111,8 @@
   .icon {
     color: rgb(167, 151, 0) !important;
     flex: 0 0 56px;
-    height: 56px !important;
+    font-size: 56px;
-    margin-right: 0.75em;
+    margin: 1.5rem 1.5rem 0 0;
-    width: 56px !important;
   }
 
   .info {

js/src/views/Addresses/AddAddress/addAddress.js

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, Form, Input, InputAddress, ModalBox, Portal } from '~/ui';
-import { AddIcon, AddressesIcon, CancelIcon } from '~/ui/Icons';
+import { AddIcon, AddressIcon, CancelIcon } from '~/ui/Icons';
 
 import Store from './store';
 
@@ -97,7 +97,7 @@ export default class AddAddress extends Component {
 
     return (
       <ModalBox
-        icon={ <AddressesIcon /> }
+        icon={ <AddressIcon /> }
         summary={
           <FormattedMessage
             id='addAddress.header'

js/src/views/ContractDevelop/LoadContract/loadContract.js

@@ -276,6 +276,7 @@ export default class LoadContract extends Component {
     return [
       <Button
         icon={ <CancelIcon /> }
+        key='cancel'
         label={
           <FormattedMessage
             id='loadContract.button.cancel'
@@ -287,6 +288,7 @@ export default class LoadContract extends Component {
       <Button
         disabled={ this.state.selected === -1 }
         icon={ <CheckIcon /> }
+        key='load'
         label={
           <FormattedMessage
             id='loadContract.button.load'