Add Info section

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')

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',
     }),

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;
+}

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,