Cleaner css for circle icon.

3 files changed, 28 insertions, 24 deletions

diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/dropdowns/components/network-dropdown-icon.js
index 01cb95215..7e94e0af5 100644
--- a/ui/app/components/dropdowns/components/network-dropdown-icon.js
+++ b/ui/app/components/dropdowns/components/network-dropdown-icon.js
@@ -14,19 +14,15 @@ NetworkDropdownIcon.prototype.render = function () {
   const {
     backgroundColor,
     isSelected,
-    innerBorder,
-    nonSelectBackgroundColor
+    innerBorder = 'none',
   } = this.props
 
-  return h('.menu-icon-circle-select', {
-    style: {
-      border: isSelected && '1px solid white',
-      background: isSelected ? 'rgba(100, 100, 100, 0.4)' : 'none',
-    },
-  }, h('.menu-icon-circle', {
-    style: {
-      background: isSelected ? backgroundColor : nonSelectBackgroundColor,
-      border: innerBorder ? innerBorder : 'none',
-    },
-  }))
+  return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
+    h('div', {
+      style: {
+        background: backgroundColor,
+        border: innerBorder,
+      },
+    })
+  )
 }
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 1b6bd2385..4c578fbeb 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -108,7 +108,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#038789', // $blue-lagoon
-          nonSelectBackgroundColor: '#15afb2',
           isSelected: providerType === 'mainnet',
         }),
         h('span.network-name-item', {
@@ -131,7 +130,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#e91550', // $crimson
-          nonSelectBackgroundColor: '#ec2c50',
           isSelected: providerType === 'ropsten',
         }),
         h('span.network-name-item', {
@@ -154,7 +152,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#690496', // $purple
-          nonSelectBackgroundColor: '#b039f3',
           isSelected: providerType === 'kovan',
         }),
         h('span.network-name-item', {
@@ -177,7 +174,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#ebb33f', // $tulip-tree
-          nonSelectBackgroundColor: '#ecb23e',
           isSelected: providerType === 'rinkeby',
         }),
         h('span.network-name-item', {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 6661bf9b2..5b9e8bfb1 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -44,13 +44,7 @@
   opacity: 0;
 }
 
-.menu-icon-circle {
-  height: 17px;
-  width: 17px;
-  border-radius: 17px;
-}
-
-.menu-icon-circle-select {
+.menu-icon-circle, .menu-icon-circle--active {
   height: 23px;
   width: 23px;
   margin: 9px;
@@ -59,6 +53,24 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  border: none;
+  background: none;
+}
+
+.menu-icon-circle--active {
+  border: 1px solid white;
+  background: rgba(100, 100, 100, 0.4);
+}
+
+.menu-icon-circle div, .menu-icon-circle--active div {
+  height: 17px;
+  width: 17px;
+  border-radius: 17px;
+  opacity: 0.7;
+}
+
+.menu-icon-circle--active div {
+  opacity: 1;
 }
 
 .network-dropdown-header {