diff options
Diffstat (limited to 'ui/app')
| -rw-r--r-- | ui/app/app.js | 2 | ||||
| -rw-r--r-- | ui/app/components/account-menu/index.js | 6 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/settings.scss | 59 | ||||
| -rw-r--r-- | ui/app/settings.js | 112 |
4 files changed, 173 insertions, 6 deletions
diff --git a/ui/app/app.js b/ui/app/app.js index 31d11b4e0..7264c79c7 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -448,7 +448,7 @@ App.prototype.renderPrimary = function () { case 'info': log.debug('rendering info screen') - return h(InfoScreen, {key: 'info'}) + return h(Settings, {key: 'info', tab: 'info'}) case 'buyEth': log.debug('rendering buy ether screen') diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index e0f38ae78..38c7bcb2d 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -46,6 +46,10 @@ function mapDispatchToProps (dispatch) { dispatch(actions.showImportPage()) dispatch(actions.toggleAccountMenu()) }, + showInfoPage: () => { + dispatch(actions.showInfoPage()) + dispatch(actions.toggleAccountMenu()) + }, } } @@ -57,6 +61,7 @@ AccountMenu.prototype.render = function () { showImportPage, lockMetamask, showConfigPage, + showInfoPage, } = this.props return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [ @@ -84,6 +89,7 @@ AccountMenu.prototype.render = function () { }), h(Divider), h(Item, { + onClick: showInfoPage, icon: h('img', { src: 'images/mm-info-icon.svg' }), text: 'Info & Help', }), diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss index d37a9d10d..2f29d8017 100644 --- a/ui/app/css/itcss/components/settings.scss +++ b/ui/app/css/itcss/components/settings.scss @@ -54,6 +54,10 @@ height: initial; padding: 5px 0; } + + &--without-height { + height: initial; + } } .settings__content-item-col { @@ -140,3 +144,58 @@ border: 1px solid $monzo; color: $monzo; } + +.settings__info-logo-wrapper { + height: 80px; + margin-bottom: 20px; +} + +.settings__info-logo { + max-height: 100%; + max-width: 100%; +} + +.settings__info-item { + padding: 10px 0; +} + +.settings__info-link-header { + padding-bottom: 15px; + + @media screen and (max-width: 575px) { + padding-bottom: 5px; + } +} + +.settings__info-link-item { + padding: 15px 0; + + @media screen and (max-width: 575px) { + padding: 5px 0; + } +} + +.settings__info-version-number { + padding-top: 5px; + font-size: 13px; + color: $dusty-gray; +} + +.settings__info-about { + color: $dusty-gray; + margin-bottom: 15px; +} + +.settings__info-link { + color: $curious-blue; +} + +.settings__info-separator { + margin: 15px 0; + width: 80px; + border-color: $alto; + border: none; + height: 1px; + background-color: $alto; + color: $alto; +} diff --git a/ui/app/settings.js b/ui/app/settings.js index b6fae7707..786a70e7e 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -1,4 +1,5 @@ const { Component } = require('react') +const PropTypes = require('prop-types') const h = require('react-hyperscript') const { connect } = require('react-redux') const actions = require('./actions') @@ -23,22 +24,28 @@ const getInfuraCurrencyOptions = () => { } class Settings extends Component { - constructor (args) { - super(args) + constructor (props) { + super(props) + + const { tab } = props + const activeTab = tab === 'info' ? 'info' : 'settings' + this.state = { - activeTab: 'settings', + activeTab, newRpc: '', } } renderTabs () { + const { activeTab } = this.state + return h('div.settings__tabs', [ h(TabBar, { tabs: [ { content: 'Settings', key: 'settings' }, { content: 'Info', key: 'info' }, ], - defaultTab: 'settings', + defaultTab: activeTab, tabSelected: key => this.setState({ activeTab: key }), }), ]) @@ -216,8 +223,92 @@ class Settings extends Component { ) } - renderInfoContent () { + renderLogo () { + return ( + h('div.settings__info-logo-wrapper', [ + h('img.settings__info-logo', { src: 'images/info-logo.png' }), + ]) + ) + } + renderInfoLinks () { + return ( + h('div.settings__content-item.settings__content-item--without-height', [ + h('div.settings__info-link-header', 'Links'), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/privacy.html', + target: '_blank', + }, [ + h('span.settings__info-link', 'Privacy Policy'), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/terms.html', + target: '_blank', + }, [ + h('span.settings__info-link', 'Terms of Use'), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/attributions.html', + target: '_blank', + }, [ + h('span.settings__info-link', 'Attributions'), + ]), + ]), + h('hr.settings__info-separator'), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://support.metamask.io', + target: '_blank', + }, [ + h('span.settings__info-link', 'Visit our Support Center'), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/', + target: '_blank', + }, [ + h('span.settings__info-link', 'Visit our web site'), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + target: '_blank', + href: 'mailto:help@metamask.io?subject=Feedback', + }, [ + h('span.settings__info-link', 'Email us!'), + ]), + ]), + ]) + ) + } + + renderInfoContent () { + return ( + h('div.settings__content', [ + h('div.settings__content-row', [ + h('div.settings__content-item.settings__content-item--without-height', [ + this.renderLogo(), + h('div.settings__info-item', [ + h('div.settings__info-version-header', 'MetaMask Version'), + h('div.settings__info-version-number', '4.0.0'), + ]), + h('div.settings__info-item', [ + h( + 'div.settings__info-about', + 'MetaMask is designed and built in California.' + ), + ]), + ]), + this.renderInfoLinks(), + ]), + ]) + ) } render () { @@ -241,6 +332,17 @@ class Settings extends Component { } } +Settings.propTypes = { + tab: PropTypes.string, + metamask: PropTypes.object, + setCurrentCurrency: PropTypes.func, + setRpcTarget: PropTypes.func, + displayWarning: PropTypes.func, + revealSeedConfirmation: PropTypes.func, + warning: PropTypes.string, + goHome: PropTypes.func, +} + const mapStateToProps = state => { return { metamask: state.metamask, |