diff options
Diffstat (limited to 'ui/app/components/network.js')
-rw-r--r-- | ui/app/components/network.js | 37 |
1 files changed, 31 insertions, 6 deletions
diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 0dbe37cdd..229d02e36 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -1,6 +1,8 @@ const Component = require('react').Component const h = require('react-hyperscript') +const classnames = require('classnames'); const inherits = require('util').inherits +const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') module.exports = Network @@ -60,15 +62,29 @@ Network.prototype.render = function () { } return ( - h('#network_component.pointer', { + h('div.network-component.pointer', { + className: classnames('network-component pointer', { + 'network-component--disabled': this.props.disabled, + 'ethereum-network': providerName === 'mainnet', + 'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3, + 'kovan-test-network': providerName === 'kovan', + 'rinkeby-test-network': providerName === 'rinkeby', + }), title: hoverText, - onClick: (event) => this.props.onClick(event), + onClick: (event) => { + if (!this.props.disabled) { + this.props.onClick(event) + } + }, }, [ (function () { switch (iconName) { case 'ethereum-network': return h('.network-indicator', [ - h('.menu-icon.diamond'), + h(NetworkDropdownIcon, { + backgroundColor: '#038789', // $blue-lagoon + nonSelectBackgroundColor: '#15afb2', + }), h('.network-name', { style: { color: '#039396', @@ -78,7 +94,10 @@ Network.prototype.render = function () { ]) case 'ropsten-test-network': return h('.network-indicator', [ - h('.menu-icon.red-dot'), + h(NetworkDropdownIcon, { + backgroundColor: '#e91550', // $crimson + nonSelectBackgroundColor: '#ec2c50', + }), h('.network-name', { style: { color: '#ff6666', @@ -88,7 +107,10 @@ Network.prototype.render = function () { ]) case 'kovan-test-network': return h('.network-indicator', [ - h('.menu-icon.hollow-diamond'), + h(NetworkDropdownIcon, { + backgroundColor: '#690496', // $purple + nonSelectBackgroundColor: '#b039f3', + }), h('.network-name', { style: { color: '#690496', @@ -98,7 +120,10 @@ Network.prototype.render = function () { ]) case 'rinkeby-test-network': return h('.network-indicator', [ - h('.menu-icon.golden-square'), + h(NetworkDropdownIcon, { + backgroundColor: '#ebb33f', // $tulip-tree + nonSelectBackgroundColor: '#ecb23e', + }), h('.network-name', { style: { color: '#e7a218', |