From d16cfc736d7bd8edaad05e906d303473f185f8b0 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Thu, 27 Apr 2017 13:28:02 +0200 Subject: [PATCH] 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 | 2 +- js/package.json | 2 +- .../modals/CreateAccount/TypeIcon/typeIcon.js | 4 +- .../shell/Application/Container/container.js | 46 +++--- .../DappContainer/dappContainer.js | 28 ++-- .../Application/FrameError/frameError.js | 22 ++- .../Application/Status/Consensus/consensus.js | 76 ++++++++++ .../Application/Status/Consensus/index.js | 17 +++ .../shell/Application/Status/Upgrade/index.js | 17 +++ .../Application/Status/Upgrade/upgrade.js | 42 ++++++ js/src/shell/Application/Status/status.js | 140 ++++-------------- js/src/shell/Application/application.js | 2 +- js/src/shell/Connection/connection.css | 10 +- js/src/shell/ParityBar/parityBar.css | 14 +- js/src/shell/ParityBar/parityBar.js | 2 +- js/src/shell/index.js | 4 +- js/src/ui/Actionbar/actionbar.css | 13 +- js/src/ui/DappLink/dappLink.js | 6 +- js/src/ui/Icons/index.js | 102 ++++++------- js/src/ui/Portal/portal.css | 7 +- js/src/ui/Portal/portal.js | 6 +- js/src/views/Settings/settings.js | 4 +- js/src/views/Web/AddressBar/addressBar.js | 4 +- 23 files changed, 311 insertions(+), 259 deletions(-) create mode 100644 js/src/shell/Application/Status/Consensus/consensus.js create mode 100644 js/src/shell/Application/Status/Consensus/index.js create mode 100644 js/src/shell/Application/Status/Upgrade/index.js create mode 100644 js/src/shell/Application/Status/Upgrade/upgrade.js diff --git a/Cargo.lock b/Cargo.lock index 5c71774fa..d6b128491 100644 --- a/Cargo.lock +++ b/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)", ] diff --git a/js/package.json b/js/package.json index 3e3bcf80a..ddfb7c2ba 100644 --- a/js/package.json +++ b/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 ", diff --git a/js/src/modals/CreateAccount/TypeIcon/typeIcon.js b/js/src/modals/CreateAccount/TypeIcon/typeIcon.js index e63763df7..ed64ab2c2 100644 --- a/js/src/modals/CreateAccount/TypeIcon/typeIcon.js +++ b/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 ; case 'fromQr': - return ; + return ; case 'fromRaw': return ; diff --git a/js/src/shell/Application/Container/container.js b/js/src/shell/Application/Container/container.js index c4c5ea438..b869a32e3 100644 --- a/js/src/shell/Application/Container/container.js +++ b/js/src/shell/Application/Container/container.js @@ -14,35 +14,31 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -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 { - 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 ( -
- - - - - { children } -
- ); - } +export default function Container ({ children, onCloseFirstRun, showFirstRun, upgradeStore }) { + return ( +
+ + + + + { children } +
+ ); } + +Container.propTypes = { + children: PropTypes.node.isRequired, + onCloseFirstRun: PropTypes.func, + showFirstRun: PropTypes.bool, + upgradeStore: PropTypes.object.isRequired +}; diff --git a/js/src/shell/Application/DappContainer/dappContainer.js b/js/src/shell/Application/DappContainer/dappContainer.js index 7851e9895..51f8c34cc 100644 --- a/js/src/shell/Application/DappContainer/dappContainer.js +++ b/js/src/shell/Application/DappContainer/dappContainer.js @@ -14,25 +14,21 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -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 { - static propTypes = { - children: PropTypes.node.isRequired - }; - - render () { - const { children } = this.props; - - return ( -
- - { children } -
- ); - } +export default function DappContainer ({ children }) { + return ( +
+ + { children } +
+ ); } + +DappContainer.propTypes = { + children: PropTypes.node.isRequired +}; diff --git a/js/src/shell/Application/FrameError/frameError.js b/js/src/shell/Application/FrameError/frameError.js index 0cf1f4ef2..0a6d84c46 100644 --- a/js/src/shell/Application/FrameError/frameError.js +++ b/js/src/shell/Application/FrameError/frameError.js @@ -14,20 +14,18 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -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 { - render () { - return ( -
- -
- ); - } +export default function FrameError () { + return ( +
+ +
+ ); } diff --git a/js/src/shell/Application/Status/Consensus/consensus.js b/js/src/shell/Application/Status/Consensus/consensus.js new file mode 100644 index 000000000..000927125 --- /dev/null +++ b/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 . + +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 ( +
+ +
+ ); + } + + if (upgradeStore.consensusCapability.capableUntil) { + return ( +
+ +
+ ); + } + + if (upgradeStore.consensusCapability.incapableSince) { + return ( +
+ +
+ ); + } + + return ( +
+ +
+ ); +} + +Consensus.propTypes = { + upgradeStore: PropTypes.object.isRequired +}; diff --git a/js/src/shell/Application/Status/Consensus/index.js b/js/src/shell/Application/Status/Consensus/index.js new file mode 100644 index 000000000..6d6417d11 --- /dev/null +++ b/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 . + +export default from './consensus'; diff --git a/js/src/shell/Application/Status/Upgrade/index.js b/js/src/shell/Application/Status/Upgrade/index.js new file mode 100644 index 000000000..afdce7b67 --- /dev/null +++ b/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 . + +export default from './upgrade'; diff --git a/js/src/shell/Application/Status/Upgrade/upgrade.js b/js/src/shell/Application/Status/Upgrade/upgrade.js new file mode 100644 index 000000000..c4b89b0ee --- /dev/null +++ b/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 . + +import React, { PropTypes } from 'react'; +import { FormattedMessage } from 'react-intl'; + +export default function Upgrade ({ upgradeStore }) { + if (!upgradeStore.available) { + return null; + } + + return ( +
+ + + +
+ ); +} + +Upgrade.propTypes = { + upgradeStore: PropTypes.object.isRequired +}; diff --git a/js/src/shell/Application/Status/status.js b/js/src/shell/Application/Status/status.js index a9efcdb93..4a1788543 100644 --- a/js/src/shell/Application/Status/status.js +++ b/js/src/shell/Application/Status/status.js @@ -14,127 +14,47 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import React, { Component, PropTypes } from 'react'; -import { FormattedMessage } from 'react-intl'; +import React, { PropTypes } from 'react'; 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 { - 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 ( -
-
- { clientVersion } +function Status ({ clientVersion, isTest, netChain, netPeers, upgradeStore }) { + return ( +
+
+ { clientVersion } +
+
+ + +
+
+ +
+ { netChain }
-
- { this.renderConsensus() } - { this.renderUpgradeButton() } -
-
- -
- { netChain } -
-
- { netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers -
+
+ { netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers
- ); - } - - renderConsensus () { - const { upgradeStore } = this.props; - - if (!upgradeStore || !upgradeStore.consensusCapability) { - return null; - } - - if (upgradeStore.consensusCapability === 'capable') { - return ( -
- -
- ); - } - - if (upgradeStore.consensusCapability.capableUntil) { - return ( -
- -
- ); - } - - if (upgradeStore.consensusCapability.incapableSince) { - return ( -
- -
- ); - } - - return ( -
- -
- ); - } - - renderUpgradeButton () { - const { upgradeStore } = this.props; - - if (!upgradeStore.available) { - return null; - } - - return ( -
- - - -
- ); - } +
+ ); } +Status.propTypes = { + clientVersion: PropTypes.string, + isTest: PropTypes.bool, + netChain: PropTypes.string, + netPeers: PropTypes.object, + upgradeStore: PropTypes.object.isRequired +}; + function mapStateToProps (state) { const { clientVersion, netPeers, netChain, isTest } = state.nodeStatus; diff --git a/js/src/shell/Application/application.js b/js/src/shell/Application/application.js index d53c024d3..f425a4d36 100644 --- a/js/src/shell/Application/application.js +++ b/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 ( diff --git a/js/src/shell/Connection/connection.css b/js/src/shell/Connection/connection.css index 9018c5937..544498bac 100644 --- a/js/src/shell/Connection/connection.css +++ b/js/src/shell/Connection/connection.css @@ -77,14 +77,12 @@ .iconName { } -.icon .svg { - width: 6em !important; - height: 6em !important; +.icon i { + font-size: 6em; } -.iconSmall .svg { - width: 3em !important; - height: 3em !important; +.iconSmall i { + font-size: 3em; } .console { diff --git a/js/src/shell/ParityBar/parityBar.css b/js/src/shell/ParityBar/parityBar.css index db44f8066..59bdd639e 100644 --- a/js/src/shell/ParityBar/parityBar.css +++ b/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 { - fill: white !important; + i { + font-size: 24px !important; + height: 24px !important; + } } } diff --git a/js/src/shell/ParityBar/parityBar.js b/js/src/shell/ParityBar/parityBar.js index cef8bc4e3..a5cd32c14 100644 --- a/js/src/shell/ParityBar/parityBar.js +++ b/js/src/shell/ParityBar/parityBar.js @@ -285,7 +285,7 @@ class ParityBar extends Component { if (!externalLink) { return ( - + { button } ); diff --git a/js/src/shell/index.js b/js/src/shell/index.js index a54b94fbd..715968dda 100644 --- a/js/src/shell/index.js +++ b/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( - + diff --git a/js/src/ui/Actionbar/actionbar.css b/js/src/ui/Actionbar/actionbar.css index 2e19001a9..9b6e5fc39 100644 --- a/js/src/ui/Actionbar/actionbar.css +++ b/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; - } - } - } } diff --git a/js/src/ui/DappLink/dappLink.js b/js/src/ui/DappLink/dappLink.js index ba74b3e67..a097a183a 100644 --- a/js/src/ui/DappLink/dappLink.js +++ b/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); } } diff --git a/js/src/ui/Icons/index.js b/js/src/ui/Icons/index.js index a03603103..9288b1b15 100644 --- a/js/src/ui/Icons/index.js +++ b/js/src/ui/Icons/index.js @@ -17,66 +17,62 @@ import React from 'react'; import { Icon } from 'semantic-ui-react'; +export const AccountsIcon = () => ; export const AddIcon = () => ; +export const AddressIcon = () => ; +export const AppsIcon = () => ; +export const AttachFileIcon = () => ; +export const BackgroundIcon = () => ; export const CancelIcon = () => ; -export const DoneIcon = () => ; +export const CheckIcon = () => ; +export const CloseIcon = () => ; +export const CompareIcon = () => ; +export const ComputerIcon = () => ; +export const ContractIcon = () => ; +export const CopyIcon = () => ; +export const DashboardIcon = () => ; +export const DoneIcon = CheckIcon; export const DeleteIcon = () => ; +export const DevelopIcon = () => ; +export const DialIcon = () => ; export const EditIcon = () => ; +export const ErrorIcon = () => ; +export const EthernetIcon = () => ; +export const FileIcon = () => ; export const FileDownloadIcon = () => ; export const FileUploadIcon = () => ; +export const FingerprintIcon = () => ; +export const GasIcon = () => ; +export const GotoIcon = () => ; +export const InfoIcon = () => ; +export const KeyIcon = () => ; +export const KeyboardIcon = () => ; +export const LinkIcon = () => ; +export const ListIcon = () => ; export const LockedIcon = () => ; +export const MembershipIcon = () => ; +export const MoveIcon = () => ; +export const NextIcon = () => ; +export const PauseIcon = () => ; +export const PlayIcon = () => ; +export const PrevIcon = () => ; +export const PrintIcon = () => ; +export const QrIcon = () => ; +export const RefreshIcon = () => ; +export const RemoveIcon = () => ; +export const ReorderIcon = MoveIcon; +export const ReplayIcon = () => ; +export const SaveIcon = () => ; export const SearchIcon = () => ; export const SendIcon = () => ; +export const SettingsIcon = () => ; +export const SnoozeIcon = () => ; +export const SortIcon = () => ; +export const StarIcon = () => ; +export const StatusIcon = () => ; +export const UnlockedIcon = () => ; +export const UpdateIcon = () => ; +export const UpdateWaitIcon = () => ; export const VisibleIcon = () => ; - -export AccountsIcon from 'material-ui/svg-icons/action/account-balance-wallet'; -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'; +export const VerifyIcon = () => ; +export const VpnIcon = () => DashboardIcon; diff --git a/js/src/ui/Portal/portal.css b/js/src/ui/Portal/portal.css index ee01690eb..37b129d82 100644 --- a/js/src/ui/Portal/portal.css +++ b/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; - &, * { - height: 48px !important; - width: 48px !important; + i { + font-size: inherit; } &:hover { diff --git a/js/src/ui/Portal/portal.js b/js/src/ui/Portal/portal.js index 47639dd86..4ae36ccf4 100644 --- a/js/src/ui/Portal/portal.js +++ b/js/src/ui/Portal/portal.js @@ -139,10 +139,12 @@ export default class Portal extends Component { } return ( - + > + +
); } diff --git a/js/src/views/Settings/settings.js b/js/src/views/Settings/settings.js index 01bb82ef0..e9166c3fa 100644 --- a/js/src/views/Settings/settings.js +++ b/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', ); + proxy = this.renderTab(hash, 'proxy', ); } return ( diff --git a/js/src/views/Web/AddressBar/addressBar.js b/js/src/views/Web/AddressBar/addressBar.js index 43cc03f9b..384e5bf53 100644 --- a/js/src/views/Web/AddressBar/addressBar.js +++ b/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 {
);