From 42cd0b69e76537022c7766cae430e496371818b6 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 30 Jun 2016 12:43:28 -0700 Subject: Implemt new account layout --- ui/app/account-detail.js | 37 ++++++++++++++++++++--------------- ui/app/components/eth-balance.js | 22 +++++++++++++++------ ui/app/components/transaction-list.js | 5 +++-- ui/app/css/fonts.css | 9 ++++++++- ui/app/css/index.css | 15 +++++++------- ui/app/util.js | 6 +++--- 6 files changed, 59 insertions(+), 35 deletions(-) (limited to 'ui/app') 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 } -- cgit