diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | ui/app/account-detail.js | 175 | ||||
| -rw-r--r-- | ui/app/components/eth-balance.js | 28 | ||||
| -rw-r--r-- | ui/app/components/transaction-list.js | 5 | ||||
| -rw-r--r-- | ui/app/css/fonts.css | 9 | ||||
| -rw-r--r-- | ui/app/css/index.css | 17 |
6 files changed, 146 insertions, 89 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 769a42825..c0c0bd424 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Current Master +- Implement new account design. - Added a network indicator mark in dropdown menu - Added network name next to network indicator - Add copy transaction hash button to completed transaction list items. diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 02a807dbb..aae1d434f 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -44,116 +44,138 @@ 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, + marginTop: '15px', + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'flex-start', }, }, [ - // large identicon - h('.identicon-wrapper.flex-column.flex-center.select-none', [ + // large identicon and addresses + h('.identicon-wrapper.select-none', [ h(Identicon, { diameter: 62, address: selected, }), ]), - ]), - - h('.flex-center', { - style: { - height: '62px', - paddingTop: '8px', - }, - }, [ - h(EditableLabel, { - textValue: identity ? identity.name : '', - state: { - isEditingLabel: false, - }, - saveText: (text) => { - props.dispatch(actions.saveAccountLabel(selected, text)) + h('flex-column', { + style: { + lineHeight: '10px', + marginLeft: '15px', }, }, [ + h(EditableLabel, { + textValue: identity ? identity.name : '', + state: { + isEditingLabel: false, + }, + saveText: (text) => { + props.dispatch(actions.saveAccountLabel(selected, text)) + }, + }, [ - // What is shown when not editing + edit text: - h('label.editing-label', [h('.edit-text', 'edit')]), - h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name), - ]), - ]), + // What is shown when not editing + edit text: + h('label.editing-label', [h('.edit-text', 'edit')]), + h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name), + ]), + h('.flex-row', { + style: { + width: '15em', + justifyContent: 'space-between', + alignItems: 'baseline', + }, + }, [ - // address and getter actions - h('.flex-row', { - style: { - marginBottom: 16, - }, - }, [ + // address - h('div', { - style: { - overflow: 'hidden', - textOverflow: 'ellipsis', - paddingTop: '3px', - }, - }, ethUtil.toChecksumAddress(selected)), + h('div', { + style: { + overflow: 'hidden', + textOverflow: 'ellipsis', + paddingTop: '3px', + width: '5em', + fontSize: '13px', + fontFamily: 'Montserrat Thin', + textRendering: 'geometricPrecision', + marginTop: '10px', + marginBottom: '15px', + color: '#AEAEAE', + }, + }, ethUtil.toChecksumAddress(selected)), - h(CopyButton, { - value: ethUtil.toChecksumAddress(selected), - }), + // copy and export - h(Tooltip, { - title: 'Export Private Key', - }, [ - h('div', { + h('.flex-row', { + style: { + justifyContent: 'flex-end', + }, + }, [ + h(CopyButton, { + value: ethUtil.toChecksumAddress(selected), + }), + + h(Tooltip, { + title: 'Export Private Key', + }, [ + h('div', { + style: { + margin: '5px', + }, + }, [ + h('img.cursor-pointer.color-orange', { + src: 'images/key-32.png', + onClick: () => this.requestAccountExport(selected), + style: { + margin: '0px 5px', + width: '20px', + height: '20px', + }, + }), + ]), + ]), + ]), + ]), + + // account ballence + + h('.flex-row', { style: { - margin: '5px', + justifyContent: 'space-between', + alignItems: 'flex-start', }, }, [ - h('img.cursor-pointer.color-orange', { - src: 'images/key-32.png', - onClick: () => this.requestAccountExport(selected), + + h(EtherBalance, { + value: account && account.balance, style: { - margin: '0px 5px', - width: '20px', - height: '20px', - position: 'relative', - top: '3px', - right: '4px', + lineHeight: '7px', }, }), - ]), - ]), - - ]), - // balance + send - h('.flex-row.flex-space-between', [ - - h(EtherBalance, { - value: account && account.balance, - style: { - lineHeight: '50px', - }, - }), + h('button', { + onClick: () => props.dispatch(actions.showSendPage()), + style: { + marginBottom: '20px', + marginRight: '8px', + }, + }, 'SEND'), - h('button', { - onClick: () => props.dispatch(actions.showSendPage()), - style: { - margin: 10, - }, - }, 'SEND'), + ]), + ]), ]), - ]), // subview (tx history, pk export confirm) @@ -214,4 +236,3 @@ AccountDetailScreen.prototype.transactionList = function () { AccountDetailScreen.prototype.requestAccountExport = function () { this.props.dispatch(actions.requestExportAccount()) } - diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 710d4fc8b..c7240ea21 100644 --- a/ui/app/components/eth-balance.js +++ b/ui/app/components/eth-balance.js @@ -24,8 +24,34 @@ EthBalanceComponent.prototype.render = function () { style: { display: 'inline', }, - }, value), + }, this.renderBalance(value)), ]) ) } +EthBalanceComponent.prototype.renderBalance = function (value) { + + if (value === 'None') return value + + var balance = value.split(' ')[0] + var label = value.split(' ')[1] + + return ( + h('.flex-column', { + style: { + alignItems: 'flex-end', + lineHeight: '13px', + fontFamily: 'Montserrat Thin', + textRendering: 'geometricPrecision', + }, + }, [ + h('div', balance), + 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 fc10e56b6..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; @@ -387,19 +388,19 @@ input.large-input { } .name-label{ - margin-bottom: 14px; + } .edit-text { height: 100%; 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 { |