Fix network menu for custom URLs (#3366)

2 files changed, 31 insertions, 14 deletions

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index dfaa6b22c..9be5cc5d1 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -84,7 +84,7 @@ NetworkDropdown.prototype.render = function () {
     style: {
       position: 'absolute',
       top: '58px',
-      minWidth: '309px',
+      width: '309px',
       zIndex: '55px',
     },
     innerStyle: {
@@ -276,11 +276,21 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
           key: `common${rpc}`,
           closeMenu: () => this.props.hideNetworkDropdown(),
           onClick: () => props.setRpcTarget(rpc),
+          style: {
+            fontFamily: 'DIN OT',
+            fontSize: '16px',
+            lineHeight: '20px',
+            padding: '12px 0',
+          },
         },
         [
-          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-          rpc,
-          rpcTarget === rpc ? h('.check', '✓') : null,
+          rpcTarget === rpc ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
+          h('span.network-name-item', {
+            style: {
+              color: rpcTarget === rpc ? '#ffffff' : '#9b9b9b',
+            },
+          }, rpc),
         ]
       )
     }
@@ -293,12 +303,6 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
 
   if (type !== 'rpc') return null
 
-  // Concatenate long URLs
-  let label = rpcTarget
-  if (rpcTarget.length > 31) {
-    label = label.substr(0, 34) + '...'
-  }
-
   switch (rpcTarget) {
 
     case 'http://localhost:8545':
@@ -311,11 +315,21 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
           key: rpcTarget,
           onClick: () => props.setRpcTarget(rpcTarget),
           closeMenu: () => this.props.hideNetworkDropdown(),
+          style: {
+            fontFamily: 'DIN OT',
+            fontSize: '16px',
+            lineHeight: '20px',
+            padding: '12px 0',
+          },
         },
         [
-          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-          label,
-          h('.check', '✓'),
+          h('i.fa.fa-check'),
+          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
+          h('span.network-name-item', {
+            style: {
+              color: '#ffffff',
+            },
+          }, rpcTarget),
         ]
       )
   }
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index d9a39b8d5..c32d1de5e 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -76,8 +76,11 @@
 
 .network-name-item {
   font-weight: 100;
-  flex: 1 0 auto;
+  flex: 1;
   color: $dusty-gray;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .network-check,