Update font weights to 300, remove animation from network dropdown, fix network dropdown not closing from certain click-areas

ui/app/components/dropdowns/network-dropdown.js

@@ -6,6 +6,16 @@ const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
+const R = require('ramda')
+
+// classes from nodes of the toggle element.
+const notToggleElementClassnames = [
+  'menu-icon',
+  'network-name',
+  'network-indicator',
+  'network-caret',
+  'network-component',
+]
 
 function mapStateToProps (state) {
   return {
@@ -32,8 +42,8 @@ function mapDispatchToProps (dispatch) {
     showConfigPage: () => {
       dispatch(actions.showConfigPage())
     },
-    showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) },
-    hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) },
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
   }
 }
 
@@ -59,18 +69,13 @@ NetworkDropdown.prototype.render = function () {
   }
 
   return h(Dropdown, {
-    useCssTransition: true,
     isOpen,
     onClickOutside: (event) => {
       const { classList } = event.target
-      const isNotToggleElement = [
-        classList.contains('menu-icon'),
-        classList.contains('network-name'),
-        classList.contains('network-indicator'),
-      ].filter(bool => bool).length === 0
-      // classes from three constituent nodes of the toggle element
+      const isInClassList = className => classList.contains(className)
+      const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
 
-      if (isNotToggleElement) {
+      if (notToggleElementIndex === -1) {
         this.props.hideNetworkDropdown()
       }
     },

ui/app/components/network.js

@@ -39,7 +39,7 @@ Network.prototype.render = function () {
         },
         src: 'images/loading.svg',
       }),
-      h('i.fa.fa-caret-down'),
+      h('i.fa.fa-caret-down.network-caret'),
     ])
   } else if (providerName === 'mainnet') {
     hoverText = 'Main Ethereum Network'
@@ -63,7 +63,7 @@ Network.prototype.render = function () {
 
   return (
     h('div.network-component.pointer', {
-      className: classnames('network-component pointer', {
+      className: classnames({
         'network-component--disabled': this.props.disabled,
         'ethereum-network': providerName === 'mainnet',
         'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
@@ -90,7 +90,7 @@ Network.prototype.render = function () {
                   color: '#039396',
                 }},
               'Main Network'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('i.fa.fa-caret-down.fa-lg.network-caret'),
             ])
           case 'ropsten-test-network':
             return h('.network-indicator', [
@@ -103,7 +103,7 @@ Network.prototype.render = function () {
                   color: '#ff6666',
                 }},
               'Ropsten Test Net'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('i.fa.fa-caret-down.fa-lg.network-caret'),
             ])
           case 'kovan-test-network':
             return h('.network-indicator', [
@@ -116,7 +116,7 @@ Network.prototype.render = function () {
                   color: '#690496',
                 }},
               'Kovan Test Net'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('i.fa.fa-caret-down.fa-lg.network-caret'),
             ])
           case 'rinkeby-test-network':
             return h('.network-indicator', [
@@ -129,7 +129,7 @@ Network.prototype.render = function () {
                   color: '#e7a218',
                 }},
               'Rinkeby Test Net'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('i.fa.fa-caret-down.fa-lg.network-caret'),
             ])
           default:
             return h('.network-indicator', [
@@ -145,7 +145,7 @@ Network.prototype.render = function () {
                   color: '#AEAEAE',
                 }},
               'Private Network'),
-              h('i.fa.fa-caret-down.fa-lg'),
+              h('i.fa.fa-caret-down.fa-lg.network-caret'),
             ])
         }
       })(),

ui/app/css/itcss/components/account-menu.scss

@@ -40,7 +40,7 @@
     font-size: 12px;
     line-height: 23px;
     padding: 0 24px;
-    font-weight: 200;
+    font-weight: 300;
   }
 
   img {
@@ -113,7 +113,7 @@
   &__name {
     color: $white;
     font-size: 18px;
-    font-weight: 200;
+    font-weight: 300;
     line-height: 16px;
   }
 
@@ -126,7 +126,7 @@
   &__action {
     font-size: 16px;
     line-height: 18px;
-    font-weight: 200;
+    font-weight: 300;
     cursor: pointer;
   }
 }

ui/app/css/itcss/components/menu.scss

@@ -12,7 +12,7 @@
     align-items: center;
     position: relative;
     z-index: 200;
-    font-weight: 200;
+    font-weight: 300;
 
     @media screen and (max-width: 575px) {
       padding: 14px;

ui/app/css/itcss/components/newui-sections.scss

@@ -248,7 +248,7 @@ $wallet-view-bg: $wild-sand;
 // wallet view
 .account-name {
   font-size: 24px;
-  font-weight: 200;
+  font-weight: 300;
   line-height: 20px;
   color: $scorpion;
   margin-top: 8px;