New settings page rebased (#6333)

* New setting tab

* Add InfoTab

* Add Advanced tab

* Add Security Tab

* Finish mobile view

* Make new setting page responsive

* Fix linter

* Fix y scrolling

* Update link in network dropdown

* Fix e2e tests

* Remove duplicate translation key

* Resolve merge conflict

* Only change settings header in popup view.

* Place mobile-sync button in advanced-tab of settings

app/_locales/en/messages.json

@@ -44,6 +44,9 @@
   "providerRequestInfo": {
     "message": "This site is requesting access to view your current account address. Always make sure you trust the sites you interact with."
   },
+  "aboutUs": {
+    "message": "About Us"
+  },
   "accept": {
     "message": "Accept"
   },
@@ -74,6 +77,12 @@
   "address": {
     "message": "Address"
   },
+  "advanced": {
+    "message": "Advanced"
+  },
+  "advancedSettingsDescription": {
+    "message": "Access developer features, download State Logs, Reset Account, setup testnets and custom RPC."
+  },
   "advancedOptions": {
     "message": "Advanced Options"
   },
@@ -92,9 +101,6 @@
   "addAcquiredTokens": {
     "message": "Add the tokens you've acquired using MetaMask"
   },
-  "advanced": {
-    "message": "Advanced"
-  },
   "agreeTermsOfService": {
     "message": "I agree to the Terms of Service"
   },
@@ -236,6 +242,9 @@
   "chromeRequiredForHardwareWallets": {
     "message": "You need to use MetaMask on Google Chrome in order to connect to your Hardware Wallet."
   },
+  "company": {
+    "message": "Company"
+  },
   "confirm": {
     "message": "Confirm"
   },
@@ -619,6 +628,12 @@
   "gasPriceRequired": {
     "message": "Gas Price Required"
   },
+  "general": {
+    "message": "General"
+  },
+  "generalSettingsDescription": {
+    "message": "Currency conversion, primary currency, language, blockies identicon"
+  },
   "generatingTransaction": {
     "message": "Generating transaction"
   },
@@ -790,6 +805,9 @@
   "ledgerAccountRestriction": {
     "message": "You need to make use your last account before you can add a new one."
   },
+  "legal": {
+    "message": "Legal"
+  },
   "lessThanMax": {
     "message": "must be less than or equal to $1.",
     "description": "helper for inputting hex as decimal input"
@@ -1240,6 +1258,12 @@
   "secretPhrase": {
     "message": "Enter your secret twelve word phrase here to restore your vault."
   },
+  "securityAndPrivacy": {
+    "message": "Security & Privacy"
+  },
+  "securitySettingsDescription": {
+    "message": "Privacy settings and wallet seed phrase"
+  },
   "secondsShorthand": {
     "message": "Sec"
   },

test/e2e/beta/metamask-beta-ui.spec.js

@@ -233,7 +233,11 @@ describe('MetaMask', function () {
       await customRpcButton.click()
       await delay(regularDelayMs)
 
-      const privacyToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(10) .settings-page__content-item-col > div'))
+      const securityTab = await findElement(driver, By.xpath(`//div[contains(text(), 'Security & Privacy')]`))
+      await securityTab.click()
+      await delay(regularDelayMs)
+
+      const privacyToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(1) .settings-page__content-item-col > div'))
       await privacyToggle.click()
       await delay(largeDelayMs * 2)
     })
@@ -472,15 +476,19 @@ describe('MetaMask', function () {
       const settingsButton = await findElement(driver, By.xpath(`//div[contains(text(), 'Settings')]`))
       settingsButton.click()
 
-      await findElement(driver, By.css('.tab-bar'))
+      // await findElement(driver, By.css('.tab-bar'))
+
+      const advancedTab = await findElement(driver, By.xpath(`//div[contains(text(), 'Advanced')]`))
+      await advancedTab.click()
+      await delay(regularDelayMs)
 
-      const showConversionToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(3) .settings-page__content-item-col > div'))
+      const showConversionToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(7) .settings-page__content-item-col > div'))
       await showConversionToggle.click()
 
       const advancedGasTitle = await findElement(driver, By.xpath(`//span[contains(text(), 'Advanced gas controls')]`))
       await driver.executeScript('arguments[0].scrollIntoView(true)', advancedGasTitle)
 
-      const advancedGasToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(12) .settings-page__content-item-col > div'))
+      const advancedGasToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(5) .settings-page__content-item-col > div'))
       await advancedGasToggle.click()
       windowHandles = await driver.getAllWindowHandles()
       extension = windowHandles[0]

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

@@ -10,7 +10,7 @@ const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
 const R = require('ramda')
-const { SETTINGS_ROUTE } = require('../../../helpers/constants/routes')
+const { ADVANCED_ROUTE } = require('../../../helpers/constants/routes')
 
 // classes from nodes of the toggle element.
 const notToggleElementClassnames = [
@@ -233,7 +233,7 @@ NetworkDropdown.prototype.render = function () {
       DropdownMenuItem,
       {
         closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.props.history.push(SETTINGS_ROUTE),
+        onClick: () => this.props.history.push(ADVANCED_ROUTE),
         style: dropdownMenuItemStyle,
       },
       [

ui/app/components/app/tab-bar.js

@@ -1,5 +1,4 @@
-const { Component } = require('react')
-const h = require('react-hyperscript')
+import React, { Component } from 'react'
 const PropTypes = require('prop-types')
 const classnames = require('classnames')
 
@@ -8,18 +7,23 @@ class TabBar extends Component {
     const { tabs = [], onSelect, isActive } = this.props
 
     return (
-      h('.tab-bar', {}, [
-        tabs.map(({ key, content }) => {
-          return h('div', {
-            className: classnames('tab-bar__tab pointer', {
+      <div className="tab-bar">
+        {tabs.map(({ key, content, description }) => (
+          <div
+            key={key}
+            className={classnames('tab-bar__tab pointer', {
               'tab-bar__tab--active': isActive(key, content),
-            }),
-            onClick: () => onSelect(key),
-            key,
-          }, content)
-        }),
-        h('div.tab-bar__tab.tab-bar__grow-tab'),
-      ])
+            })}
+            onClick={() => onSelect(key)}
+          >
+            <div className="tab-bar__tab__content">
+              <div className="tab-bar__tab__content__title">{content}</div>
+              <div className="tab-bar__tab__content__description">{description}</div>
+            </div>
+            <div className="tab-bar__tab__caret" />
+          </div>
+        ))}
+      </div>
     )
   }
 }

ui/app/css/itcss/components/tab-bar.scss

@@ -1,21 +1,73 @@
 .tab-bar {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-end;
 }
 
 .tab-bar__tab {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
   min-width: 0;
   flex: 0 0 auto;
-  padding: 15px 25px;
-  border-bottom: 1px solid $alto;
   box-sizing: border-box;
-  font-size: 18px;
-}
+  font-size: 16px;
+  padding: 16px 24px;
+  opacity: .5;
+  transition: opacity 200ms ease-in-out;
+
+  @media screen and (min-width: 576px) {
+    &:hover {
+      opacity: .4;
+    }
+
+    &:active {
+      opacity: .6;
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    font-size: 18px;
+    padding: 24px;
+    border-bottom: 1px solid $alto;
+    opacity: 1;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    width: 0;
+
+    &__description {
+      display: none;
+
+      @media screen and (max-width: 575px) {
+        display: block;
+        font-size: 14px;
+        font-weight: 300;
+        margin-top: 8px;
+        min-height: 14px;
+      }
+    }
+  }
+
+  &__caret {
+    display: none;
+
+    @media screen and (max-width: 575px) {
+      display: block;
+      background-image: url('/images/caret-right.svg');
+      width: 36px;
+      height: 36px;
+      opacity: .5;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+  }
 
-.tab-bar__tab--active {
-  border-color: $black;
+  &--active {
+    opacity: 1 !important;
+  }
 }
 
 .tab-bar__grow-tab {

ui/app/helpers/constants/routes.js

@@ -2,7 +2,12 @@ const DEFAULT_ROUTE = '/'
 const UNLOCK_ROUTE = '/unlock'
 const LOCK_ROUTE = '/lock'
 const SETTINGS_ROUTE = '/settings'
+const GENERAL_ROUTE = '/settings/general'
 const INFO_ROUTE = '/settings/info'
+const ADVANCED_ROUTE = '/settings/advanced'
+const SECURITY_ROUTE = '/settings/security'
+const COMPANY_ROUTE = '/settings/company'
+const ABOUT_US_ROUTE = '/settings/about-us'
 const REVEAL_SEED_ROUTE = '/seed'
 const MOBILE_SYNC_ROUTE = '/mobile-sync'
 const CONFIRM_SEED_ROUTE = '/confirm-seed'
@@ -80,4 +85,9 @@ module.exports = {
   CONFIRM_TOKEN_METHOD_PATH,
   SIGNATURE_REQUEST_PATH,
   INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
+  ADVANCED_ROUTE,
+  SECURITY_ROUTE,
+  COMPANY_ROUTE,
+  GENERAL_ROUTE,
+  ABOUT_US_ROUTE,
 }