Fix menu style

7 files changed, 114 insertions, 42 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 7041e2d1c..32c9cffb2 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -79,9 +79,10 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch, ownProps) {
   return {
-    hideSidebar: () => { dispatch(actions.hideSidebar()) },
-    showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) },
-    hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) },
+    dispatch,
+    hideSidebar: () => dispatch(actions.hideSidebar()),
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
   }
 }
 
diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js
index 7a8502d18..b1f4d68ce 100644
--- a/ui/app/components/dropdowns/account-selection-dropdown.js
+++ b/ui/app/components/dropdowns/account-selection-dropdown.js
@@ -15,7 +15,7 @@ module.exports = AccountSelectionDropdown
 // TODO: selectedAddress is not defined... should we use selected?
 AccountSelectionDropdown.prototype.render = function () {
   const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
-
+  console.log({style})
   return h(AccountDropdowns, {
     enableAccountOptions: false,
     enableAccountsSelector: true,
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 1e869251a..be9245c0e 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -101,6 +101,8 @@ class AccountDropdowns extends Component {
               h('span.account-dropdown-balance', {
                 style: {
                   fontSize: '14px',
+                  fontFamily: 'Avenir',
+                  fontWeight: 500,
                 },
               }, formattedBalance),
             ]),
@@ -177,7 +179,13 @@ class AccountDropdowns extends Component {
               },
             ),
             h('span', {
-              style: { marginLeft: '20px', fontSize: '18px' },
+              style: {
+                marginLeft: '20px',
+                fontSize: '18px',
+                fontFamily: 'DIN OT',
+                fontSize: '16px',
+                lineHeight: '23px',
+              },
               onClick: () => {
                 actions.showNewAccountModal()
               },
@@ -209,6 +217,9 @@ class AccountDropdowns extends Component {
                 marginLeft: '20px',
                 fontSize: '18px',
                 marginBottom: '5px',
+                fontFamily: 'DIN OT',
+                fontSize: '16px',
+                lineHeight: '23px',
               },
             }, 'Import Account'),
           ]
@@ -251,7 +262,10 @@ class AccountDropdowns extends Component {
               this.props.actions.showAccountDetailModal()
             },
             style: Object.assign(
-              {},
+              {
+                fontFamily: 'DIN OT',
+                fontSize: 16,
+              },
               menuItemStyles,
             ),
           },
@@ -267,7 +281,10 @@ class AccountDropdowns extends Component {
               global.platform.openWindow({ url })
             },
             style: Object.assign(
-              {},
+              {
+                fontFamily: 'DIN OT',
+                fontSize: 16,
+              },
               menuItemStyles,
             ),
           },
@@ -283,7 +300,10 @@ class AccountDropdowns extends Component {
               copyToClipboard(checkSumAddress)
             },
             style: Object.assign(
-              {},
+              {
+                fontFamily: 'DIN OT',
+                fontSize: 16,
+              },
               menuItemStyles,
             ),
           },
@@ -297,7 +317,10 @@ class AccountDropdowns extends Component {
               actions.requestAccountExport()
             },
             style: Object.assign(
-              {},
+              {
+                fontFamily: 'DIN OT',
+                fontSize: 16,
+              },
               menuItemStyles,
             ),
           },
@@ -311,7 +334,10 @@ class AccountDropdowns extends Component {
               actions.showAddTokenPage()
             },
             style: Object.assign(
-              {},
+              {
+                fontFamily: 'DIN OT',
+                fontSize: 16,
+              },
               menuItemStyles,
             ),
           },
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 0c002b2f0..3f4ea6274 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -22,8 +22,7 @@ function mapDispatchToProps (dispatch) {
     setProviderType: (type) => {
       dispatch(actions.setProviderType(type))
     },
-    setDefaultRpcTarget: () => {
-      // TODO: type is not defined. Is it needed?
+    setDefaultRpcTarget: type => {
       dispatch(actions.setDefaultRpcTarget(type))
     },
     setRpcTarget: (target) => {
@@ -51,6 +50,11 @@ NetworkDropdown.prototype.render = function () {
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
   const rpcList = props.frequentRpcList
   const isOpen = this.props.networkDropdownOpen
+  const dropdownMenuItemStyle = {
+    fontFamily: 'DIN OT',
+    fontSize: '16px',
+    lineHeight: '20px',
+  };
 
   return h(Dropdown, {
     useCssTransition: true,
@@ -73,9 +77,10 @@ NetworkDropdown.prototype.render = function () {
       position: 'absolute',
       right: '2px',
       top: '38px',
+      minWidth: '309px',
     },
     innerStyle: {
-      padding: '2px 16px 2px 0px',
+      padding: '10px 8px',
     },
   }, [
 
@@ -85,14 +90,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'main',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('mainnet'),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.diamond'),
-        'Main Ethereum Network',
-        providerType === 'mainnet' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Main Ethereum Network'),
       ]
     ),
 
@@ -102,14 +109,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'ropsten',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('ropsten'),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.red-dot'),
-        'Ropsten Test Network',
-        providerType === 'ropsten' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Ropsten Test Network'),
       ]
     ),
 
@@ -119,14 +128,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'kovan',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('kovan'),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.hollow-diamond'),
-        'Kovan Test Network',
-        providerType === 'kovan' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Kovan Test Network'),
       ]
     ),
 
@@ -136,14 +147,22 @@ NetworkDropdown.prototype.render = function () {
         key: 'rinkeby',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('rinkeby'),
+<<<<<<< HEAD
         style: {
           fontSize: '18px',
         },
+=======
+        style: dropdownMenuItemStyle,
+>>>>>>> Fix menu style
       },
       [
+        providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.golden-square'),
-        'Rinkeby Test Network',
-        providerType === 'rinkeby' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Rinkeby Test Network'),
       ]
     ),
 
@@ -153,14 +172,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'default',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setDefaultRpcTarget(),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        'Localhost 8545',
-        activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Localhost 8545'),
       ]
     ),
 
@@ -172,14 +193,16 @@ NetworkDropdown.prototype.render = function () {
       {
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => this.props.showConfigPage(),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        'Custom RPC',
-        activeNetwork === 'custom' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Custom RPC'),
       ]
     ),
 
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 6f9269389..48971a29e 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -90,7 +90,7 @@ WalletView.prototype.render = function () {
               top: '14px',
             },
             innerStyle: {
-              padding: '2px 16px',
+              padding: '10px 16px',
             },
             useCssTransition: true,
             selected: selectedAddress,
diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
index e409f759c..715f41dc9 100644
--- a/ui/app/css/itcss/components/account-dropdown.scss
+++ b/ui/app/css/itcss/components/account-dropdown.scss
@@ -1,10 +1,16 @@
+.account-dropdown-name {
+  font-family: 'DIN OT';
+}
+
 .account-dropdown-balance {
   color: $dusty-gray;
+  line-height: 19px;
 }
 
 .account-dropdown-edit-button {
   color: $dusty-gray;
-
+  font-family: "DIN OT";
+  font-weight: 500;
   &:hover {
     color: $white;
   }
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index a067cecd5..f242102af 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -12,3 +12,19 @@
   font-size: 10px;
   flex: 1 0 auto;
 }
+
+.network-name {
+  font-weight: 100;
+  flex: 1 0 auto;
+  color: $dusty-gray;
+}
+
+.network-check,
+.network-check__transparent {
+  color: $white;
+  margin-left: 7px;
+}
+
+.network-check__transparent {
+  opacity: 0;
+}