ui - redesign - account details

ui/app/account-detail.js

@@ -5,9 +5,12 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('./actions')
+const addressSummary = require('./util').addressSummary
+const formatBalance = require('./util').formatBalance
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 
 const AccountPanel = require('./components/account-panel')
+const Identicon = require('./components/identicon')
 const transactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 
@@ -41,49 +44,80 @@ AccountDetailScreen.prototype.render = function() {
 
     h('.account-detail-section.flex-column.flex-grow', {
       style: {
-        width: '330px',
+        width: 330,
+        'margin-top': 28,
       },
     }, [
 
-      // subtitle and nav
-      h('.section-title.flex-row.flex-center', [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+      h('.flex-row.flex-space-between', [
+
+        // invisible placeholder for later
+        h('i.fa.fa-users.fa-lg.color-orange', {
+          style: {
+            visibility: 'hidden',
+          },
+        }),
+
+        // large identicon
+        h('.identicon-wrapper.flex-column.flex-center.select-none', [
+          h(Identicon, {
+            diameter: 62,
+            address: account.address
+          }),
+        ]),
+
+        // small accounts nav
+        h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', {
           onClick: this.navigateToAccounts.bind(this),
         }),
-        h('h2.page-subtitle', 'Account Detail'),
+
       ]),
 
-      // account summary, with embedded action buttons
-      h(AccountPanel, {
-        showFullAddress: true,
-        identity: identity,
-        account: account,
-        key: 'accountPanel'
-      }),
-
-      h('div', {
+      h('h2.font-medium.color-forest.flex-center', {
         style: {
-          display: 'flex',
-        }
+          'padding-top': 8,
+          'margin-bottom': 32,
+        },
+      }, identity && identity.name),
+
+      h('.flex-row.flex-space-between', {
+        style: {
+          'margin-bottom': 16,
+        },
       }, [
 
-        h('button', {
-          onClick: () => {
-            copyToClipboard(identity.address)
+        h('div', {
+          style: {
+            'line-height': 16,
           },
-        }, 'COPY ADDR'),
+        }, addressSummary(account.address)),
+
+        h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', {
+          onClick: () => this.requestAccountExport(account.address),
+        }),
+
+        h('i.fa.fa-qrcode.fa-md.cursor-disabled.color-orange', {
+          onClick: () => console.warn('QRCode not implented...'),
+        }),
+
+        h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
+          onClick: () => copyToClipboard(account.address),
+        }),
+
+      ]),
+
+      h('.flex-row.flex-space-between', [
+
+        h('div', {
+          style: {
+            'line-height': 50,
+          },
+        }, formatBalance(account.balance)),
 
         h('button', {
-          onClick: () => {
-            this.props.dispatch(actions.showSendPage())
-          },
-        }, 'SEND'),
+          onClick: () => this.props.dispatch(actions.showSendPage()),
+        }, 'SEND ETH'),
 
-        h('button', {
-          onClick: () => {
-            this.requestAccountExport(identity.address)
-          },
-        }, 'EXPORT'),
       ]),
 
       h(ReactCSSTransitionGroup, {
@@ -93,12 +127,7 @@ AccountDetailScreen.prototype.render = function() {
       }, [
         this.subview(),
       ]),
-      // transaction table
-      /*
-      h('section.flex-column', [
-        h('span', 'your transaction history will go here.'),
-      ]),
-      */
+
     ])
   )
 }

ui/app/components/identicon.js

@@ -10,18 +10,20 @@ inherits(IdenticonComponent, Component)
 function IdenticonComponent() {
   Component.call(this)
 
-  this.diameter = 46
+  this.defaultDiameter = 46
 }
 
 IdenticonComponent.prototype.render = function() {
+  var state = this.props
+  var diameter = state.diameter || this.defaultDiameter
   return (
     h('div', {
       key: 'identicon-' + this.props.address,
       style: {
         display: 'inline-block',
-        height: this.diameter,
-        width: this.diameter,
-        borderRadius: this.diameter / 2,
+        height: diameter,
+        width: diameter,
+        borderRadius: diameter / 2,
         overflow: 'hidden',
       },
     })
@@ -33,12 +35,12 @@ IdenticonComponent.prototype.componentDidMount = function(){
   var address = state.address
 
   if (!address) return
-    console.log('rendering for address ' + address)
   var numericRepresentation = jsNumberForAddress(address)
 
   var container = findDOMNode(this)
   // jazzicon with hack to fix inline svg error
-  var identicon = jazzicon(this.diameter, numericRepresentation)
+  var diameter = state.diameter || this.defaultDiameter
+  var identicon = jazzicon(diameter, numericRepresentation)
   var identiconSrc = identicon.innerHTML
   var dataUri = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(identiconSrc)
   var img = document.createElement('img')

ui/app/css/index.css

@@ -28,18 +28,18 @@ html, body {
 }
 
 button {
+  font-family: 'Transat Black';
   outline: none;
   cursor: pointer;
   margin: 10px;
-  padding: 6px;
+  padding: 8px 12px;
   border: none;
-  border-radius: 3px;
   background: #F7861C;
-  font-weight: 500;
   color: white;
   transform-origin: center center;
   transition: transform 50ms ease-in;
 }
+
 button:hover {
   transform: scale(1.1);
 }

ui/app/css/lib.css

@@ -1,3 +1,13 @@
+/* color */
+
+.color-orange {
+  color: #F7861C;
+}
+
+.color-forest {
+  color: #08525D; 
+}
+
 /* lib */
 
 .full-width {
@@ -47,6 +57,10 @@
   flex: none;
 }
 
+.flex-basis-auto {
+  flex-basis: auto;
+}
+
 .flex-grow {
   flex: 1 1 auto;
 }
@@ -105,6 +119,10 @@
   transform: scale(0.95);
 }
 
+.cursor-disabled {
+  cursor: not-allowed;
+}
+
 .margin-bottom-sml {
   margin-bottom: 20px;
 }
@@ -125,6 +143,10 @@
   font-size: 12px;
 }
 
+.font-medium {
+  font-size: 1.2em;
+}
+
 /* Send Screen */
 .send-screen {
   margin: 0 20px;