ui - redesign - app header + accounts selection

gulpfile.js

@@ -30,6 +30,10 @@ gulp.task('copy:images', copyTask({
   source: './app/images/',
   destination: './dist/images',
 }))
+gulp.task('copy:fonts', copyTask({
+  source: './app/fonts/',
+  destination: './dist/fonts',
+}))
 gulp.task('copy:reload', copyTask({
   source: './app/scripts/',
   destination: './dist/scripts',
@@ -40,7 +44,7 @@ gulp.task('copy:root', copyTask({
   destination: './dist',
   pattern: '/*',
 }))
-gulp.task('copy',  gulp.parallel('copy:locales','copy:images','copy:reload','copy:root'))
+gulp.task('copy',  gulp.parallel('copy:locales','copy:images','copy:fonts','copy:reload','copy:root'))
 gulp.task('copy:watch', function(){
   gulp.watch(['./app/{_locales,images}/', './app/scripts/chromereload.js', './app/*.{html,json}'], gulp.series('copy'))
 })

ui/app/accounts.js

@@ -3,9 +3,12 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const extend = require('xtend')
+const Identicon = require('identicon.js')
 const actions = require('./actions')
 const AccountPanel = require('./components/account-panel')
 const valuesFor = require('./util').valuesFor
+const addressSummary = require('./util').addressSummary
+const formatBalance = require('./util').formatBalance
 
 module.exports = connect(mapStateToProps)(AccountsScreen)
 
@@ -40,24 +43,14 @@ AccountsScreen.prototype.render = function() {
 
       // subtitle and nav
       h('.section-title.flex-column.flex-center', [
-        h('h2.page-subtitle', 'Accounts'),
+        h('h2.page-subtitle', 'Select Account'),
       ]),
 
-      // current domain
+      h('hr.horizontal-line'),
-      /* AUDIT
-       * Temporarily removed
-       * since accounts are currently injected
-       * regardless of the current domain.
-       */
-      h('.current-domain-panel.flex-center.font-small', [
-        h('span', 'Selected address is visible to all sites you visit.'),
-        // h('span', state.currentDomain),
-      ]),
 
       // identity selection
       h('section.identity-section.flex-column', {
         style: {
-          maxHeight: '290px',
           overflowY: 'auto',
           overflowX: 'hidden',
         }
@@ -94,7 +87,46 @@ AccountsScreen.prototype.render = function() {
       isSelected: false,
       isFauceting: isFauceting,
     })
-    return h(AccountPanel, componentState)
+    // return h(AccountPanel, componentState)
+
+    // var identity = state.identity || {}
+    // var account = state.account || {}
+    // var isFauceting = state.isFauceting
+
+    var identicon = new Identicon(identity.address, 46).toString()
+    var identiconSrc = `data:image/png;base64,${identicon}`
+
+    return (
+      h('.accounts-list-option.flex-row.flex-space-between', {
+        style: {
+          flex: '1 0 auto',
+          background: isSelected ? 'white' : 'none',
+        },
+        // onClick: state.onClick,
+      }, [
+
+        // account identicon
+        h('.identicon-wrapper.flex-column.flex-center.select-none', [
+          h('img.identicon', {
+            src: identiconSrc,
+            style: {
+              border: 'none',
+              borderRadius: '20px',
+            }
+          }),
+        ]),
+
+        // account address, balance
+        h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+          h('span', identity.name),
+          h('span.font-small', addressSummary(identity.address)),
+          h('span.font-small', formatBalance(account.balance)),
+
+        ]),
+
+      ])
+    )
   }
 }
 

ui/app/app.js

@@ -73,9 +73,15 @@ App.prototype.render = function() {
       h(LoadingIndicator),
 
       // top row
-      h('.app-header.flex-column.flex-center', {
+      h('.app-header.flex-row.flex-space-between', {
       }, [
+        h('img', {
+          height: 24,
+          width: 24,
+          src: '/images/icon-128.png',
+        }),
         h('h1', 'MetaMask'),
+        h('i.fa.fa-bars'),
       ]),
 
       // panel content
@@ -115,19 +121,19 @@ App.prototype.render = function() {
           },
         }),
 
-        // toggle
+        // // toggle
-        onOffToggle({
+        // onOffToggle({
-          toggleMetamaskActive: this.toggleMetamaskActive.bind(this),
+        //   toggleMetamaskActive: this.toggleMetamaskActive.bind(this),
-          isUnlocked: state.isUnlocked,
+        //   isUnlocked: state.isUnlocked,
-        }),
+        // }),
 
-        // help
+        // // help
-        h('i.fa.fa-question.fa-lg.cursor-pointer', {
+        // h('i.fa.fa-question.fa-lg.cursor-pointer', {
-          style: {
+        //   style: {
-            opacity: state.isUnlocked ? '1.0' : '0.0',
+        //     opacity: state.isUnlocked ? '1.0' : '0.0',
-          },
+        //   },
-          onClick() { state.dispatch(actions.showInfoPage()) }
+        //   onClick() { state.dispatch(actions.showInfoPage()) }
-        }),
+        // }),
       ]),
     ])
   )

ui/app/css/fonts.css

@@ -1,2 +1,46 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto:300,500);
-@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
+
+@font-face {
+  font-family: 'Transat Standard';
+  src: url('/fonts/Transat Standard/transat_standard-webfont.eot');
+  src: url('/fonts/Transat Standard/transat_standard-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/Transat Standard/transat_standard-webfont.woff') format('woff'),
+       url('/fonts/Transat Standard/transat_standard-webfont.ttf') format('truetype'),
+       url('/fonts/Transat Standard/transat_standard-webfont.svg#ywftsvg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Transat Black';
+  src: url('/fonts/Transat Black/transat_black-webfont.eot');
+  src: url('/fonts/Transat Black/transat_black-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/Transat Black/transat_black-webfont.woff') format('woff'),
+       url('/fonts/Transat Black/transat_black-webfont.ttf') format('truetype'),
+       url('/fonts/Transat Black/transat_black-webfont.svg#ywftsvg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Transat Medium';
+  src: url('/fonts/Transat Medium/transat_medium-webfont.eot');
+  src: url('/fonts/Transat Medium/transat_medium-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/Transat Medium/transat_medium-webfont.woff') format('woff'),
+       url('/fonts/Transat Medium/transat_medium-webfont.ttf') format('truetype'),
+       url('/fonts/Transat Medium/transat_medium-webfont.svg#ywftsvg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Transat Light';
+  src: url('/fonts/Transat Light/transat_light-webfont.eot');
+  src: url('/fonts/Transat Light/transat_light-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/Transat Light/transat_light-webfont.woff') format('woff'),
+       url('/fonts/Transat Light/transat_light-webfont.ttf') format('truetype'),
+       url('/fonts/Transat Light/transat_light-webfont.svg#ywftsvg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}

ui/app/css/index.css

@@ -14,8 +14,7 @@ application specific styles
 }
 
 html, body {
-  /*font-family: 'Open Sans', Arial, sans-serif;*/
+  font-family: 'Transat Standard', Arial;
-  font-family: 'Roboto', 'Noto', sans-serif;
   color: #4D4D4D;
   font-weight: 300;
   line-height: 1.4em;
@@ -98,23 +97,25 @@ button.btn-thin {
 }
 
 .app-header {
-  padding-top: 20px;
+  padding: 6px 8px;
 }
 
 .app-header h1 {
-  font-size: 2em;
+  font-family: 'Transat Medium';
-  font-weight: 300;
+  text-transform: uppercase;
-  height: 42px;
+  color: #AEAEAE;
 }
 
 h2.page-subtitle {
+  font-family: 'Transat Light';
+  text-transform: uppercase;
+  color: #AEAEAE;
   font-size: 1em;
-  font-weight: 500;
+  margin: 12px;
-  height: 24px;
-  color: #F3C83E;
 }
 
 .app-primary {
+  background: #F7F7F7;
 }
 
 .app-footer {
@@ -238,11 +239,19 @@ app sections
 /* accounts */
 
 .accounts-section {
-  margin: 0 20px;
+  margin: 0 0px;
 }
 
-.current-domain-panel {
+.accounts-section .horizontal-line {
-  border: 1px solid #B7B7B7;
+  margin: 0px 18px;
+}
+
+.accounts-list-option {
+  height: 120px;
+}
+
+.accounts-list-option .identicon-wrapper {
+  width: 100px;
 }
 
 .unconftx-link {
@@ -289,8 +298,7 @@ app sections
 /* accounts screen */
 
 .identity-section {
-  border: 2px solid #4D4D4D;
+
-  margin: 0;
 }
 
 .identity-section .identity-panel {

ui/app/css/lib.css

@@ -141,3 +141,12 @@
 .send-screen section input {
   width: 100%;
 }
+
+hr.horizontal-line {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0;
+}