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

2 files changed, 19 insertions, 15 deletions

diff --git a/ui/app/components/app/dropdowns/network-dropdown.js b/ui/app/components/app/dropdowns/network-dropdown.js
index fcc7a8681..3d9037a06 100644
--- a/ui/app/components/app/dropdowns/network-dropdown.js
+++ b/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,
       },
       [
diff --git a/ui/app/components/app/tab-bar.js b/ui/app/components/app/tab-bar.js
index 0016a09c1..43923989a 100644
--- a/ui/app/components/app/tab-bar.js
+++ b/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>
     )
   }
 }