Change styling for network dropdown

2 files changed, 25 insertions, 58 deletions

diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 5a8d0763d..3f147159b 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -39,7 +39,6 @@ Network.prototype.render = function () {
         },
         src: 'images/loading.svg',
       }),
-      h('i.fa.fa-caret-down.network-caret'),
     ])
   } else if (providerName === 'mainnet') {
     hoverText = 'Main Ethereum Network'
@@ -85,12 +84,8 @@ Network.prototype.render = function () {
                 backgroundColor: '#038789', // $blue-lagoon
                 nonSelectBackgroundColor: '#15afb2',
               }),
-              h('.network-name', {
-                style: {
-                  color: '#039396',
-                }},
-              'Main Network'),
-              h('i.fa.fa-caret-down.fa-lg.network-caret'),
+              h('.network-name', 'Main Network'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'ropsten-test-network':
             return h('.network-indicator', [
@@ -98,12 +93,8 @@ Network.prototype.render = function () {
                 backgroundColor: '#e91550', // $crimson
                 nonSelectBackgroundColor: '#ec2c50',
               }),
-              h('.network-name', {
-                style: {
-                  color: '#ff6666',
-                }},
-              'Ropsten Test Net'),
-              h('i.fa.fa-caret-down.fa-lg.network-caret'),
+              h('.network-name', 'Ropsten Test Net'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'kovan-test-network':
             return h('.network-indicator', [
@@ -111,12 +102,8 @@ Network.prototype.render = function () {
                 backgroundColor: '#690496', // $purple
                 nonSelectBackgroundColor: '#b039f3',
               }),
-              h('.network-name', {
-                style: {
-                  color: '#690496',
-                }},
-              'Kovan Test Net'),
-              h('i.fa.fa-caret-down.fa-lg.network-caret'),
+              h('.network-name', 'Kovan Test Net'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'rinkeby-test-network':
             return h('.network-indicator', [
@@ -124,12 +111,8 @@ Network.prototype.render = function () {
                 backgroundColor: '#ebb33f', // $tulip-tree
                 nonSelectBackgroundColor: '#ecb23e',
               }),
-              h('.network-name', {
-                style: {
-                  color: '#e7a218',
-                }},
-              'Rinkeby Test Net'),
-              h('i.fa.fa-caret-down.fa-lg.network-caret'),
+              h('.network-name', 'Rinkeby Test Net'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           default:
             return h('.network-indicator', [
@@ -140,12 +123,8 @@ Network.prototype.render = function () {
                 },
               }),
 
-              h('.network-name', {
-                style: {
-                  color: '#AEAEAE',
-                }},
-              'Private Network'),
-              h('i.fa.fa-caret-down.fa-lg.network-caret'),
+              h('.network-name', 'Private Network'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
         }
       })(),
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 98dbdffb2..d9a39b8d5 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -8,41 +8,25 @@
 }
 
 .network-component.pointer {
-  border: 1px solid $shark;
+  border: 2px solid $silver;
   border-radius: 82px;
-  padding: 6px;
+  padding: 3px;
   flex: 0 0 auto;
 
-  &.ethereum-network {
-    border-color: rgb(3, 135, 137);
-
-    .menu-icon-circle div {
-      background-color: rgba(3, 135, 137, .7) !important;
-    }
+  &.ethereum-network .menu-icon-circle div {
+    background-color: rgba(3, 135, 137, .7) !important;
   }
 
-  &.ropsten-test-network {
-    border-color: rgb(233, 21, 80);
-
-    .menu-icon-circle div {
-      background-color: rgba(233, 21, 80, .7) !important;
-    }
+  &.ropsten-test-network .menu-icon-circle div {
+    background-color: rgba(233, 21, 80, .7) !important;
   }
 
-  &.kovan-test-network {
-    border-color: rgb(105, 4, 150);
-
-    .menu-icon-circle div {
-      background-color: rgba(105, 4, 150, .7) !important;
-    }
+  &.kovan-test-network .menu-icon-circle div {
+    background-color: rgba(105, 4, 150, .7) !important;
   }
 
-  &.rinkeby-test-network {
-    border-color: rgb(235, 179, 63);
-
-    .menu-icon-circle div {
-      background-color: rgba(235, 179, 63, .7) !important;
-    }
+  &.rinkeby-test-network .menu-icon-circle div {
+    background-color: rgba(235, 179, 63, .7) !important;
   }
 }
 
@@ -66,11 +50,12 @@
 }
 
 .network-name {
-  line-height: 15px;
   padding: 0 4px;
   font-family: Roboto;
   font-size: 12px;
   flex: 1 0 auto;
+  color: $tundora;
+  font-weight: 500;
 }
 
 .network-droppo {
@@ -167,3 +152,6 @@
   line-height: 18px;
 }
 
+.network-caret {
+  margin: 0 8px 2px;
+}