Highlighted circle icons for the network menu.

2 files changed, 61 insertions, 6 deletions

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',