Highlighted circle icons for the network menu.

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',
+    },
+  }))
+}

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

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

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;
+}

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