UI 2 styling (#5518)

* [ci skip] js-precompiled 20170426-110849

* export topNavigate function

* Stateless components in shell

* Connection icon fill

* Parity overlay only in dapps

* Additional buttons

* Adjust toolbar styles

* Adjust ParityBar button styling

* Complete icon conversion

Cargo.lock

@@ -1777,7 +1777,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/paritytech/js-precompiled.git#4d50e7bfc3712287e37da1d45fe983f2a6e69ca7"
+source = "git+https://github.com/paritytech/js-precompiled.git#76c40dc32016e1189fd3b35d9cf7b8f53c648162"
 dependencies = [
  "parity-dapps-glue 1.7.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "1.7.60",
+  "version": "1.7.61",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",

js/src/modals/CreateAccount/TypeIcon/typeIcon.js

@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { AccountsIcon, DoneIcon, FileIcon, FileUploadIcon, KeyboardIcon, KeyIcon, MembershipIcon, PhoneLock } from '~/ui/Icons';
+import { AccountsIcon, DoneIcon, FileIcon, FileUploadIcon, KeyboardIcon, KeyIcon, MembershipIcon, QrIcon } from '~/ui/Icons';
 
 import { STAGE_INFO } from '../store';
 
@@ -49,7 +49,7 @@ export default class TypeIcon extends Component {
         return <MembershipIcon className={ className } />;
 
       case 'fromQr':
-        return <PhoneLock className={ className } />;
+        return <QrIcon className={ className } />;
 
       case 'fromRaw':
         return <KeyIcon className={ className } />;

js/src/shell/Application/Container/container.js

@@ -14,24 +14,14 @@
 // 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 React, { PropTypes } from 'react';
 
 import { FirstRun, UpgradeParity } from '~/modals';
 import { Errors, Tooltips } from '~/ui';
 
 import styles from '../application.css';
 
-export default class Container extends Component {
+export default function Container ({ children, onCloseFirstRun, showFirstRun, upgradeStore }) {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    onCloseFirstRun: PropTypes.func,
-    showFirstRun: PropTypes.bool,
-    upgradeStore: PropTypes.object.isRequired
-  };
-
-  render () {
-    const { children, onCloseFirstRun, showFirstRun, upgradeStore } = this.props;
-
   return (
     <div className={ styles.container }>
       <FirstRun
@@ -45,4 +35,10 @@ export default class Container extends Component {
     </div>
   );
 }
-}
+
+Container.propTypes = {
+  children: PropTypes.node.isRequired,
+  onCloseFirstRun: PropTypes.func,
+  showFirstRun: PropTypes.bool,
+  upgradeStore: PropTypes.object.isRequired
+};

js/src/shell/Application/DappContainer/dappContainer.js

@@ -14,20 +14,13 @@
 // 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 React, { PropTypes } from 'react';
 
 import { Errors } from '~/ui';
 
 import styles from '../application.css';
 
-export default class DappContainer extends Component {
+export default function DappContainer ({ children }) {
-  static propTypes = {
-    children: PropTypes.node.isRequired
-  };
-
-  render () {
-    const { children } = this.props;
-
   return (
     <div className={ styles.container }>
       <Errors />
@@ -35,4 +28,7 @@ export default class DappContainer extends Component {
     </div>
   );
 }
-}
+
+DappContainer.propTypes = {
+  children: PropTypes.node.isRequired
+};

js/src/shell/Application/FrameError/frameError.js

@@ -14,13 +14,12 @@
 // 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 } from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import styles from './frameError.css';
 
-export default class FrameError extends Component {
+export default function FrameError () {
-  render () {
   return (
     <div className={ styles.error }>
       <FormattedMessage
@@ -30,4 +29,3 @@ export default class FrameError extends Component {
     </div>
   );
 }
-}

js/src/shell/Application/Status/Consensus/consensus.js

@@ -0,0 +1,76 @@
+// 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, { PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export default function Consensus ({ upgradeStore }) {
+  if (!upgradeStore || !upgradeStore.consensusCapability) {
+    return null;
+  }
+
+  if (upgradeStore.consensusCapability === 'capable') {
+    return (
+      <div>
+        <FormattedMessage
+          id='application.status.consensus.capable'
+          defaultMessage='Capable'
+        />
+      </div>
+    );
+  }
+
+  if (upgradeStore.consensusCapability.capableUntil) {
+    return (
+      <div>
+        <FormattedMessage
+          id='application.status.consensus.capableUntil'
+          defaultMessage='Capable until #{blockNumber}'
+          values={ {
+            blockNumber: upgradeStore.consensusCapability.capableUntil
+          } }
+        />
+      </div>
+    );
+  }
+
+  if (upgradeStore.consensusCapability.incapableSince) {
+    return (
+      <div>
+        <FormattedMessage
+          id='application.status.consensus.incapableSince'
+          defaultMessage='Incapable since #{blockNumber}'
+          values={ {
+            blockNumber: upgradeStore.consensusCapability.incapableSince
+          } }
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <FormattedMessage
+        id='application.status.consensus.unknown'
+        defaultMessage='Unknown capability'
+      />
+    </div>
+  );
+}
+
+Consensus.propTypes = {
+  upgradeStore: PropTypes.object.isRequired
+};

js/src/shell/Application/Status/Consensus/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 './consensus';

js/src/shell/Application/Status/Upgrade/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 './upgrade';

js/src/shell/Application/Status/Upgrade/upgrade.js

@@ -0,0 +1,42 @@
+// 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, { PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export default function Upgrade ({ upgradeStore }) {
+  if (!upgradeStore.available) {
+    return null;
+  }
+
+  return (
+    <div>
+      <a
+        href='javascript:void(0)'
+        onClick={ upgradeStore.openModal }
+      >
+        <FormattedMessage
+          id='application.status.upgrade'
+          defaultMessage='Upgrade'
+        />
+      </a>
+    </div>
+  );
+}
+
+Upgrade.propTypes = {
+  upgradeStore: PropTypes.object.isRequired
+};

js/src/shell/Application/Status/status.js

@@ -14,34 +14,25 @@
 // 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 React, { PropTypes } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { BlockStatus } from '~/ui';
 
+import Consensus from './Consensus';
+import Upgrade from './Upgrade';
+
 import styles from './status.css';
 
-class Status extends Component {
+function Status ({ clientVersion, isTest, netChain, netPeers, upgradeStore }) {
-  static propTypes = {
-    clientVersion: PropTypes.string,
-    isTest: PropTypes.bool,
-    netChain: PropTypes.string,
-    netPeers: PropTypes.object,
-    upgradeStore: PropTypes.object.isRequired
-  }
-
-  render () {
-    const { clientVersion, isTest, netChain, netPeers } = this.props;
-
   return (
     <div className={ styles.status }>
       <div className={ styles.version }>
         { clientVersion }
       </div>
       <div className={ styles.upgrade }>
-          { this.renderConsensus() }
+        <Consensus upgradeStore={ upgradeStore } />
-          { this.renderUpgradeButton() }
+        <Upgrade upgradeStore={ upgradeStore } />
       </div>
       <div className={ styles.netinfo }>
         <BlockStatus />
@@ -56,84 +47,13 @@ class Status extends Component {
   );
 }
 
-  renderConsensus () {
+Status.propTypes = {
-    const { upgradeStore } = this.props;
+  clientVersion: PropTypes.string,
-
+  isTest: PropTypes.bool,
-    if (!upgradeStore || !upgradeStore.consensusCapability) {
+  netChain: PropTypes.string,
-      return null;
+  netPeers: PropTypes.object,
-    }
+  upgradeStore: PropTypes.object.isRequired
-
+};
-    if (upgradeStore.consensusCapability === 'capable') {
-      return (
-        <div>
-          <FormattedMessage
-            id='application.status.consensus.capable'
-            defaultMessage='Capable'
-          />
-        </div>
-      );
-    }
-
-    if (upgradeStore.consensusCapability.capableUntil) {
-      return (
-        <div>
-          <FormattedMessage
-            id='application.status.consensus.capableUntil'
-            defaultMessage='Capable until #{blockNumber}'
-            values={ {
-              blockNumber: upgradeStore.consensusCapability.capableUntil
-            } }
-          />
-        </div>
-      );
-    }
-
-    if (upgradeStore.consensusCapability.incapableSince) {
-      return (
-        <div>
-          <FormattedMessage
-            id='application.status.consensus.incapableSince'
-            defaultMessage='Incapable since #{blockNumber}'
-            values={ {
-              blockNumber: upgradeStore.consensusCapability.incapableSince
-            } }
-          />
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        <FormattedMessage
-          id='application.status.consensus.unknown'
-          defaultMessage='Unknown capability'
-        />
-      </div>
-    );
-  }
-
-  renderUpgradeButton () {
-    const { upgradeStore } = this.props;
-
-    if (!upgradeStore.available) {
-      return null;
-    }
-
-    return (
-      <div>
-        <a
-          href='javascript:void(0)'
-          onClick={ upgradeStore.openModal }
-        >
-          <FormattedMessage
-            id='application.status.upgrade'
-            defaultMessage='Upgrade'
-          />
-        </a>
-      </div>
-    );
-  }
-}
 
 function mapStateToProps (state) {
   const { clientVersion, netPeers, netChain, isTest } = state.nodeStatus;

js/src/shell/Application/application.js

@@ -54,7 +54,7 @@ class Application extends Component {
 
   render () {
     const [root] = (window.location.hash || '').replace('#/', '').split('/');
-    const isMinimized = root === 'app' || root === 'web';
+    const isMinimized = root !== '';
 
     if (process.env.NODE_ENV !== 'production' && root === 'playground') {
       return (

js/src/shell/Connection/connection.css

@@ -77,14 +77,12 @@
 .iconName {
 }
 
-.icon .svg {
+.icon i {
-  width: 6em !important;
+  font-size: 6em;
-  height: 6em !important;
 }
 
-.iconSmall .svg {
+.iconSmall i {
-  width: 3em !important;
+  font-size: 3em;
-  height: 3em !important;
 }
 
 .console {

js/src/shell/ParityBar/parityBar.css

@@ -172,8 +172,9 @@ $modalZ: 10001;
 }
 
 .label {
-  position: relative;
   display: inline-block;
+  padding: 5px;
+  position: relative;
   vertical-align: top;
 }
 
@@ -202,11 +203,14 @@ $modalZ: 10001;
 .header,
 .corner {
   button {
-    color: white !important;
+    background-color: transparent !important;
-  }
+    margin: 0 !important;
+    padding: 0 0.5em !important;
 
-  svg {
+    i {
-    fill: white !important;
+      font-size: 24px !important;
+      height: 24px !important;
+    }
   }
 }
 

js/src/shell/ParityBar/parityBar.js

@@ -285,7 +285,7 @@ class ParityBar extends Component {
 
     if (!externalLink) {
       return (
-        <Link to='/apps'>
+        <Link to='/'>
           { button }
         </Link>
       );

js/src/shell/index.js

@@ -39,8 +39,6 @@ import Application from './Application';
 import Dapp from './Dapp';
 import Dapps from './Dapps';
 
-import styles from '~/reset.css';
-
 import '~/environment';
 
 import '~/../assets/fonts/Roboto/font.css';
@@ -90,7 +88,7 @@ function onEnterDapp ({ params }) {
 
 ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <Router className={ styles.reset } history={ hashHistory }>
+    <Router history={ hashHistory }>
       <Route path='/' component={ Application }>
         <Redirect from='/auth' to='/' />
         <Route path='/:id' component={ Dapp } onEnter={ onEnterDapp } />

js/src/ui/Actionbar/actionbar.css

@@ -27,17 +27,6 @@
 }
 
 .toolbuttons {
+  padding: 0.5em 0;
   overflow: hidden;
-
-  button {
-    margin: 10px 0 10px 16px !important;
-
-    &:not([disabled]) {
-      color: white !important;
-
-      svg {
-        fill: white !important;
-      }
-    }
-  }
 }

js/src/ui/DappLink/dappLink.js

@@ -20,6 +20,10 @@ import { nodeOrStringProptype } from '~/util/proptypes';
 
 import styles from './dappLink.css';
 
+export function topNavigate (to) {
+  window.parent.location.hash = to;
+}
+
 export default class DappLink extends Component {
   static propTypes = {
     children: nodeOrStringProptype().isRequired,
@@ -41,6 +45,6 @@ export default class DappLink extends Component {
   }
 
   onClick = () => {
-    window.parent.location.hash = this.props.to;
+    topNavigate(this.props.to);
   }
 }

js/src/ui/Icons/index.js

@@ -17,66 +17,62 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
 
+export const AccountsIcon = () => <Icon name='id card outline' />;
 export const AddIcon = () => <Icon name='plus' />;
+export const AddressIcon = () => <Icon name='address book outline' />;
+export const AppsIcon = () => <Icon name='grid layout' />;
+export const AttachFileIcon = () => <Icon name='attach' />;
+export const BackgroundIcon = () => <Icon name='image' />;
 export const CancelIcon = () => <Icon name='cancel' />;
-export const DoneIcon = () => <Icon name='check' />;
+export const CheckIcon = () => <Icon name='check' />;
+export const CloseIcon = () => <Icon name='close' />;
+export const CompareIcon = () => <Icon name='exchange' />;
+export const ComputerIcon = () => <Icon name='desktop' />;
+export const ContractIcon = () => <Icon name='code' />;
+export const CopyIcon = () => <Icon name='copy' />;
+export const DashboardIcon = () => <Icon name='cubes' />;
+export const DoneIcon = CheckIcon;
 export const DeleteIcon = () => <Icon name='trash' />;
+export const DevelopIcon = () => <Icon name='connectdevelop' />;
+export const DialIcon = () => <Icon name='text telephone' />;
 export const EditIcon = () => <Icon name='edit' />;
+export const ErrorIcon = () => <Icon name='exclamation circle' />;
+export const EthernetIcon = () => <Icon name='wifi' />;
+export const FileIcon = () => <Icon name='file outline' />;
 export const FileDownloadIcon = () => <Icon name='download' />;
 export const FileUploadIcon = () => <Icon name='upload' />;
+export const FingerprintIcon = () => <Icon name='privacy' />;
+export const GasIcon = () => <Icon name='settings' />;
+export const GotoIcon = () => <Icon name='arrow circle right' />;
+export const InfoIcon = () => <Icon name='info circle' />;
+export const KeyIcon = () => <Icon name='key' />;
+export const KeyboardIcon = () => <Icon name='keyboard' />;
+export const LinkIcon = () => <Icon name='linkify' />;
+export const ListIcon = () => <Icon name='list ul' />;
 export const LockedIcon = () => <Icon name='unlock alternate' />;
+export const MembershipIcon = () => <Icon name='openid' />;
+export const MoveIcon = () => <Icon name='move' />;
+export const NextIcon = () => <Icon name='chevron right' />;
+export const PauseIcon = () => <Icon name='pause' />;
+export const PlayIcon = () => <Icon name='play' />;
+export const PrevIcon = () => <Icon name='chevron left' />;
+export const PrintIcon = () => <Icon name='print' />;
+export const QrIcon = () => <Icon name='qrcode' />;
+export const RefreshIcon = () => <Icon name='refresh' />;
+export const RemoveIcon = () => <Icon name='remove' />;
+export const ReorderIcon = MoveIcon;
+export const ReplayIcon = () => <Icon name='step forward' />;
+export const SaveIcon = () => <Icon name='save' />;
 export const SearchIcon = () => <Icon name='search' />;
 export const SendIcon = () => <Icon name='send' />;
+export const SettingsIcon = () => <Icon name='settings' />;
+export const SnoozeIcon = () => <Icon name='alarm' />;
+export const SortIcon = () => <Icon name='filter' />;
+export const StarIcon = () => <Icon name='star' />;
+export const StatusIcon = () => <Icon name='signal' />;
+export const UnlockedIcon = () => <Icon name='unlock' />;
+export const UpdateIcon = () => <Icon name='plug' />;
+export const UpdateWaitIcon = () => <Icon name='wait' />;
 export const VisibleIcon = () => <Icon name='eye' />;
-
+export const VerifyIcon = () => <Icon name='user circle outline' />;
-export AccountsIcon from 'material-ui/svg-icons/action/account-balance-wallet';
+export const VpnIcon = () => DashboardIcon;
-export AddressesIcon from 'material-ui/svg-icons/communication/contacts';
-export AppsIcon from 'material-ui/svg-icons/navigation/apps';
-export AttachFileIcon from 'material-ui/svg-icons/editor/attach-file';
-export BackgroundIcon from 'material-ui/svg-icons/image/blur-on';
-export CheckIcon from 'material-ui/svg-icons/navigation/check';
-export CloseIcon from 'material-ui/svg-icons/navigation/close';
-export CompareIcon from 'material-ui/svg-icons/action/compare-arrows';
-export ComputerIcon from 'material-ui/svg-icons/hardware/desktop-mac';
-export ContactsIcon from 'material-ui/svg-icons/image/grid-on';
-export ContractIcon from 'material-ui/svg-icons/action/code';
-export CopyIcon from 'material-ui/svg-icons/content/content-copy';
-export DashboardIcon from 'material-ui/svg-icons/action/dashboard';
-export DevelopIcon from 'material-ui/svg-icons/action/description';
-export DialIcon from 'material-ui/svg-icons/communication/dialpad';
-export ErrorIcon from 'material-ui/svg-icons/alert/error';
-export Ethernet from 'material-ui/svg-icons/action/settings-ethernet';
-export FileIcon from 'material-ui/svg-icons/editor/insert-drive-file';
-export FingerprintIcon from 'material-ui/svg-icons/action/fingerprint';
-export GasIcon from 'material-ui/svg-icons/maps/local-gas-station';
-export InfoIcon from 'material-ui/svg-icons/action/info-outline';
-export KeyIcon from 'material-ui/svg-icons/communication/vpn-key';
-export KeyboardIcon from 'material-ui/svg-icons/hardware/keyboard';
-export LinkIcon from 'material-ui/svg-icons/content/link';
-export ListIcon from 'material-ui/svg-icons/action/view-list';
-export MembershipIcon from 'material-ui/svg-icons/action/card-membership';
-export MoveIcon from 'material-ui/svg-icons/action/open-with';
-export NextIcon from 'material-ui/svg-icons/navigation/arrow-forward';
-export PauseIcon from 'material-ui/svg-icons/av/pause';
-export PhoneLock from 'material-ui/svg-icons/communication/phonelink-lock';
-export PlayIcon from 'material-ui/svg-icons/av/play-arrow';
-export PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
-export PrintIcon from 'material-ui/svg-icons/action/print';
-export RefreshIcon from 'material-ui/svg-icons/action/autorenew';
-export RemoveIcon from 'material-ui/svg-icons/content/remove';
-export ReorderIcon from 'material-ui/svg-icons/action/reorder';
-export ReplayIcon from 'material-ui/svg-icons/av/replay';
-export SaveIcon from 'material-ui/svg-icons/content/save';
-export SettingsIcon from 'material-ui/svg-icons/action/settings';
-export SnoozeIcon from 'material-ui/svg-icons/av/snooze';
-export SortIcon from 'material-ui/svg-icons/content/sort';
-export StarCircleIcon from 'material-ui/svg-icons/action/stars';
-export StarIcon from 'material-ui/svg-icons/toggle/star';
-export StarOutlineIcon from 'material-ui/svg-icons/toggle/star-border';
-export StatusIcon from 'material-ui/svg-icons/action/track-changes';
-export SubdirectoryIcon from 'material-ui/svg-icons/navigation/subdirectory-arrow-left';
-export UnlockedIcon from 'material-ui/svg-icons/action/lock-open';
-export UpdateIcon from 'material-ui/svg-icons/action/system-update-alt';
-export UpdateWaitIcon from 'material-ui/svg-icons/action/update';
-export VerifyIcon from 'material-ui/svg-icons/action/verified-user';
-export VpnIcon from 'material-ui/svg-icons/notification/vpn-lock';

js/src/ui/Portal/portal.css

@@ -117,15 +117,14 @@ $backgroundOverlay: rgba(255, 255, 255, 0.95);
   }
 
   .closeIcon {
-    font-size: 4em;
+    font-size: 3em;
     position: absolute;
     right: 1rem;
     top: 0.5rem;
     z-index: 100;
 
-    &, * {
+    i {
-      height: 48px !important;
+      font-size: inherit;
-      width: 48px !important;
     }
 
     &:hover {

js/src/ui/Portal/portal.js

@@ -139,10 +139,12 @@ export default class Portal extends Component {
     }
 
     return (
-      <CloseIcon
+      <div
         className={ styles.closeIcon }
         onClick={ this.handleClose }
-      />
+      >
+        <CloseIcon />
+      </div>
     );
   }
 

js/src/views/Settings/settings.js

@@ -21,7 +21,7 @@ import { Tab, Tabs } from 'material-ui';
 import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
 
 import { Actionbar, Page } from '~/ui';
-import { BackgroundIcon, Ethernet, VisibleIcon } from '~/ui/Icons';
+import { BackgroundIcon, EthernetIcon, VisibleIcon } from '~/ui/Icons';
 
 import styles from './settings.css';
 
@@ -41,7 +41,7 @@ export default class Settings extends Component {
     let proxy = null;
 
     if (!isProxied) {
-      proxy = this.renderTab(hash, 'proxy', <Ethernet />);
+      proxy = this.renderTab(hash, 'proxy', <EthernetIcon />);
     }
 
     return (

js/src/views/Web/AddressBar/addressBar.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 
 import { Button, DappUrlInput } from '~/ui';
-import { CloseIcon, RefreshIcon, SubdirectoryIcon } from '~/ui/Icons';
+import { CloseIcon, RefreshIcon, GotoIcon } from '~/ui/Icons';
 
 @observer
 export default class AddressBar extends Component {
@@ -50,7 +50,7 @@ export default class AddressBar extends Component {
         <Button
           disabled={ isPristine }
           onClick={ this.onGotoUrl }
-          icon={ <SubdirectoryIcon /> }
+          icon={ <GotoIcon /> }
         />
       </div>
     );