1 files changed, 50 insertions, 45 deletions

diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 0dbe37cdd..f3df2242a 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -1,6 +1,9 @@
 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')
+const t = require('../../i18n')
 
 module.exports = Network
 
@@ -22,7 +25,7 @@ Network.prototype.render = function () {
   let iconName, hoverText
 
   if (networkNumber === 'loading') {
-    return h('span.pointer', {
+    return h('span.pointer.network-indicator', {
       style: {
         display: 'flex',
         alignItems: 'center',
@@ -31,80 +34,86 @@ Network.prototype.render = function () {
       onClick: (event) => this.props.onClick(event),
     }, [
       h('img', {
-        title: 'Attempting to connect to blockchain.',
+        title: t('attemptingConnect'),
         style: {
           width: '27px',
         },
         src: 'images/loading.svg',
       }),
-      h('i.fa.fa-caret-down'),
     ])
   } else if (providerName === 'mainnet') {
-    hoverText = 'Main Ethereum Network'
+    hoverText = t('mainnet')
     iconName = 'ethereum-network'
   } else if (providerName === 'ropsten') {
-    hoverText = 'Ropsten Test Network'
+    hoverText = t('ropsten')
     iconName = 'ropsten-test-network'
   } else if (parseInt(networkNumber) === 3) {
-    hoverText = 'Ropsten Test Network'
+    hoverText = t('ropsten')
     iconName = 'ropsten-test-network'
   } else if (providerName === 'kovan') {
-    hoverText = 'Kovan Test Network'
+    hoverText = t('kovan')
     iconName = 'kovan-test-network'
   } else if (providerName === 'rinkeby') {
-    hoverText = 'Rinkeby Test Network'
+    hoverText = t('rinkeby')
     iconName = 'rinkeby-test-network'
   } else {
-    hoverText = 'Unknown Private Network'
+    hoverText = t('unknownNetwork')
     iconName = 'unknown-private-network'
   }
 
   return (
-    h('#network_component.pointer', {
+    h('div.network-component.pointer', {
+      className: classnames({
+        '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('.network-name', {
-                style: {
-                  color: '#039396',
-                }},
-              'Main Network'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#038789', // $blue-lagoon
+                nonSelectBackgroundColor: '#15afb2',
+              }),
+              h('.network-name', t('mainnet')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'ropsten-test-network':
             return h('.network-indicator', [
-              h('.menu-icon.red-dot'),
-              h('.network-name', {
-                style: {
-                  color: '#ff6666',
-                }},
-              'Ropsten Test Net'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#e91550', // $crimson
+                nonSelectBackgroundColor: '#ec2c50',
+              }),
+              h('.network-name', t('ropsten')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'kovan-test-network':
             return h('.network-indicator', [
-              h('.menu-icon.hollow-diamond'),
-              h('.network-name', {
-                style: {
-                  color: '#690496',
-                }},
-              'Kovan Test Net'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#690496', // $purple
+                nonSelectBackgroundColor: '#b039f3',
+              }),
+              h('.network-name', t('kovan')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'rinkeby-test-network':
             return h('.network-indicator', [
-              h('.menu-icon.golden-square'),
-              h('.network-name', {
-                style: {
-                  color: '#e7a218',
-                }},
-              'Rinkeby Test Net'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#ebb33f', // $tulip-tree
+                nonSelectBackgroundColor: '#ecb23e',
+              }),
+              h('.network-name', t('rinkeby')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           default:
             return h('.network-indicator', [
@@ -115,12 +124,8 @@ Network.prototype.render = function () {
                 },
               }),
 
-              h('.network-name', {
-                style: {
-                  color: '#AEAEAE',
-                }},
-              'Private Network'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('.network-name', t('privateNetwork')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
         }
       })(),