Merge pull request #258 from MetaMask/uiFixes

fix #213

3 files changed, 97 insertions, 34 deletions

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