Merge pull request #6721 from MetaMask/Version-6.6.2

Version 6.6.2

29 files changed, 349 insertions, 111 deletions

diff --git a/ui/app/components/app/account-menu/index.scss b/ui/app/components/app/account-menu/index.scss
index 9a61bf887..435dd6b2a 100644
--- a/ui/app/components/app/account-menu/index.scss
+++ b/ui/app/components/app/account-menu/index.scss
@@ -21,7 +21,7 @@
   }
 
   &__icon {
-    margin-left: 20px;
+    margin-left: 1rem;
     cursor: pointer;
 
     &--disabled {
diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js
index 343e0daab..171a3499f 100644
--- a/ui/app/components/app/app-header/app-header.component.js
+++ b/ui/app/components/app/app-header/app-header.component.js
@@ -101,8 +101,6 @@ export default class AppHeader extends PureComponent {
             <img
               className="app-header__metafox-logo app-header__metafox-logo--icon"
               src="/images/logo/metamask-fox.svg"
-              height={42}
-              width={42}
             />
           </div>
           <div className="app-header__account-menu-container">
diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss
index d46b16f25..d3f37b7a2 100644
--- a/ui/app/components/app/app-header/index.scss
+++ b/ui/app/components/app/app-header/index.scss
@@ -1,6 +1,6 @@
 .app-header {
   align-items: center;
-  background: $gallery;
+  background: $Grey-000;
   position: relative;
   z-index: $header-z-index;
   display: flex;
@@ -9,7 +9,7 @@
   flex: 0 0 auto;
 
   @media screen and (max-width: 575px) {
-    padding: 12px;
+    padding: 1rem;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
     z-index: $mobile-header-z-index;
   }
@@ -34,6 +34,7 @@
     cursor: pointer;
 
     &--icon {
+      height: 32px;
       @media screen and (min-width: $break-large) {
         display: none;
       }
diff --git a/ui/app/components/app/dropdowns/account-details-dropdown.js b/ui/app/components/app/dropdowns/account-details-dropdown.js
index cbeccdd81..a4c33620a 100644
--- a/ui/app/components/app/dropdowns/account-details-dropdown.js
+++ b/ui/app/components/app/dropdowns/account-details-dropdown.js
@@ -119,8 +119,11 @@ AccountDetailsDropdown.prototype.render = function () {
         this.props.onClose()
       },
       text: (rpcPrefs.blockExplorerUrl
-        ? this.context.t('blockExplorerView', [rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]])
+        ? this.context.t('viewinExplorer')
         : this.context.t('viewOnEtherscan')),
+      subText: (rpcPrefs.blockExplorerUrl
+        ? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]
+        : null),
       icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }),
     }),
     isRemovable ? h(Item, {
diff --git a/ui/app/components/app/dropdowns/components/menu.js b/ui/app/components/app/dropdowns/components/menu.js
index f6d8a139e..63501eaa9 100644
--- a/ui/app/components/app/dropdowns/components/menu.js
+++ b/ui/app/components/app/dropdowns/components/menu.js
@@ -20,16 +20,18 @@ Item.prototype.render = function () {
     icon,
     children,
     text,
+    subText,
     className = '',
     onClick,
   } = this.props
   const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}`
   const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null
   const textComponent = text ? h('div.menu__item__text', text) : null
+  const subTextComponent = subText ? h('div.menu__item__subtext', subText) : null
 
   return children
     ? h('div', { className: itemClassName, onClick }, children)
-    : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ]
+    : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent, subTextComponent ]
       .filter(d => Boolean(d))
     )
 }
diff --git a/ui/app/components/app/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss
index f699f4090..eaa50619c 100644
--- a/ui/app/components/app/menu-bar/index.scss
+++ b/ui/app/components/app/menu-bar/index.scss
@@ -5,19 +5,28 @@
   align-items: center;
   flex: 0 0 auto;
   margin-bottom: 16px;
-  padding: 5px;
-  border-bottom: 1px solid #e5e5e5;
+  padding: 0 22px;
+  border-bottom: 1px solid $Grey-100;
 
   &__sidebar-button {
-    font-size: 1.25rem;
+    width: 20px;
+    height: 20px;
+    background-image: url(/images/icons/hamburger.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
     cursor: pointer;
-    padding: 10px;
   }
 
   &__open-in-browser {
+    width: 20px;
+    height: 20px;
+    background-image: url(/images/icons/3dots.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
     cursor: pointer;
     display: flex;
     justify-content: center;
-    padding: 10px;
   }
 }
diff --git a/ui/app/components/app/menu-bar/menu-bar.component.js b/ui/app/components/app/menu-bar/menu-bar.component.js
index e37fddda4..c830d8a19 100644
--- a/ui/app/components/app/menu-bar/menu-bar.component.js
+++ b/ui/app/components/app/menu-bar/menu-bar.component.js
@@ -30,7 +30,7 @@ export default class MenuBar extends PureComponent {
           position="bottom"
         >
           <div
-            className="fa fa-bars menu-bar__sidebar-button"
+            className="menu-bar__sidebar-button"
             onClick={() => {
               this.context.metricsEvent({
                 eventOpts: {
@@ -50,7 +50,7 @@ export default class MenuBar extends PureComponent {
           position="bottom"
         >
           <div
-            className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
+            className="menu-bar__open-in-browser"
             onClick={() => {
               this.context.metricsEvent({
                 eventOpts: {
diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js
index 9ee0a1e17..e778700cd 100644
--- a/ui/app/components/app/network.js
+++ b/ui/app/components/app/network.js
@@ -82,7 +82,7 @@ Network.prototype.render = function () {
                 loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('mainnet')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
           case 'ropsten-test-network':
             return h('.network-indicator', [
@@ -92,7 +92,7 @@ Network.prototype.render = function () {
                 loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('ropsten')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
           case 'kovan-test-network':
             return h('.network-indicator', [
@@ -102,7 +102,7 @@ Network.prototype.render = function () {
                 loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('kovan')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
           case 'rinkeby-test-network':
             return h('.network-indicator', [
@@ -112,7 +112,7 @@ Network.prototype.render = function () {
                 loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('rinkeby')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
           case 'goerli-test-network':
             return h('.network-indicator', [
@@ -122,7 +122,7 @@ Network.prototype.render = function () {
                 loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('goerli')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
           default:
             return h('.network-indicator', [
@@ -142,7 +142,7 @@ Network.prototype.render = function () {
               }),
 
               h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
         }
       })(),
diff --git a/ui/app/components/app/selected-account/index.scss b/ui/app/components/app/selected-account/index.scss
index 5339a228b..fa3079d77 100644
--- a/ui/app/components/app/selected-account/index.scss
+++ b/ui/app/components/app/selected-account/index.scss
@@ -7,15 +7,21 @@
 
   &__name {
     max-width: 200px;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 19px;
+    color: $black;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     text-align: center;
+    margin-bottom: 4px;
   }
 
   &__address {
     font-size: .75rem;
-    color: $silver-chalice;
+    line-height: .75rem;
+    color: #989a9b;
   }
 
   &__clickable {
@@ -23,7 +29,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 5px 15px;
+    margin: 4px 0;
+    padding: 6px 15px;
     border-radius: 10px;
     cursor: pointer;
 
diff --git a/ui/app/components/app/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss
index 9e73a546c..4dba4b2c3 100644
--- a/ui/app/components/app/transaction-list-item/index.scss
+++ b/ui/app/components/app/transaction-list-item/index.scss
@@ -1,7 +1,7 @@
 .transaction-list-item {
   box-sizing: border-box;
   min-height: 74px;
-  border-bottom: 1px solid $geyser;
+  border-bottom: 1px solid $Grey-100;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -19,7 +19,7 @@
       "identicon nonce status secondary-amount";
 
     @media screen and (max-width: $break-small) {
-      padding: 8px 20px 12px;
+      padding: .5rem 1rem;
       grid-template-columns: 45px 5fr 3fr;
       grid-template-areas:
         "nonce nonce nonce"
@@ -44,12 +44,13 @@
 
   &__action {
     text-transform: capitalize;
-    padding: 0 8px 2px 0;
+    padding: 0 0 4px 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     grid-area: action;
-    align-self: end;
+    color: $Grey-800;
+    line-height: 20px;
   }
 
   &__status {
@@ -72,7 +73,8 @@
     align-self: start;
 
     @media screen and (max-width: $break-small) {
-      padding-bottom: 4px;
+      padding-bottom: 8px;
+      line-height: 12px;
     }
   }
 
@@ -88,19 +90,22 @@
       grid-area: primary-amount;
       align-self: end;
       justify-self: end;
+      line-height: 20px;
 
       @media screen and (max-width: $break-small) {
-        padding-bottom: 2px;
+        padding-bottom: 4px;
+        height: 100%;
+        color: $Grey-800;
       }
     }
 
     &--secondary {
       text-align: end;
       font-size: .75rem;
-      color: #5e6064;
       grid-area: secondary-amount;
       align-self: start;
       justify-self: end;
+      color: $Grey-500;
     }
   }
 
diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
index 0d4127b4f..80b26469b 100644
--- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
@@ -179,7 +179,7 @@ export default class TransactionListItem extends PureComponent {
           <Identicon
             className="transaction-list-item__identicon"
             address={toAddress}
-            diameter={34}
+            diameter={36}
             image={assetImages[toAddress]}
           />
           <TransactionAction
diff --git a/ui/app/components/app/transaction-list/index.scss b/ui/app/components/app/transaction-list/index.scss
index a486f4112..42eddd31e 100644
--- a/ui/app/components/app/transaction-list/index.scss
+++ b/ui/app/components/app/transaction-list/index.scss
@@ -12,9 +12,10 @@
 
   &__header {
     flex: 0 0 auto;
-    font-size: .875rem;
-    color: $dusty-gray;
-    border-bottom: 1px solid $geyser;
+    font-size: 14px;
+    line-height: 20px;
+    color: $Grey-400;
+    border-bottom: 1px solid $Grey-100;
     padding: 8px 0 8px 20px;
 
     @media screen and (max-width: $break-small) {
diff --git a/ui/app/components/app/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss
index e7daafeef..024cbf2a1 100644
--- a/ui/app/components/app/transaction-status/index.scss
+++ b/ui/app/components/app/transaction-status/index.scss
@@ -12,8 +12,9 @@
 
   @media screen and (max-width: $break-small) {
     height: 16px;
-    width: 72px;
-    font-size: .5rem;
+    min-width: 72px;
+    font-size: 10px;
+    padding: 0 12px;
   }
 
   &--confirmed {
diff --git a/ui/app/components/app/transaction-view-balance/index.scss b/ui/app/components/app/transaction-view-balance/index.scss
index bdcd536b0..cdb09db8a 100644
--- a/ui/app/components/app/transaction-view-balance/index.scss
+++ b/ui/app/components/app/transaction-view-balance/index.scss
@@ -33,11 +33,14 @@
 
   &__primary-balance {
     font-size: 1.5rem;
+    color: $black;
 
     @media screen and (max-width: $break-small) {
-      font-size: 1.75rem;
+      font-size: 32px;
+      line-height: 45px;
       width: 100%;
       justify-content: center;
+
     }
   }
 
@@ -51,12 +54,15 @@
 
   &__cached-secondary-balance {
     color: rgba(220, 153, 18, 0.6901960784313725);
-    font-size: 1.15rem;
+    font-size: 16px;
+    line-height: 23px;
   }
 
   &__secondary-balance {
-    font-size: 1.15rem;
-    color: #a0a0a0;
+    font-size: 16px;
+    line-height: 23px;
+    font-weight: 400;
+    color: $Grey-400;
   }
 
   &__balance-container {
diff --git a/ui/app/components/ui/currency-display/index.scss b/ui/app/components/ui/currency-display/index.scss
index 313c932b8..6d069eb05 100644
--- a/ui/app/components/ui/currency-display/index.scss
+++ b/ui/app/components/ui/currency-display/index.scss
@@ -6,6 +6,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
   }
 
   &__suffix {
diff --git a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
index 4ef203521..a2cf0100b 100644
--- a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
@@ -8,6 +8,7 @@ export default class PageContainerFooter extends Component {
     children: PropTypes.node,
     onCancel: PropTypes.func,
     cancelText: PropTypes.string,
+    cancelButtonType: PropTypes.string,
     onSubmit: PropTypes.func,
     submitText: PropTypes.string,
     disabled: PropTypes.bool,
@@ -29,6 +30,7 @@ export default class PageContainerFooter extends Component {
       disabled,
       submitButtonType,
       hideCancel,
+      cancelButtonType,
     } = this.props
 
     return (
@@ -36,7 +38,7 @@ export default class PageContainerFooter extends Component {
 
         <header>
           {!hideCancel && <Button
-            type="default"
+            type={cancelButtonType || 'default'}
             large
             className="page-container__footer-button"
             onClick={e => onCancel(e)}
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index 6409ad545..7d71ea799 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -8,7 +8,7 @@
   &__item {
     padding: 18px;
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: row wrap;
     align-items: center;
     position: relative;
     z-index: 201;
@@ -39,6 +39,11 @@
       font-size: 16px;
       line-height: 21px;
     }
+
+    &__subtext {
+      font-size: 12px;
+      padding: 5px 0px 0px 30px;
+    }
   }
 
   &__divider {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index da90b7910..4275ffe92 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -8,9 +8,9 @@
 }
 
 .network-component.pointer {
-  border: 2px solid $silver;
+  border: 2px solid $Grey-200;
   border-radius: 82px;
-  padding: 7px 3px;
+  padding: 6px 3px;
   flex: 0 0 auto;
   display: flex;
 
@@ -47,11 +47,15 @@
   align-items: center;
   font-size: .6em;
 
-  .fa-caret-down {
-    line-height: 15px;
-    font-size: 12px;
-    padding: 0 4px;
-    flex: 0 0 auto;
+  &__down-arrow {
+    height: 8px;
+    width: 12px;
+    display: block;
+    background-image: url(/images/icons/caret-down.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    margin: 0 8px;
   }
 
   .fa-question-circle {
@@ -65,12 +69,14 @@
   padding: 0 4px;
   font-family: Roboto;
   font-size: 12px;
+  line-height: 14px;
   flex: 1 1 auto;
   color: $tundora;
   font-weight: 500;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  height: 16px;
 }
 
 .dropdown-menu-item .fa.delete {
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 7bfa2d443..b3aae8eec 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -143,6 +143,7 @@
     flex-flow: column;
     align-items: center;
     margin-top: 29px;
+    width: 100%;
   }
 
   &__buttons {
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index f7003b1f4..c02be0d98 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -99,7 +99,11 @@ $Blue-500: #037DD6;
 $Blue-600: #0260a4;
 
 $Grey-000: #f2f3f4;
+$Grey-100: #D6D9DC;
+$Grey-200: #bbc0c5;
+$Grey-400: #848c96;
 $Grey-500: #6A737D;
+$Grey-800: #24272a;
 
 $Red-000: #fcf2f3;
 $Red-500: #D73A49;
@@ -109,3 +113,17 @@ $Orange-000: #fef5ef;
 $Orange-500: #F66A0A;
 
 
+/*
+  Spacing Variables
+*/
+$no-spacing: 0px;
+$xxs-spacing: 4px;
+$xs-spacing: 8px;
+$s-spacing: 16px;
+$base-spacing: 24px;
+$medium-spacing: 32px;
+$large-spacing: 40px;
+$xlarge-spacing: 48px;
+$xxlarge-spacing: 64px;
+
+
diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js
index ad430ba58..2482e49d1 100644
--- a/ui/app/pages/create-account/import-account/json.js
+++ b/ui/app/pages/create-account/import-account/json.js
@@ -8,9 +8,10 @@ const actions = require('../../../store/actions')
 const FileInput = require('react-simple-file-input').default
 const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes')
 const { getMetaMaskAccounts } = require('../../../selectors/selectors')
-const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 import Button from '../../../components/ui/button'
 
+const HELP_LINK = 'https://metamask.zendesk.com/hc/en-us/articles/360015489351-Importing-Accounts'
+
 class JsonImportSubview extends Component {
   constructor (props) {
     super(props)
@@ -37,10 +38,11 @@ class JsonImportSubview extends Component {
           readAs: 'text',
           onLoad: this.onLoad.bind(this),
           style: {
-            margin: '20px 0px 12px 34%',
+            padding: '20px 0px 12px 15%',
             fontSize: '15px',
             display: 'flex',
             justifyContent: 'center',
+            width: '100%',
           },
         }),
 
diff --git a/ui/app/pages/mobile-sync/index.js b/ui/app/pages/mobile-sync/index.js
index 00a514534..a8de4fce9 100644
--- a/ui/app/pages/mobile-sync/index.js
+++ b/ui/app/pages/mobile-sync/index.js
@@ -16,6 +16,7 @@ import LoadingScreen from '../../components/ui/loading-screen'
 
 const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
 const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
+const KEYS_GENERATION_TIME = 30000
 
 class MobileSyncPage extends Component {
   static propTypes = {
@@ -36,6 +37,8 @@ class MobileSyncPage extends Component {
       error: null,
       syncing: false,
       completed: false,
+      channelName: undefined,
+      cipherKey: undefined,
     }
 
     this.syncing = false
@@ -53,16 +56,31 @@ class MobileSyncPage extends Component {
     this.setState({ seedWords: null, error: null })
     this.props.requestRevealSeedWords(this.state.password)
       .then(seedWords => {
-        this.generateCipherKeyAndChannelName()
+        this.startKeysGeneration()
         this.setState({ seedWords, screen: REVEAL_SEED_SCREEN })
-        this.initWebsockets()
       })
       .catch(error => this.setState({ error: error.message }))
   }
 
+  startKeysGeneration () {
+    this.handle && clearTimeout(this.handle)
+    this.disconnectWebsockets()
+    this.generateCipherKeyAndChannelName()
+    this.initWebsockets()
+    this.handle = setTimeout(() => {
+      this.startKeysGeneration()
+    }, KEYS_GENERATION_TIME)
+  }
+
   generateCipherKeyAndChannelName () {
     this.cipherKey = `${this.props.selectedAddress.substr(-4)}-${PubNub.generateUUID()}`
     this.channelName = `mm-${PubNub.generateUUID()}`
+    this.setState({cipherKey: this.cipherKey, channelName: this.channelName})
+  }
+
+  initWithCipherKeyAndChannelName (cipherKey, channelName) {
+    this.cipherKey = cipherKey
+    this.channelName = channelName
   }
 
   initWebsockets () {
@@ -83,6 +101,11 @@ class MobileSyncPage extends Component {
 
         if (message.event === 'start-sync') {
             this.startSyncing()
+        } else if (message.event === 'connection-info') {
+            this.handle && clearTimeout(this.handle)
+            this.disconnectWebsockets()
+            this.initWithCipherKeyAndChannelName(message.cipher, message.channel)
+            this.initWebsockets()
         } else if (message.event === 'end-sync') {
             this.disconnectWebsockets()
             this.setState({syncing: false, completed: true})
@@ -272,7 +295,7 @@ class MobileSyncPage extends Component {
   renderRevealSeedContent () {
 
     const qrImage = qrCode(0, 'M')
-    qrImage.addData(`metamask-sync:${this.channelName}|@|${this.cipherKey}`)
+    qrImage.addData(`metamask-sync:${this.state.channelName}|@|${this.state.cipherKey}`)
     qrImage.make()
 
     const { t } = this.context
diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss
index 66959ba93..c516a84bb 100644
--- a/ui/app/pages/settings/index.scss
+++ b/ui/app/pages/settings/index.scss
@@ -28,6 +28,10 @@
     font-size: 20px;
     border-bottom: 1px solid $alto;
     margin-right: 24px;
+    height: 72px;
+    align-items: center;
+    display: flex;
+    flex-flow: row nowrap;
 
     @media screen and (max-width: 575px) {
       display: none;
@@ -52,9 +56,7 @@
     font-family: Roboto;
     font-style: normal;
     font-weight: normal;
-    font-size: 24px;
-    line-height: 24px;
-    color: black;
+    font-size: 20px;
 
     @media screen and (max-width: 575px) {
       font-size: 16px;
@@ -123,7 +125,7 @@
 
   &__body {
     padding: 12px 24px;
-    
+
     @media screen and (min-width: 576px) {
       padding: 12px;
     }
diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index b0020437d..bf83c7a14 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -12,7 +12,7 @@
   }
 
   &__body {
-    padding: 12px 24px;
+    padding-right: 24px;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -118,12 +118,12 @@
   }
 
   &__add-network-header-button-wrapper {
-    padding-top: 15px;
-    padding-bottom: 21px;
     justify-content: center;
 
     .button {
-      width: 178px;
+      width: 138px;
+      padding: 10px;
+      line-height: 20px;
     }
 
     @media screen and (max-width: 575px) {
@@ -197,4 +197,24 @@
     font-weight: bold;
     color: #000000;
   }
-}
\ No newline at end of file
+}
+
+.network-form {
+  &__footer {
+    display: flex;
+    flex-flow: row nowrap;
+    margin: .75rem 0;
+
+    .btn-default {
+      margin-right: .375rem;
+    }
+
+    .btn-secondary {
+      margin-left: .375rem;
+    }
+
+    .btn-danger {
+      margin-right: 3.75rem;
+    }
+  }
+}
diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
index 5e455b65e..388e2665f 100644
--- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
+++ b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import validUrl from 'valid-url'
-import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer'
 import TextField from '../../../../components/ui/text-field'
+import Button from '../../../../components/ui/button'
 
-export default class NetworksTab extends PureComponent {
+export default class NetworkForm extends PureComponent {
   static contextTypes = {
     t: PropTypes.func.isRequired,
     metricsEvent: PropTypes.func.isRequired,
@@ -12,6 +12,7 @@ export default class NetworksTab extends PureComponent {
 
   static propTypes = {
     editRpc: PropTypes.func.isRequired,
+    delRpcTarget: PropTypes.func.isRequired,
     rpcUrl: PropTypes.string,
     chainId: PropTypes.string,
     ticker: PropTypes.string,
@@ -20,6 +21,7 @@ export default class NetworksTab extends PureComponent {
     onClear: PropTypes.func.isRequired,
     setRpcTarget: PropTypes.func.isRequired,
     networksTabIsInAddMode: PropTypes.bool,
+    isCurrentRpcTarget: PropTypes.bool,
     blockExplorerUrl: PropTypes.string,
     rpcPrefs: PropTypes.object,
   }
@@ -70,6 +72,71 @@ export default class NetworksTab extends PureComponent {
     })
   }
 
+  resetForm () {
+    const {
+      rpcUrl,
+      chainId,
+      ticker,
+      networkName,
+      blockExplorerUrl,
+    } = this.props
+
+    this.setState({ rpcUrl, chainId, ticker, networkName, blockExplorerUrl, errors: {} })
+  }
+
+  onSubmit = () => {
+    const {
+      setRpcTarget,
+      rpcUrl: propsRpcUrl,
+      editRpc,
+      rpcPrefs = {},
+      onClear,
+      networksTabIsInAddMode,
+    } = this.props
+    const {
+      networkName,
+      rpcUrl,
+      chainId,
+      ticker,
+      blockExplorerUrl,
+    } = this.state
+    if (propsRpcUrl && rpcUrl !== propsRpcUrl) {
+      editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, {
+        blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
+        ...rpcPrefs,
+      })
+    } else {
+      setRpcTarget(rpcUrl, chainId, ticker, networkName, {
+        blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
+        ...rpcPrefs,
+      })
+    }
+
+    if (networksTabIsInAddMode) {
+      onClear()
+    }
+  }
+
+  onCancel = () => {
+    const {
+      networksTabIsInAddMode,
+      onClear,
+    } = this.props
+
+    if (networksTabIsInAddMode) {
+      onClear()
+    } else {
+      this.resetForm()
+    }
+  }
+
+  onDelete = () => {
+    const { delRpcTarget, rpcUrl, onClear } = this.props
+    delRpcTarget(rpcUrl)
+    this.resetForm()
+    onClear()
+  }
+
   stateIsUnchanged () {
     const {
       rpcUrl,
@@ -152,16 +219,23 @@ export default class NetworksTab extends PureComponent {
   }
 
   render () {
-    const { setRpcTarget, viewOnly, rpcUrl: propsRpcUrl, editRpc, rpcPrefs = {} } = this.props
+    const { t } = this.context
+    const {
+      viewOnly,
+      isCurrentRpcTarget,
+      networksTabIsInAddMode,
+    } = this.props
     const {
       networkName,
       rpcUrl,
-      chainId,
+      chainId = '',
       ticker,
       blockExplorerUrl,
       errors,
     } = this.state
 
+    const isSubmitDisabled = viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl
+    const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
 
     return (
       <div className="networks-tab__network-form">
@@ -198,26 +272,32 @@ export default class NetworksTab extends PureComponent {
           blockExplorerUrl,
           'optionalBlockExplorerUrl',
         )}
-        <PageContainerFooter
-          cancelText={this.context.t('cancel')}
-          hideCancel={true}
-          onSubmit={() => {
-            if (propsRpcUrl && rpcUrl !== propsRpcUrl) {
-              editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, {
-                blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
-                ...rpcPrefs,
-              })
-            } else {
-              setRpcTarget(rpcUrl, chainId, ticker, networkName, {
-                blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
-                ...rpcPrefs,
-              })
-            }
-          }}
-          submitText={this.context.t('save')}
-          submitButtonType={'confirm'}
-          disabled={viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl}
-        />
+        <div className="network-form__footer">
+          {
+            deletable && (
+              <Button
+                type="danger"
+                onClick={this.onDelete}
+              >
+                { t('delete') }
+              </Button>
+            )
+          }
+          <Button
+            type="default"
+            onClick={this.onCancel}
+            disabled={viewOnly || this.stateIsUnchanged()}
+          >
+            { t('cancel') }
+          </Button>
+          <Button
+            type="secondary"
+            disabled={isSubmitDisabled}
+            onClick={this.onSubmit}
+          >
+            { t('save') }
+          </Button>
+        </div>
       </div>
     )
   }
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
index 2f921a892..f6c8443cf 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js
@@ -25,6 +25,7 @@ export default class NetworksTab extends PureComponent {
     setNetworksTabAddMode: PropTypes.func.isRequired,
     setRpcTarget: PropTypes.func.isRequired,
     setSelectedSettingsRpcUrl: PropTypes.func.isRequired,
+    delRpcTarget: PropTypes.func.isRequired,
     providerUrl: PropTypes.string,
     providerType: PropTypes.string,
     networkDefaultedToProvider: PropTypes.bool,
@@ -62,7 +63,7 @@ export default class NetworksTab extends PureComponent {
         <span className="settings-page__sub-header-text">{ this.context.t('networks') }</span>
         <div className="networks-tab__add-network-header-button-wrapper">
           <Button
-            type="primary"
+            type="secondary"
             onClick={event => {
               event.preventDefault()
               setSelectedSettingsRpcUrl(null)
@@ -125,19 +126,41 @@ export default class NetworksTab extends PureComponent {
 
   renderNetworksList () {
     const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props
-
+    console.log(networksToRender)
     return (
-      <div className={classnames('networks-tab__networks-list', {
-        'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode,
-      })}>
+      <div
+        className={classnames('networks-tab__networks-list', {
+          'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode,
+        })}
+      >
         { networksToRender.map(network => this.renderNetworkListItem(network, selectedNetwork.rpcUrl)) }
+        {
+          networksTabIsInAddMode && (
+            <div
+              className="networks-tab__networks-list-item"
+            >
+              <NetworkDropdownIcon
+                backgroundColor="white"
+                innerBorder="1px solid rgb(106, 115, 125)"
+              />
+              <div
+                className="networks-tab__networks-list-name networks-tab__networks-list-name--selected"
+              >
+                { this.context.t('newNetwork') }
+              </div>
+              <div className="networks-tab__networks-list-arrow" />
+            </div>
+          )
+        }
       </div>
     )
   }
 
   renderNetworksTabContent () {
+    const { t } = this.context
     const {
       setRpcTarget,
+      delRpcTarget,
       setSelectedSettingsRpcUrl,
       setNetworksTabAddMode,
       selectedNetwork: {
@@ -153,30 +176,39 @@ export default class NetworksTab extends PureComponent {
       networksTabIsInAddMode,
       editRpc,
       networkDefaultedToProvider,
+      providerUrl,
     } = this.props
+
     const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+    const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
 
     return (
       <div className="networks-tab__content">
-        {this.renderNetworksList()}
-        {networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
-          ? <NetworkForm
-            setRpcTarget={setRpcTarget}
-            editRpc={editRpc}
-            networkName={label || labelKey && this.context.t(labelKey) || ''}
-            rpcUrl={rpcUrl}
-            chainId={chainId}
-            ticker={ticker}
-            onClear={() => {
-              setNetworksTabAddMode(false)
-              setSelectedSettingsRpcUrl(null)
-            }}
-            viewOnly={viewOnly}
-            networksTabIsInAddMode={networksTabIsInAddMode}
-            rpcPrefs={rpcPrefs}
-            blockExplorerUrl={blockExplorerUrl}
-          />
-          : null
+        { this.renderNetworksList() }
+        {
+          shouldRenderNetworkForm
+            ? (
+              <NetworkForm
+                setRpcTarget={setRpcTarget}
+                editRpc={editRpc}
+                networkName={label || labelKey && t(labelKey) || ''}
+                rpcUrl={rpcUrl}
+                chainId={chainId}
+                ticker={ticker}
+                onClear={() => {
+                  setNetworksTabAddMode(false)
+                  setSelectedSettingsRpcUrl(null)
+                }}
+                delRpcTarget={delRpcTarget}
+                viewOnly={viewOnly}
+                isCurrentRpcTarget={providerUrl === rpcUrl}
+                networksTabIsInAddMode={networksTabIsInAddMode}
+                rpcPrefs={rpcPrefs}
+                blockExplorerUrl={blockExplorerUrl}
+                cancelText={t('cancel')}
+              />
+            )
+            : null
         }
       </div>
     )
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.constants.js b/ui/app/pages/settings/networks-tab/networks-tab.constants.js
index d3d1a01cc..1a49ca04f 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.constants.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.constants.js
@@ -36,6 +36,15 @@ const defaultNetworksData = [
     blockExplorerUrl: 'https://rinkeby.etherscan.io',
   },
   {
+    labelKey: 'goerli',
+    iconColor: '#3099f2',
+    providerType: 'goerli',
+    rpcUrl: 'https://api.infura.io/v1/jsonrpc/goerli',
+    chainId: '5',
+    ticker: 'ETH',
+    blockExplorerUrl: 'https://goerli.etherscan.io',
+  },
+  {
     labelKey: 'localhost',
     iconColor: 'white',
     border: '1px solid #6A737D',
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js
index a5d71f714..9e1098922 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.container.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.container.js
@@ -8,6 +8,7 @@ import {
   displayWarning,
   setNetworksTabAddMode,
   editRpc,
+  delRpcTarget,
 } from '../../../store/actions'
 import { defaultNetworksData } from './networks-tab.constants'
 const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true }))
@@ -63,6 +64,9 @@ const mapDispatchToProps = dispatch => {
     setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => {
       dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs))
     },
+    delRpcTarget: (target) => {
+      dispatch(delRpcTarget(target))
+    },
     displayWarning: warning => dispatch(displayWarning(warning)),
     setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)),
     editRpc: (oldRpc, newRpc, chainId, ticker, nickname, rpcPrefs) => {
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index a2f137264..7f2045244 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -89,7 +89,7 @@ class SettingsPage extends PureComponent {
     const { t } = this.context
     const { location: { pathname } } = this.props
 
-    return (
+    return pathname !== NETWORKS_ROUTE && (
       <div className="settings-page__subheader">
         {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')}
       </div>