From 6a3c59e409cf4467ca2c59a0303f2df85ffde73f Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 20:07:48 -0230 Subject: [PATCH] Highlighted circle icons for the network menu. --- .../components/network-dropdown-icon.js | 32 +++++++++++++++++ .../components/dropdowns/network-dropdown.js | 35 +++++++++++++++---- ui/app/components/network.js | 21 ++++++++--- ui/app/css/itcss/components/network.scss | 17 +++++++++ ui/app/css/itcss/settings/variables.scss | 4 +++ 5 files changed, 99 insertions(+), 10 deletions(-) create mode 100644 ui/app/components/dropdowns/components/network-dropdown-icon.js diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/dropdowns/components/network-dropdown-icon.js new file mode 100644 index 000000000..01cb95215 --- /dev/null +++ b/ui/app/components/dropdowns/components/network-dropdown-icon.js @@ -0,0 +1,32 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') + + +inherits(NetworkDropdownIcon, Component) +module.exports = NetworkDropdownIcon + +function NetworkDropdownIcon () { + Component.call(this) +} + +NetworkDropdownIcon.prototype.render = function () { + const { + backgroundColor, + isSelected, + innerBorder, + nonSelectBackgroundColor + } = this.props + + return h('.menu-icon-circle-select', { + style: { + border: isSelected && '1px solid white', + background: isSelected ? 'rgba(100, 100, 100, 0.4)' : 'none', + }, + }, h('.menu-icon-circle', { + style: { + background: isSelected ? backgroundColor : nonSelectBackgroundColor, + border: innerBorder ? innerBorder : 'none', + }, + })) +} 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', diff --git a/ui/app/components/network.js b/ui/app/components/network.js index ba1d0ea11..9133c78e3 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -1,6 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') module.exports = Network @@ -68,7 +69,10 @@ Network.prototype.render = 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', @@ -77,7 +81,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', @@ -86,7 +93,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', @@ -95,7 +105,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', diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 8beef5e72..adc8e4662 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -43,3 +43,20 @@ .network-check__transparent { opacity: 0; } + +.menu-icon-circle { + height: 17px; + width: 17px; + border-radius: 17px; +} + +.menu-icon-circle-select { + height: 23px; + width: 23px; + margin: 9px; + background: none; + border-radius: 22px; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index e4c83def8..93156de9c 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -31,6 +31,10 @@ $tundora: #4d4d4d; $nile-blue: #1b344d; $scorpion: #5d5d5d; $silver: #cdcdcd; +$crimson: #e91550; +$blue-lagoon: #038789; +$purple: #690496; +$tulip-tree: #ebb33f; /* Z-Indicies