buy view header update
This commit is contained in:
parent
da90c99aa9
commit
1cab8c0d2c
|
@ -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'),
|
||||
|
||||
]),
|
||||
|
|
|
@ -186,7 +186,7 @@ class AccountDropdowns extends Component {
|
|||
Dropdown,
|
||||
{
|
||||
style: {
|
||||
marginLeft: '-237px',
|
||||
marginLeft: '-233px',
|
||||
minWidth: '180px',
|
||||
marginTop: '30px',
|
||||
},
|
||||
|
|
|
@ -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),
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
),
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
}, [
|
||||
|
||||
|
|
Loading…
Reference in New Issue