WIP: Working on new layout

ui/app/account-detail.js

@@ -44,35 +44,36 @@ AccountDetailScreen.prototype.render = function () {
 
   return (
 
-    h('.account-detail-section.flex-column.flex-grow', [
+    h('.account-detail-section', [
 
       // identicon, label, balance, etc
-      h('.account-data-subsection.flex-column.flex-grow', {
+      h('.account-data-subsection', {
         style: {
           margin: '0 20px',
         },
       }, [
 
         // header - identicon + nav
-        h('.flex-row.flex-center', {
+        h('div', {
           style: {
             marginTop: 28,
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
           },
         }, [
 
-          // large identicon
+          // large identicon and addresses
-          h('.identicon-wrapper.flex-column.flex-center.select-none', [
+          h('.identicon-wrapper.select-none', [
             h(Identicon, {
               diameter: 62,
               address: selected,
             }),
           ]),
-        ]),
+          h('flex-column', {
-
-        h('.flex-center', {
             style: {
-            height: '62px',
+              lineHeight: '10px',
-            paddingTop: '8px',
+              marginLeft: '15px',
             },
           }, [
             h(EditableLabel, {
@@ -89,23 +90,29 @@ AccountDetailScreen.prototype.render = function () {
               h('label.editing-label', [h('.edit-text', 'edit')]),
               h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
             ]),
-        ]),
-
-        // address and getter actions
             h('.flex-row',{
               style:{
-            marginBottom: 16,
+                width: '15em',
-          },
+                justifyContent: 'space-between',
+                alignItems: 'baseline',
+              }
             },[
-
               h('div', {
                 style: {
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   paddingTop: '3px',
+                  width: '5em',
+                  fontSize: 'smaller',
                 },
               }, ethUtil.toChecksumAddress(selected)),
 
+
+              h('.flex-row', {
+                style: {
+                  justifyContent: 'flex-end',
+                },
+              }, [
                 h(CopyButton, {
                   value: ethUtil.toChecksumAddress(selected),
                 }),
@@ -132,16 +139,19 @@ AccountDetailScreen.prototype.render = function () {
                     }),
                   ]),
                 ]),
-
               ]),
-
+            ]),
-        // balance + send
+            h('.flex-row', {
-        h('.flex-row.flex-space-between', [
+              style: {
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+              }
+            }, [
 
               h(EtherBalance, {
                 value: account && account.balance,
                 style: {
-              lineHeight: '50px',
+                  lineHeight: '7px',
                 },
               }),
 
@@ -155,6 +165,13 @@ AccountDetailScreen.prototype.render = function () {
             ]),
 
           ]),
+        ]),
+
+        // address and getter actions
+
+        // balance + send
+
+      ]),
 
       // subview (tx history, pk export confirm)
       h(ReactCSSTransitionGroup, {
@@ -214,4 +231,3 @@ AccountDetailScreen.prototype.transactionList = function () {
 AccountDetailScreen.prototype.requestAccountExport = function () {
   this.props.dispatch(actions.requestExportAccount())
 }
-

ui/app/components/eth-balance.js

@@ -24,8 +24,24 @@ EthBalanceComponent.prototype.render = function () {
         style: {
           display: 'inline',
         },
-      }, value),
+      }, this.renderBalance(value)),
     ])
 
   )
 }
+
+EthBalanceComponent.prototype.renderBalance = function (value) {
+
+  if (value === 'None') return value
+
+  var balance = value[0]
+  var label = value[1]
+
+  return (
+    h('.flex-column',[
+      h('div', balance),
+      h('div', label)
+    ])
+  )
+
+}

ui/app/css/index.css

@@ -387,7 +387,7 @@ input.large-input {
 
 }
 .name-label{
-  margin-bottom: 14px;
+
 }
 .edit-text {
   height: 100%;

ui/app/util.js

@@ -105,14 +105,14 @@ function formatBalance (balance, decimalsToKeep) {
       if (afterDecimal !== '0') {
         var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits
         if (sigFigs) { afterDecimal = sigFigs[0] }
-        formatted = '0.' + afterDecimal + ' ETH'
+        formatted = ['0.' + afterDecimal, ' ETH']
       }
     } else {
-      formatted = beforeDecimal + '.' + afterDecimal.slice(0, 3) + ' ETH'
+      formatted = [beforeDecimal + '.' + afterDecimal.slice(0, 3), ' ETH']
     }
   } else {
     afterDecimal += Array(decimalsToKeep).join('0')
-    formatted = beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep) + ' ETH'
+    formatted = [beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep), ' ETH']
   }
   return formatted
 }