Modify network icons to reflect current design. (#355)

* Modify network icons to reflect current design.

* Switch icons around.

3 files changed, 13 insertions, 16 deletions

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