m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add subheader to all settings subviews (#6502)

Browse Source 
* Add subheader to all settings subviews

* add margin right to subheader
This commit is contained in:
Chi Kei Chan 2019-04-28 23:18:03 -07:00 committed by Dan J Miller
parent 39b7145423
commit 0095889408
2 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ui/app/pages/settings/index.scss
View File

@ -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 { &__back-button {
display: none; display: none;
@ -58,9 +69,15 @@
flex: 1 1 auto; flex: 1 1 auto;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
flex: 0 0 32%; flex: 0 0 40%;
max-width: 210px; 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 { &__body {
padding: 12px 24px; padding: 12px 24px;
@media screen and (min-width: 576px) {
padding: 12px;
}
} }
&__content-row { &__content-row {
@ -89,7 +110,6 @@
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 5px;
min-height: 71px; min-height: 71px;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {

18
ui/app/pages/settings/settings.component.js
View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' 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 { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
import { getEnvironmentType } from '../../../../app/scripts/lib/util' import { getEnvironmentType } from '../../../../app/scripts/lib/util'
import TabBar from '../../components/app/tab-bar' import TabBar from '../../components/app/tab-bar'
@ -25,7 +25,7 @@ const ROUTES_TO_I18N_KEYS = {
[ABOUT_US_ROUTE]: 'about', [ABOUT_US_ROUTE]: 'about',
} }
export default class SettingsPage extends PureComponent { class SettingsPage extends PureComponent {
static propTypes = { static propTypes = {
location: PropTypes.object, location: PropTypes.object,
history: PropTypes.object, history: PropTypes.object,
@ -75,6 +75,7 @@ export default class SettingsPage extends PureComponent {
{ this.renderTabs() } { this.renderTabs() }
</div> </div>
<div className="settings-page__content__modules"> <div className="settings-page__content__modules">
{ this.renderSubHeader() }
{ this.renderContent() } { this.renderContent() }
</div> </div>
</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 () { renderTabs () {
const { history, location } = this.props const { history, location } = this.props
const { t } = this.context const { t } = this.context
@ -135,3 +147,5 @@ export default class SettingsPage extends PureComponent {
) )
} }
} }
export default withRouter(SettingsPage)