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

* Modify network icons to reflect current design.

* Switch icons around.

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
 

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, {

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,

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