From 1cab8c0d2c6f59925d1ef29254ff60b5f546b37c Mon Sep 17 00:00:00 2001 From: Victor Baranov Date: Wed, 8 Aug 2018 00:28:23 +0300 Subject: [PATCH] buy view header update --- old-ui/app/account-detail.js | 13 ++--- old-ui/app/components/account-dropdowns.js | 2 +- old-ui/app/components/account-panel.js | 29 +++++---- old-ui/app/components/buy-button-subview.js | 65 ++++++++++----------- old-ui/app/components/custom-radio-list.js | 14 ++--- old-ui/app/components/pending-tx.js | 2 +- old-ui/app/css/index.css | 15 +++-- old-ui/app/send.js | 2 +- 8 files changed, 69 insertions(+), 73 deletions(-) diff --git a/old-ui/app/account-detail.js b/old-ui/app/account-detail.js index 4a2dfcf85..601d8cb5b 100644 --- a/old-ui/app/account-detail.js +++ b/old-ui/app/account-detail.js @@ -56,16 +56,16 @@ AccountDetailScreen.prototype.render = function () { // identicon, label, balance, etc h('.account-data-subsection', { style: { - padding: '0 20px', + padding: '30px', flex: '1 0 auto', background: 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))', + width: '100%', }, }, [ // header - identicon + nav h('div', { style: { - paddingTop: '20px', display: 'flex', justifyContent: 'flex-start', alignItems: 'flex-start', @@ -82,7 +82,7 @@ AccountDetailScreen.prototype.render = function () { h('flex-column', { style: { lineHeight: '10px', - marginLeft: '15px', + marginLeft: '20px', width: '100%', }, }, [ @@ -134,7 +134,7 @@ AccountDetailScreen.prototype.render = function () { AccountDropdowns, { style: { - marginRight: '-7px', + marginRight: '10px', marginLeft: 'auto', cursor: 'pointer', }, @@ -191,7 +191,6 @@ AccountDetailScreen.prototype.render = function () { network, style: { lineHeight: '7px', - marginTop: '10px', }, }), @@ -204,10 +203,6 @@ AccountDetailScreen.prototype.render = function () { h('button', { onClick: () => props.dispatch(actions.showSendPage()), - style: { - marginBottom: '20px', - marginRight: '8px', - }, }, 'Send'), ]), diff --git a/old-ui/app/components/account-dropdowns.js b/old-ui/app/components/account-dropdowns.js index df7016716..a102ef169 100644 --- a/old-ui/app/components/account-dropdowns.js +++ b/old-ui/app/components/account-dropdowns.js @@ -186,7 +186,7 @@ class AccountDropdowns extends Component { Dropdown, { style: { - marginLeft: '-237px', + marginLeft: '-233px', minWidth: '180px', marginTop: '30px', }, diff --git a/old-ui/app/components/account-panel.js b/old-ui/app/components/account-panel.js index 53284772e..db3c901e9 100644 --- a/old-ui/app/components/account-panel.js +++ b/old-ui/app/components/account-panel.js @@ -25,7 +25,7 @@ AccountPanel.prototype.render = function () { identiconLabel: identity.name || '', attributes: [ { - key: 'ADDRESS', + key: 'Address', value: addressSummary(identity.address), }, balanceOrFaucetingIndication(account, isFauceting, state.network), @@ -37,7 +37,7 @@ AccountPanel.prototype.render = function () { h('.identity-panel.flex-row.flex-space-between', { style: { background: 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))', - padding: '20px 20px', + padding: '30px', flex: '1 0 auto', cursor: panelState.onClick ? 'pointer' : undefined, }, @@ -49,29 +49,34 @@ AccountPanel.prototype.render = function () { h(Identicon, { address: panelState.identiconKey, imageify: state.imageifyIdenticons, + diameter: 60, }), - h('span.font-small', { - style: { - color: '#ffffff', - }, - }, panelState.identiconLabel.substring(0, 7) + '...'), ]), // account address, balance h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ - - panelState.attributes.map((attr) => { + h('h2.font-medium', { + style: { + color: '#ffffff', + marginBottom: '20px', + lineHeight: '16px', + }, + }, panelState.identiconLabel), + panelState.attributes.map((attr, i) => { return h('.flex-row.flex-space-between', { key: '' + Math.round(Math.random() * 1000000), }, [ - h('label.font-small.no-select', { + h('label.font-pre-medium.no-select', { style: { color: '#ffffff', + marginBottom: i === 0 ? '10px' : '0px', + lineHeight: '14px', }, }, attr.key), - h('span.font-small', { + h('span.font-pre-medium', { style: { color: '#ffffff', + lineHeight: '14px', }, }, attr.value), ]) @@ -93,7 +98,7 @@ function balanceOrFaucetingIndication (account, isFauceting, network) { } } else { return { - key: 'BALANCE', + key: 'Balance', value: formatBalance(account.balance, undefined, undefined, network), } } diff --git a/old-ui/app/components/buy-button-subview.js b/old-ui/app/components/buy-button-subview.js index b2ad8a5b4..3c540b774 100644 --- a/old-ui/app/components/buy-button-subview.js +++ b/old-ui/app/components/buy-button-subview.js @@ -58,31 +58,6 @@ BuyButtonSubview.prototype.headerSubview = function () { }, }, [ - // header bar (back button, label) - h('.flex-row.section-title', { - style: { - alignItems: 'center', - justifyContent: 'center', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: this.backButtonContext.bind(this), - style: { - position: 'absolute', - left: '30px', - }, - }), - h('h2.flex-center', { - style: { - width: '100vw', - background: '#ffffff', - color: '#333333', - paddingTop: '4px', - paddingBottom: '4px', - }, - }, `Buy ${coinName}`), - ]), - // loading indication h('div', { style: { @@ -108,20 +83,46 @@ BuyButtonSubview.prototype.headerSubview = function () { }), ]), - h('.flex-row', { + // header bar (back button, label) + h('.flex-row.section-title', { style: { alignItems: 'center', justifyContent: 'center', }, }, [ - h('h3.flex-center', { + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { + onClick: this.backButtonContext.bind(this), + style: { + position: 'absolute', + left: '30px', + }, + }), + h('h2.flex-center', { style: { width: '100vw', background: '#ffffff', color: '#333333', - paddingTop: '30px', + paddingTop: '4px', paddingBottom: '4px', }, + }, `Buy ${coinName}`), + ]), + + h('.flex-row', { + style: { + alignItems: 'center', + width: '100%', + }, + }, [ + h('h3.flex-center', { + style: { + width: '100%', + background: '#ffffff', + color: '#333333', + paddingBottom: '4px', + paddingLeft: '30px', + justifyContent: 'left', + }, }, 'Select Service'), ]), @@ -206,16 +207,12 @@ BuyButtonSubview.prototype.mainnetSubview = function () { return ( - h('.flex-column', { - style: { - alignItems: 'center', - }, - }, [ + h('.flex-column', [ h('.flex-row.selected-exchange', { style: { position: 'relative', - right: '35px', + marginLeft: '30px', marginTop: '20px', marginBottom: '20px', }, diff --git a/old-ui/app/components/custom-radio-list.js b/old-ui/app/components/custom-radio-list.js index a4c525396..9863323ed 100644 --- a/old-ui/app/components/custom-radio-list.js +++ b/old-ui/app/components/custom-radio-list.js @@ -30,11 +30,11 @@ RadioList.prototype.render = function () { marginRight: '5px', }, }, - labels.map((lable, i) => { + labels.map((label, i) => { let isSelcted = (this.state !== null) - isSelcted = isSelcted ? (this.state.selected === lable) : (defaultFocus === lable) + isSelcted = isSelcted ? (this.state.selected === label) : (defaultFocus === label) return h(isSelcted ? activeClass : inactiveClass, { - title: lable, + title: label, onClick: (event) => { this.setState({selected: event.target.title}) props.onClick(event) @@ -43,14 +43,14 @@ RadioList.prototype.render = function () { }) ), h('.text', {}, - labels.map((lable) => { + labels.map((label) => { if (props.subtext) { return h('.flex-row', {}, [ - h('.radio-titles', lable), - h('.radio-titles-subtext', `- ${props.subtext[lable]}`), + h('.radio-titles.font-pre-medium', label), + h('.radio-titles-subtext', `- ${props.subtext[label]}`), ]) } else { - return h('.radio-titles', lable) + return h('.radio-titles.font-pre-medium', label) } }) ), diff --git a/old-ui/app/components/pending-tx.js b/old-ui/app/components/pending-tx.js index 62c1f2536..c76490ea9 100644 --- a/old-ui/app/components/pending-tx.js +++ b/old-ui/app/components/pending-tx.js @@ -641,7 +641,7 @@ function forwardCarrat () { h('img', { src: 'images/forward-carrat-light.svg', style: { - padding: '5px 30px 0px 30px', + padding: '0px 20px 0px', height: '62px', }, }) diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css index 379e29dca..e5be28f08 100644 --- a/old-ui/app/css/index.css +++ b/old-ui/app/css/index.css @@ -632,7 +632,6 @@ input.large-input { display: flex; justify-content: flex-start; margin-left: 50px; - margin-bottom: 2px; font-size: 11px; text-rendering: geometricPrecision; color: #60db97; @@ -693,13 +692,13 @@ input.large-input { .custom-radio-selected { - width: 17px; - height: 17px; + width: 18px; + height: 18px; border: solid; border-style: double; - border-radius: 15px; + border-radius: 4px; border-width: 5px; - background: #8fdc97; + background: #6729a8; border-color: #F7F7F7; } @@ -708,12 +707,12 @@ input.large-input { height: 14px; border: solid; border-width: 1px; - border-radius: 24px; - border-color: #AEAEAE; + border-radius: 4px; + border-color: #e2e2e2; } .radio-titles { - color: #8fdc97; + color: #6729a8; } .radio-titles-subtext { diff --git a/old-ui/app/send.js b/old-ui/app/send.js index f758a8886..9d4bc3b92 100644 --- a/old-ui/app/send.js +++ b/old-ui/app/send.js @@ -65,7 +65,7 @@ SendTransactionScreen.prototype.render = function () { h('.account-data-subsection.flex-row.flex-grow', { style: { background: 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))', - padding: '20px 20px', + padding: '30px', }, }, [