Implemt new account layout

6 files changed, 59 insertions, 35 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index da9fc47fe..aae1d434f 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -56,7 +56,7 @@ AccountDetailScreen.prototype.render = function () {
         // header - identicon + nav
         h('div', {
           style: {
-            marginTop: 28,
+            marginTop: '15px',
             display: 'flex',
             justifyContent: 'flex-start',
             alignItems: 'flex-start',
@@ -90,23 +90,32 @@ AccountDetailScreen.prototype.render = function () {
               h('label.editing-label', [h('.edit-text', 'edit')]),
               h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
             ]),
-            h('.flex-row',{
-              style:{
+            h('.flex-row', {
+              style: {
                 width: '15em',
                 justifyContent: 'space-between',
                 alignItems: 'baseline',
-              }
-            },[
+              },
+            }, [
+
+              // address
+
               h('div', {
                 style: {
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   paddingTop: '3px',
                   width: '5em',
-                  fontSize: 'smaller',
+                  fontSize: '13px',
+                  fontFamily: 'Montserrat Thin',
+                  textRendering: 'geometricPrecision',
+                  marginTop: '10px',
+                  marginBottom: '15px',
+                  color: '#AEAEAE',
                 },
               }, ethUtil.toChecksumAddress(selected)),
 
+              // copy and export
 
               h('.flex-row', {
                 style: {
@@ -132,20 +141,20 @@ AccountDetailScreen.prototype.render = function () {
                         margin: '0px 5px',
                         width: '20px',
                         height: '20px',
-                        position: 'relative',
-                        top: '3px',
-                        right: '4px',
                       },
                     }),
                   ]),
                 ]),
               ]),
             ]),
+
+            // account ballence
+
             h('.flex-row', {
               style: {
                 justifyContent: 'space-between',
                 alignItems: 'flex-start',
-              }
+              },
             }, [
 
               h(EtherBalance, {
@@ -158,7 +167,8 @@ AccountDetailScreen.prototype.render = function () {
               h('button', {
                 onClick: () => props.dispatch(actions.showSendPage()),
                 style: {
-                  margin: 10,
+                  marginBottom: '20px',
+                  marginRight: '8px',
                 },
               }, 'SEND'),
 
@@ -166,11 +176,6 @@ AccountDetailScreen.prototype.render = function () {
 
           ]),
         ]),
-
-        // address and getter actions
-
-        // balance + send
-
       ]),
 
       // subview (tx history, pk export confirm)
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 279feba35..c7240ea21 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -29,19 +29,29 @@ EthBalanceComponent.prototype.render = function () {
 
   )
 }
-
 EthBalanceComponent.prototype.renderBalance = function (value) {
 
   if (value === 'None') return value
 
-  var balance = value[0]
-  var label = value[1]
+  var balance = value.split(' ')[0]
+  var label = value.split(' ')[1]
 
   return (
-    h('.flex-column',[
+    h('.flex-column', {
+      style: {
+        alignItems: 'flex-end',
+        lineHeight: '13px',
+        fontFamily: 'Montserrat Thin',
+        textRendering: 'geometricPrecision',
+      },
+    }, [
       h('div', balance),
-      h('div', label)
+      h('div', {
+        style: {
+          color: ' #AEAEAE',
+          fontSize: '12px',
+        },
+      }, label),
     ])
   )
-
 }
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index a1a5db475..886aa7c00 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -35,6 +35,8 @@ TransactionList.prototype.render = function () {
         style: {
           background: '#EBEBEB',
           color: '#AEAEAE',
+          paddingTop: '4px',
+          paddingBottom: '4px',
         },
       }, [
         'Transactions',
@@ -43,7 +45,7 @@ TransactionList.prototype.render = function () {
       h('.tx-list', {
         style: {
           overflowY: 'auto',
-          height: '204px',
+          height: '305px',
           padding: '0 20px',
           textAlign: 'center',
         },
@@ -67,4 +69,3 @@ TransactionList.prototype.render = function () {
     ])
   )
 }
-
diff --git a/ui/app/css/fonts.css b/ui/app/css/fonts.css
index e9473af55..da024ce84 100644
--- a/ui/app/css/fonts.css
+++ b/ui/app/css/fonts.css
@@ -7,7 +7,7 @@
     src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
-  font-size: 'small',
+  font-size: 'small';
 
 }
 
@@ -18,3 +18,10 @@
   font-weight: normal;
   font-style: normal;
 }
+
+@font-face {
+  font-family: 'Montserrat Thin';
+    src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
+    src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  text-rendering: geometricPrecision;
+}
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 27444ab6f..d8b84e8b6 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -153,6 +153,7 @@ textarea.twelve-word-phrase {
   top: 8px;
   width: 5.2em;
   line-height: 9px;
+  text-rendering: geometricPrecision;
 }
 
 .check {
@@ -248,7 +249,7 @@ app sections
 
 .sizing-input{
   font-size: 1em;
-  height: 31px;
+  height: 30px;
 }
 .editable-label{
   display: flex;
@@ -394,12 +395,12 @@ input.large-input {
   visibility: hidden;
 }
 .editing-label {
-  cursor: text;
-  width: 100%;
-  position: relative;
-  top: 7px;
-  text-align: right;
-  font-size: small;
+  display: flex;
+  justify-content: flex-start;
+  margin-left: 50px;
+  margin-bottom: 2px;
+  font-size: 11px;
+  text-rendering: geometricPrecision;
   color: #F7861C;
 }
 .name-label:hover .edit-text {
diff --git a/ui/app/util.js b/ui/app/util.js
index a88e659b4..db12a1282 100644
--- a/ui/app/util.js
+++ b/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
 }