diff --git a/ui/app/app.js b/ui/app/app.js index 7041e2d1c..32c9cffb2 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -79,9 +79,10 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch, ownProps) { return { - hideSidebar: () => { dispatch(actions.hideSidebar()) }, - showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) }, - hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) }, + dispatch, + hideSidebar: () => dispatch(actions.hideSidebar()), + showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), + hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), } } diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js index 7a8502d18..b1f4d68ce 100644 --- a/ui/app/components/dropdowns/account-selection-dropdown.js +++ b/ui/app/components/dropdowns/account-selection-dropdown.js @@ -15,7 +15,7 @@ module.exports = AccountSelectionDropdown // TODO: selectedAddress is not defined... should we use selected? AccountSelectionDropdown.prototype.render = function () { const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props - + console.log({style}) return h(AccountDropdowns, { enableAccountOptions: false, enableAccountsSelector: true, diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 1e869251a..be9245c0e 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -101,6 +101,8 @@ class AccountDropdowns extends Component { h('span.account-dropdown-balance', { style: { fontSize: '14px', + fontFamily: 'Avenir', + fontWeight: 500, }, }, formattedBalance), ]), @@ -177,7 +179,13 @@ class AccountDropdowns extends Component { }, ), h('span', { - style: { marginLeft: '20px', fontSize: '18px' }, + style: { + marginLeft: '20px', + fontSize: '18px', + fontFamily: 'DIN OT', + fontSize: '16px', + lineHeight: '23px', + }, onClick: () => { actions.showNewAccountModal() }, @@ -209,6 +217,9 @@ class AccountDropdowns extends Component { marginLeft: '20px', fontSize: '18px', marginBottom: '5px', + fontFamily: 'DIN OT', + fontSize: '16px', + lineHeight: '23px', }, }, 'Import Account'), ] @@ -251,7 +262,10 @@ class AccountDropdowns extends Component { this.props.actions.showAccountDetailModal() }, style: Object.assign( - {}, + { + fontFamily: 'DIN OT', + fontSize: 16, + }, menuItemStyles, ), }, @@ -267,7 +281,10 @@ class AccountDropdowns extends Component { global.platform.openWindow({ url }) }, style: Object.assign( - {}, + { + fontFamily: 'DIN OT', + fontSize: 16, + }, menuItemStyles, ), }, @@ -283,7 +300,10 @@ class AccountDropdowns extends Component { copyToClipboard(checkSumAddress) }, style: Object.assign( - {}, + { + fontFamily: 'DIN OT', + fontSize: 16, + }, menuItemStyles, ), }, @@ -297,7 +317,10 @@ class AccountDropdowns extends Component { actions.requestAccountExport() }, style: Object.assign( - {}, + { + fontFamily: 'DIN OT', + fontSize: 16, + }, menuItemStyles, ), }, @@ -311,7 +334,10 @@ class AccountDropdowns extends Component { actions.showAddTokenPage() }, style: Object.assign( - {}, + { + fontFamily: 'DIN OT', + fontSize: 16, + }, menuItemStyles, ), }, diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 0c002b2f0..3f4ea6274 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -22,8 +22,7 @@ function mapDispatchToProps (dispatch) { setProviderType: (type) => { dispatch(actions.setProviderType(type)) }, - setDefaultRpcTarget: () => { - // TODO: type is not defined. Is it needed? + setDefaultRpcTarget: type => { dispatch(actions.setDefaultRpcTarget(type)) }, setRpcTarget: (target) => { @@ -51,6 +50,11 @@ NetworkDropdown.prototype.render = function () { const { provider: { type: providerType, rpcTarget: activeNetwork } } = props const rpcList = props.frequentRpcList const isOpen = this.props.networkDropdownOpen + const dropdownMenuItemStyle = { + fontFamily: 'DIN OT', + fontSize: '16px', + lineHeight: '20px', + }; return h(Dropdown, { useCssTransition: true, @@ -73,9 +77,10 @@ NetworkDropdown.prototype.render = function () { position: 'absolute', right: '2px', top: '38px', + minWidth: '309px', }, innerStyle: { - padding: '2px 16px 2px 0px', + padding: '10px 8px', }, }, [ @@ -85,14 +90,16 @@ NetworkDropdown.prototype.render = function () { key: 'main', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('mainnet'), - style: { - fontSize: '18px', - }, + style: dropdownMenuItemStyle, }, [ + providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.diamond'), - 'Main Ethereum Network', - providerType === 'mainnet' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b' + }, + }, 'Main Ethereum Network'), ] ), @@ -102,14 +109,16 @@ NetworkDropdown.prototype.render = function () { key: 'ropsten', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('ropsten'), - style: { - fontSize: '18px', - }, + style: dropdownMenuItemStyle, }, [ + providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.red-dot'), - 'Ropsten Test Network', - providerType === 'ropsten' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b' + }, + }, 'Ropsten Test Network'), ] ), @@ -119,14 +128,16 @@ NetworkDropdown.prototype.render = function () { key: 'kovan', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('kovan'), - style: { - fontSize: '18px', - }, + style: dropdownMenuItemStyle, }, [ + providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.hollow-diamond'), - 'Kovan Test Network', - providerType === 'kovan' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b' + }, + }, 'Kovan Test Network'), ] ), @@ -136,14 +147,22 @@ NetworkDropdown.prototype.render = function () { key: 'rinkeby', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('rinkeby'), +<<<<<<< HEAD style: { fontSize: '18px', }, +======= + style: dropdownMenuItemStyle, +>>>>>>> Fix menu style }, [ + providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.golden-square'), - 'Rinkeby Test Network', - providerType === 'rinkeby' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b' + }, + }, 'Rinkeby Test Network'), ] ), @@ -153,14 +172,16 @@ NetworkDropdown.prototype.render = function () { key: 'default', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setDefaultRpcTarget(), - style: { - fontSize: '18px', - }, + style: dropdownMenuItemStyle, }, [ + activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('i.fa.fa-question-circle.fa-lg.menu-icon'), - 'Localhost 8545', - activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b' + }, + }, 'Localhost 8545'), ] ), @@ -172,14 +193,16 @@ NetworkDropdown.prototype.render = function () { { closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => this.props.showConfigPage(), - style: { - fontSize: '18px', - }, + style: dropdownMenuItemStyle, }, [ + activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'), h('i.fa.fa-question-circle.fa-lg.menu-icon'), - 'Custom RPC', - activeNetwork === 'custom' ? h('.check', '✓') : null, + h('span.network-name', { + style: { + color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b' + }, + }, 'Custom RPC'), ] ), diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 6f9269389..48971a29e 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -90,7 +90,7 @@ WalletView.prototype.render = function () { top: '14px', }, innerStyle: { - padding: '2px 16px', + padding: '10px 16px', }, useCssTransition: true, selected: selectedAddress, diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index e409f759c..715f41dc9 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -1,10 +1,16 @@ +.account-dropdown-name { + font-family: 'DIN OT'; +} + .account-dropdown-balance { color: $dusty-gray; + line-height: 19px; } .account-dropdown-edit-button { color: $dusty-gray; - + font-family: "DIN OT"; + font-weight: 500; &:hover { color: $white; } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index a067cecd5..f242102af 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -12,3 +12,19 @@ font-size: 10px; flex: 1 0 auto; } + +.network-name { + font-weight: 100; + flex: 1 0 auto; + color: $dusty-gray; +} + +.network-check, +.network-check__transparent { + color: $white; + margin-left: 7px; +} + +.network-check__transparent { + opacity: 0; +}