Add provider menu on clicking network status indicator.

Also simplifies network status icons.

1 files changed, 26 insertions, 6 deletions

diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index e73ecb3f4..5ad5f9351 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -21,14 +21,14 @@ Network.prototype.render = function() {
       title: 'Attempting to connect to blockchain.',
       style: {
         width: '27px',
-        marginRight: '-16px'
+        marginRight: '-27px'
       },
       src: 'images/loading.svg',
     })
-  } else if (networkNumber ==  1) {
+  } else if (parseInt(networkNumber) ==  1) {
     hoverText = 'Main Ethereum Network'
     iconName = 'ethereum-network'
-  }else if (networkNumber ==  2) {
+  }else if (parseInt(networkNumber) ==  2) {
     hoverText = "Morden Test Network"
     iconName = 'morden-test-network'
   }else {
@@ -36,10 +36,30 @@ Network.prototype.render = function() {
     iconName = 'unknown-private-network'
   }
   return (
-    h('#network_component.flex-center', {
-      style: { marginRight: '-16px' },
+    h('#network_component.flex-center.pointer', {
+      style: {
+        marginRight: '-27px',
+        marginLeft: '-3px',
+      },
       title: hoverText,
       onClick:(event) => this.props.onClick(event),
-    },[ h('img.menu-icon',{src: imagePath + iconName + ".jpg"}) ])
+    },[
+        function() {
+          switch (iconName) {
+            case 'ethereum-network':
+              return h('.menu-icon.ether-icon')
+            case 'morden-test-network':
+              return h('.menu-icon.morden-icon')
+            default:
+              return h('i.fa.fa-question-circle.fa-lg', {
+                ariaHidden: true,
+                style: {
+                  margin: '10px',
+                  color: 'rgb(125, 128, 130)',
+                },
+              })
+          }
+        }()
+    ])
   )
 }