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

1 files changed, 105 insertions, 22 deletions

diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index d67d3fcfe..3d415c6b8 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -1,10 +1,29 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Route, matchPath } from 'react-router-dom'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import TabBar from '../../components/app/tab-bar'
+import c from 'classnames'
 import SettingsTab from './settings-tab'
+import AdvancedTab from './advanced-tab'
 import InfoTab from './info-tab'
-import { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } from '../../helpers/constants/routes'
+import SecurityTab from './security-tab'
+import {
+  DEFAULT_ROUTE,
+  ADVANCED_ROUTE,
+  SECURITY_ROUTE,
+  GENERAL_ROUTE,
+  ABOUT_US_ROUTE,
+  SETTINGS_ROUTE,
+} from '../../helpers/constants/routes'
+
+const ROUTES_TO_I18N_KEYS = {
+  [GENERAL_ROUTE]: 'general',
+  [ADVANCED_ROUTE]: 'advanced',
+  [SECURITY_ROUTE]: 'securityAndPrivacy',
+  [ABOUT_US_ROUTE]: 'aboutUs',
+}
 
 export default class SettingsPage extends PureComponent {
   static propTypes = {
@@ -17,38 +36,102 @@ export default class SettingsPage extends PureComponent {
     t: PropTypes.func,
   }
 
+  isCurrentPath (pathname) {
+    return this.props.location.pathname === pathname
+  }
+
   render () {
+    const { t } = this.context
     const { history, location } = this.props
 
+    const pathnameI18nKey = ROUTES_TO_I18N_KEYS[location.pathname]
+    const isPopupView = getEnvironmentType(location.href) === ENVIRONMENT_TYPE_POPUP
+
     return (
-      <div className="main-container settings-page">
+      <div
+        className={c('main-container settings-page', {
+          'settings-page--selected': !this.isCurrentPath(SETTINGS_ROUTE),
+        })}
+      >
         <div className="settings-page__header">
+          {
+            !this.isCurrentPath(SETTINGS_ROUTE) && (
+              <div
+                className="settings-page__back-button"
+                onClick={() => history.push(SETTINGS_ROUTE)}
+              />
+            )
+          }
+          <div className="settings-page__header__title">
+            {t(pathnameI18nKey && isPopupView ? pathnameI18nKey : 'settings')}
+          </div>
           <div
             className="settings-page__close-button"
             onClick={() => history.push(DEFAULT_ROUTE)}
           />
-          <TabBar
-            tabs={[
-              { content: this.context.t('settings'), key: SETTINGS_ROUTE },
-              { content: this.context.t('info'), key: INFO_ROUTE },
-            ]}
-            isActive={key => matchPath(location.pathname, { path: key, exact: true })}
-            onSelect={key => history.push(key)}
-          />
         </div>
-        <Switch>
-          <Route
-            exact
-            path={INFO_ROUTE}
-            component={InfoTab}
-          />
-          <Route
-            exact
-            path={SETTINGS_ROUTE}
-            component={SettingsTab}
-          />
-        </Switch>
+        <div className="settings-page__content">
+          <div className="settings-page__content__tabs">
+            { this.renderTabs() }
+          </div>
+          <div className="settings-page__content__modules">
+            { this.renderContent() }
+          </div>
+        </div>
       </div>
     )
   }
+
+  renderTabs () {
+    const { history, location } = this.props
+    const { t } = this.context
+
+    return (
+      <TabBar
+        tabs={[
+          { content: t('general'), description: t('generalSettingsDescription'), key: GENERAL_ROUTE },
+          { content: t('advanced'), description: t('advancedSettingsDescription'), key: ADVANCED_ROUTE },
+          { content: t('securityAndPrivacy'), description: t('securitySettingsDescription'), key: SECURITY_ROUTE },
+          { content: t('aboutUs'), key: ABOUT_US_ROUTE },
+        ]}
+        isActive={key => {
+          if (key === GENERAL_ROUTE && this.isCurrentPath(SETTINGS_ROUTE)) {
+            return true
+          }
+          return matchPath(location.pathname, { path: key, exact: true })
+        }}
+        onSelect={key => history.push(key)}
+      />
+    )
+  }
+
+  renderContent () {
+    return (
+      <Switch>
+        <Route
+          exact
+          path={GENERAL_ROUTE}
+          component={SettingsTab}
+        />
+        <Route
+          exact
+          path={ABOUT_US_ROUTE}
+          component={InfoTab}
+        />
+        <Route
+          exact
+          path={ADVANCED_ROUTE}
+          component={AdvancedTab}
+        />
+        <Route
+          exact
+          path={SECURITY_ROUTE}
+          component={SecurityTab}
+        />
+        <Route
+          component={SettingsTab}
+        />
+      </Switch>
+    )
+  }
 }