Add network name to indicator and some css fixes

-also fix custom net work bug in drop down where it
thinks local:8545 is custom.

4 files changed, 51 insertions, 11 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 034e062e6..5846cb11e 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -139,7 +139,7 @@ App.prototype.renderAppBar = function () {
         h('h1', {
           style: {
             position: 'relative',
-            left: '3px',
+            left: '9px',
           },
         }, 'MetaMask'),
 
diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js
index a31c9c7c4..00bb16868 100644
--- a/ui/app/components/drop-menu-item.js
+++ b/ui/app/components/drop-menu-item.js
@@ -41,7 +41,8 @@ DropMenuItem.prototype.activeNetworkRender = function () {
       if (activeNetwork === '2') return h('.check', '	✓')
       break
     case 'Localhost 8545':
-      if (activeNetwork > '2') return h('.check', '	✓')
+      debugger
+      if (activeNetwork === 'http://localhost:8545') return h('.check', '	✓')
       break
     default:
       if (activeNetwork === 'custom') return h('.check', '	✓')
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 9f7287371..25488f6b7 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -47,17 +47,39 @@ Network.prototype.render = function () {
       (function () {
         switch (iconName) {
           case 'ethereum-network':
-            return h('.menu-icon.diamond')
+            return h('.network-indicator',[
+                h('.menu-icon.diamond'),
+                h('.network-name',{
+                  style: {
+                    color: '#039396',
+                  }},
+                'Etherum Main Net')
+              ])
           case 'morden-test-network':
-            return h('.menu-icon.red-dot')
+            return h('.network-indicator',[
+                h('.menu-icon.red-dot'),
+                h('.network-name',{
+                  style: {
+                    color: '#ff6666',
+                  }},
+                'Morden Test Net')
+              ])
           default:
-            return h('i.fa.fa-question-circle.fa-lg', {
-              ariaHidden: true,
-              style: {
-                margin: '10px',
-                color: 'rgb(125, 128, 130)',
-              },
-            })
+            return h('.network-indicator',[
+              h('i.fa.fa-question-circle.fa-lg', {
+                ariaHidden: true,
+                style: {
+                  margin: '10px',
+                  color: 'rgb(125, 128, 130)',
+                },
+              }),
+
+              h('.network-name',{
+                style: {
+                  color: '#AEAEAE',
+                }},
+              'Private Network'),
+            ])
         }
       })(),
     ])
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index d46c859ad..fc10e56b6 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -141,6 +141,23 @@ textarea.twelve-word-phrase {
   resize: none;
 }
 
+.network-indicator {
+  display: flex;
+  align-items: center;
+  font-size: 0.6em;
+
+}
+
+.network-name {
+  position: absolute;
+  top: 8px;
+  width: 5.2em;
+  line-height: 9px;
+}
+
+.check {
+  color: #F7861C;
+}
 /*
 app sections
 */