aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/app.js2
-rw-r--r--ui/app/components/account-menu/index.js6
-rw-r--r--ui/app/css/itcss/components/settings.scss59
-rw-r--r--ui/app/settings.js112
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,