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() }
+ { this.renderSubHeader() } { this.renderContent() }
@@ -82,6 +83,17 @@ export default class SettingsPage extends PureComponent { ) } + renderSubHeader () { + const { t } = this.context + const { location: { pathname } } = this.props + + return ( +
+ {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')} +
+ ) + } + renderTabs () { const { history, location } = this.props const { t } = this.context @@ -135,3 +147,5 @@ export default class SettingsPage extends PureComponent { ) } } + +export default withRouter(SettingsPage)