From 702dc3b21630846afda7688dd6cb0cad376ef50f Mon Sep 17 00:00:00 2001 From: Frankie Date: Tue, 7 Jun 2016 16:50:46 -0400 Subject: Add icons to left side of links, as well as the metmask version and styling --- ui/app/info.js | 110 +++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 76 insertions(+), 34 deletions(-) diff --git a/ui/app/info.js b/ui/app/info.js index 7e6516222..8c43c5aa7 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: '25px', + }}, + [ + h('div', [ + h('a.info', { + href: 'https://metamask.io/', + target: '_blank', + onClick(event) { this.navigateTo(event.target.href) }, + },[ + h('img.icon-size', { + src: manifest.icons[128] + }), + h('.info',{ + style: { + display: 'inherit', + } + },'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) { -- cgit From e9407777cc6f44a87a4c34e07562f278d66a48c4 Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 8 Jun 2016 15:13:45 -0400 Subject: Style up the info screen --- CHANGELOG.md | 2 +- ui/app/css/index.css | 18 ++++++++++++++++++ ui/app/info.js | 4 ++-- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64200fe6d..6ca97eea5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ # Changelog ## Current Master - +- Style up the info page - Show network status in title bar - Added seed word recovery to config screen. - Clicking network status indicator now reveals a provider menu. diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 2ee7c4094..c6624fbae 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -423,3 +423,21 @@ 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; +} + diff --git a/ui/app/info.js b/ui/app/info.js index 8c43c5aa7..03f00a027 100644 --- a/ui/app/info.js +++ b/ui/app/info.js @@ -62,10 +62,10 @@ InfoScreen.prototype.render = function() { style: { marginBottom: '20px', }}, - `For more information on Metamask + `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:`), + say 'Hi', you can find us on theise platforms:`), h('div',{ style: { -- cgit From 1987296af0aec096dfbb1622505d54aa8e56ad01 Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 8 Jun 2016 19:08:55 -0400 Subject: Add spacing in line items --- ui/app/css/index.css | 2 ++ ui/app/info.js | 8 ++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/ui/app/css/index.css b/ui/app/css/index.css index c6624fbae..c33753888 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -439,5 +439,7 @@ input.large-input { 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 03f00a027..b69e006d5 100644 --- a/ui/app/info.js +++ b/ui/app/info.js @@ -69,11 +69,11 @@ InfoScreen.prototype.render = function() { h('div',{ style: { - paddingLeft: '25px', + paddingLeft: '30px', }}, [ h('div', [ - h('a.info', { + h('a', { href: 'https://metamask.io/', target: '_blank', onClick(event) { this.navigateTo(event.target.href) }, @@ -81,9 +81,9 @@ InfoScreen.prototype.render = function() { h('img.icon-size', { src: manifest.icons[128] }), - h('.info',{ + h('div.info',{ style: { - display: 'inherit', + fontWeight: 800, } },'Visit our web site') ]) -- cgit