diff --git a/CHANGELOG.md b/CHANGELOG.md index 7763e5211..fa7149e9d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Current Master +- Style up the info page - Cache identicon images to optimize for long lists of transactions. ## 2.3.0 2016-06-06 diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 2ee7c4094..c33753888 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -423,3 +423,23 @@ input.large-input { .ether-balance-label { color: #ABA9AA; } + +/* Info screen */ +.info-gray{ + font-family: 'Transat Medium'; + text-transform: uppercase; + color: #AEAEAE; +} + +.icon-size{ + width: 20px; +} + +.info{ + font-family: 'Transat Standard', Arial; + font-weight: bolder; + padding-bottom: 10px; + display: inline-block; + padding-left: 5px; +} + diff --git a/ui/app/info.js b/ui/app/info.js index 7e6516222..b69e006d5 100644 --- a/ui/app/info.js +++ b/ui/app/info.js @@ -18,7 +18,7 @@ function InfoScreen() { InfoScreen.prototype.render = function() { var state = this.props var rpc = state.rpc - + var manifest = chrome.runtime.getManifest(); return ( h('.flex-column.flex-grow', [ @@ -39,50 +39,92 @@ InfoScreen.prototype.render = function() { padding: '20px', } }, [ + //current version number - h('div', [ - h('a', { - href: 'http://slack.metamask.io', - target: '_blank', - onClick(event) { this.navigateTo(event.target.href) }, - }, 'Join the conversation on Slack'), + h('.info.info-gray',[ + h('div','Metamask'), + h('div', { + style: { + marginBottom: '10px', + } + },`Version: ${manifest.version}`), ]), - h('div', [ - h('a', { - href: 'https://metamask.io/', - target: '_blank', - onClick(event) { this.navigateTo(event.target.href) }, - }, 'Visit our web site'), - ]), + h('hr',{ + style: { + margin:'20px 0 ', + width: '7em', + } + }), - h('div', [ - h('a', { - href: 'https://twitter.com/metamask_io', - target: '_blank', - onClick(event) { this.navigateTo(event.target.href) }, - }, 'Follow us on Twitter'), - ]), - h('div', [ - h('a', { - href: 'mailto:hello@metamask.io?subject=Feedback', - target: '_blank', - }, 'Email us any questions or comments!'), - ]), + h('.info',{ + style: { + marginBottom: '20px', + }}, + `For more information on MetaMask + you can visit our web site. If you want to + contact us with questions or just + say 'Hi', you can find us on theise platforms:`), - h('div', [ - h('a', { - href: 'https://github.com/metamask/talk/issues', - target: '_blank', - onClick(event) { this.navigateTo(event.target.href) }, - }, 'Start a thread on Github'), - ]), + h('div',{ + style: { + paddingLeft: '30px', + }}, + [ + h('div', [ + h('a', { + href: 'https://metamask.io/', + target: '_blank', + onClick(event) { this.navigateTo(event.target.href) }, + },[ + h('img.icon-size', { + src: manifest.icons[128] + }), + h('div.info',{ + style: { + fontWeight: 800, + } + },'Visit our web site') + ]) + ]), + h('div.fa.fa-slack', [ + h('a.info', { + href: 'http://slack.metamask.io', + target: '_blank', + onClick(event) { this.navigateTo(event.target.href) }, + }, 'Join the conversation on Slack'), + ]), + + h('div.fa.fa-twitter', [ + h('a.info', { + href: 'https://twitter.com/metamask_io', + target: '_blank', + onClick(event) { this.navigateTo(event.target.href) }, + }, 'Follow us on Twitter'), + ]), + + h('div.fa.fa-envelope', [ + h('a.info', { + href: 'mailto:hello@metamask.io?subject=Feedback', + target: '_blank', + }, 'Email us any questions or comments!'), + ]), + + h('div.fa.fa-github', [ + h('a.info', { + href: 'https://github.com/metamask/talk/issues', + target: '_blank', + onClick(event) { this.navigateTo(event.target.href) }, + }, 'Start a thread on Github'), + ]), + ]), ]), ]), ]) ) + } InfoScreen.prototype.navigateTo = function(url) {