diff options
author | Dan <danjm.com@gmail.com> | 2017-09-07 06:37:48 +0800 |
---|---|---|
committer | Chi Kei Chan <chikeichan@gmail.com> | 2017-09-12 10:16:43 +0800 |
commit | 6a3c59e409cf4467ca2c59a0303f2df85ffde73f (patch) | |
tree | bcc28a8afdbe6e0cbc9fa5f6ac2a8b17cd0a4fc1 /ui/app/components/dropdowns/network-dropdown.js | |
parent | 663cb758b345d7138b9e9c68489e1859dbfaa78e (diff) | |
download | tangerine-wallet-browser-6a3c59e409cf4467ca2c59a0303f2df85ffde73f.tar.gz tangerine-wallet-browser-6a3c59e409cf4467ca2c59a0303f2df85ffde73f.tar.zst tangerine-wallet-browser-6a3c59e409cf4467ca2c59a0303f2df85ffde73f.zip |
Highlighted circle icons for the network menu.
Diffstat (limited to 'ui/app/components/dropdowns/network-dropdown.js')
-rw-r--r-- | ui/app/components/dropdowns/network-dropdown.js | 35 |
1 files changed, 29 insertions, 6 deletions
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index fa0bb899e..f1c6f8221 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -5,6 +5,7 @@ const connect = require('react-redux').connect const actions = require('../../actions') const Dropdown = require('./components/dropdown').Dropdown const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem +const NetworkDropdownIcon = require('./components/network-dropdown-icon') function mapStateToProps (state) { return { @@ -94,7 +95,11 @@ NetworkDropdown.prototype.render = function () { }, [ providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), - h('.menu-icon.diamond'), + h(NetworkDropdownIcon, { + backgroundColor: '#038789', // $blue-lagoon + nonSelectBackgroundColor: '#15afb2', + isSelected: providerType === 'mainnet', + }), h('span.network-name-item', { style: { color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', @@ -113,7 +118,11 @@ NetworkDropdown.prototype.render = function () { }, [ providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), - h('.menu-icon.red-dot'), + h(NetworkDropdownIcon, { + backgroundColor: '#e91550', // $crimson + nonSelectBackgroundColor: '#ec2c50', + isSelected: providerType === 'ropsten', + }), h('span.network-name-item', { style: { color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', @@ -132,7 +141,11 @@ NetworkDropdown.prototype.render = function () { }, [ providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), - h('.menu-icon.hollow-diamond'), + h(NetworkDropdownIcon, { + backgroundColor: '#690496', // $purple + nonSelectBackgroundColor: '#b039f3', + isSelected: providerType === 'kovan', + }), h('span.network-name-item', { style: { color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b', @@ -151,7 +164,11 @@ NetworkDropdown.prototype.render = function () { }, [ providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), - h('.menu-icon.golden-square'), + h(NetworkDropdownIcon, { + backgroundColor: '#ebb33f', // $tulip-tree + nonSelectBackgroundColor: '#ecb23e', + isSelected: providerType === 'rinkeby', + }), h('span.network-name-item', { style: { color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', @@ -170,7 +187,10 @@ NetworkDropdown.prototype.render = function () { }, [ activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), - h('i.fa.fa-question-circle.fa-lg.menu-icon'), + h(NetworkDropdownIcon, { + isSelected: activeNetwork === 'http://localhost:8545', + innerBorder: '1px solid #9b9b9b', + }), h('span.network-name-item', { style: { color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b', @@ -191,7 +211,10 @@ NetworkDropdown.prototype.render = function () { }, [ activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'), - h('i.fa.fa-question-circle.fa-lg.menu-icon'), + h(NetworkDropdownIcon, { + isSelected: activeNetwork === 'custom', + innerBorder: '1px solid #9b9b9b', + }), h('span.network-name-item', { style: { color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b', |