Add subheader to all settings subviews (#6502)

* Add subheader to all settings subviews

* add margin right to subheader

2 files changed, 39 insertions, 5 deletions

diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss
index 52208dc85..a19105bb4 100644
--- a/ui/app/pages/settings/index.scss
+++ b/ui/app/pages/settings/index.scss
@@ -22,6 +22,17 @@
     }
   }
 
+  &__subheader {
+    padding: 16px 4px;
+    font-size: 20px;
+    border-bottom: 1px solid $alto;
+    margin-right: 24px;
+
+    @media screen and (max-width: 575px) {
+      display: none;
+    }
+  }
+
   &__back-button {
     display: none;
 
@@ -58,9 +69,15 @@
       flex: 1 1 auto;
 
       @media screen and (min-width: 576px) {
-        flex: 0 0 32%;
+        flex: 0 0 40%;
         max-width: 210px;
-        border-right: 1px solid $alto;
+        padding-top: 8px;
+      }
+
+      .tab-bar__tab {
+        @media screen and (min-width: 576px) {
+          padding: 16px 24px 0;
+        }
       }
     }
 
@@ -76,6 +93,10 @@
 
   &__body {
     padding: 12px 24px;
+
+    @media screen and (min-width: 576px) {
+      padding: 12px;
+    }
   }
 
   &__content-row {
@@ -89,7 +110,6 @@
     min-width: 0;
     display: flex;
     flex-direction: column;
-    padding: 0 5px;
     min-height: 71px;
 
     @media screen and (max-width: 575px) {
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index 061e65060..fe799a6e8 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Switch, Route, matchPath } from 'react-router-dom'
+import { Switch, Route, matchPath, withRouter } 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'
@@ -25,7 +25,7 @@ const ROUTES_TO_I18N_KEYS = {
   [ABOUT_US_ROUTE]: 'about',
 }
 
-export default class SettingsPage extends PureComponent {
+class SettingsPage extends PureComponent {
   static propTypes = {
     location: PropTypes.object,
     history: PropTypes.object,
@@ -75,6 +75,7 @@ export default class SettingsPage extends PureComponent {
             { this.renderTabs() }
           </div>
           <div className="settings-page__content__modules">
+            { this.renderSubHeader() }
             { this.renderContent() }
           </div>
         </div>
@@ -82,6 +83,17 @@ export default class SettingsPage extends PureComponent {
     )
   }
 
+  renderSubHeader () {
+    const { t } = this.context
+    const { location: { pathname } } = this.props
+
+    return (
+      <div className="settings-page__subheader">
+        {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')}
+      </div>
+    )
+  }
+
   renderTabs () {
     const { history, location } = this.props
     const { t } = this.context
@@ -135,3 +147,5 @@ export default class SettingsPage extends PureComponent {
     )
   }
 }
+
+export default withRouter(SettingsPage)