From e4956c3123a23cf4bddaf2617e36456735fddced Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Tue, 28 Jun 2016 16:15:26 -0700
Subject: [PATCH] Modify network icons to reflect current design. (#355)

* Modify network icons to reflect current design.

* Switch icons around.
---
 CHANGELOG.md                 |  1 +
 ui/app/app.js                |  4 ++--
 ui/app/components/network.js |  4 ++--
 ui/app/css/lib.css           | 21 +++++++++------------
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c12ea6726..93a455248 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Fix formatting on terms & conditions page.
 - Now enforce 30 character limit on wallet names.
 - Fix out-of-place positioning of pending transaction badges on wallet list.
+- Change network status icons to reflect current design.
 
 ## 2.4.4 2016-06-23
 
diff --git a/ui/app/app.js b/ui/app/app.js
index 80521d220..8aab63a6a 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -212,14 +212,14 @@ App.prototype.renderNetworkDropdown = function () {
       label: 'Main Ethereum Network',
       closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
       action: () => props.dispatch(actions.setProviderType('mainnet')),
-      icon: h('.menu-icon.ether-icon'),
+      icon: h('.menu-icon.diamond'),
     }),
 
     h(DropMenuItem, {
       label: 'Morden Test Network',
       closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
       action: () => props.dispatch(actions.setProviderType('testnet')),
-      icon: h('.menu-icon.morden-icon'),
+      icon: h('.menu-icon.red-dot'),
     }),
 
     h(DropMenuItem, {
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 771be5f32..9f7287371 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -47,9 +47,9 @@ Network.prototype.render = function () {
       (function () {
         switch (iconName) {
           case 'ethereum-network':
-            return h('.menu-icon.ether-icon')
+            return h('.menu-icon.diamond')
           case 'morden-test-network':
-            return h('.menu-icon.morden-icon')
+            return h('.menu-icon.red-dot')
           default:
             return h('i.fa.fa-question-circle.fa-lg', {
               ariaHidden: true,
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 425f41b20..a7da11e77 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -168,17 +168,14 @@ hr.horizontal-line {
 }
 
 .red-dot {
-  position: inherit;
-  background: red;
+  background: #E91550;
   color: white;
   border-radius: 10px;
-  height: 12px;
-  min-width: 12px;
-  margin-left: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
+}
+
+.diamond {
+  transform: rotate(45deg);
+  background: #038789;
 }
 
 .pending-dot {
@@ -203,8 +200,8 @@ hr.horizontal-line {
 
 .menu-icon {
   display: inline-block;
-  width: 14px;
-  height: 14px;
+  height: 9px;
+  min-width: 9px;
   margin: 13px;
 }
 .ether-icon {
@@ -222,4 +219,4 @@ hr.horizontal-line {
 
 .invisible {
   visibility: hidden;
-}
\ No newline at end of file
+}