buy view header update

This commit is contained in:
Victor Baranov 2018-08-08 00:28:23 +03:00
parent da90c99aa9
commit 1cab8c0d2c
8 changed files with 69 additions and 73 deletions

View File

@ -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'),
]),

View File

@ -186,7 +186,7 @@ class AccountDropdowns extends Component {
Dropdown,
{
style: {
marginLeft: '-237px',
marginLeft: '-233px',
minWidth: '180px',
marginTop: '30px',
},

View File

@ -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),
}
}

View File

@ -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',
},

View File

@ -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)
}
})
),

View File

@ -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',
},
})

View File

@ -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 {

View File

@ -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',
},
}, [