m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

[WIP] - Styling Send Screen - Need to bring in data contract for signTx

Browse Source
This commit is contained in:
sdtsui 2017-08-22 09:03:42 -07:00
parent 5900cc8522
commit d1bc7111b5
2 changed files with 39 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/app/css/itcss/components/send.scss
View File

@ -16,6 +16,8 @@
.send-screen-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-left: 3.5%;
margin-right: 3.5%;
background: $white;
@ -32,3 +34,11 @@
width: 100%;
font-size: 12px;
}
.send-eth-icon {
border-radius: 25px;
width: 45px;
height: 45px;
border: 1px solid $alto;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
}

170
ui/app/send.js
View File

@ -67,75 +67,39 @@ SendTransactionScreen.prototype.render = function () {
h('div.send-screen-card', {
style: {}
}, [
h('section.flex-center.flex-row', {
style: {
zIndex: 15, // $token-icon-z-index
marginTop: '-35px',
}
}, [
h(Identicon, {
address: ARAGON,
diameter: 76,
}),
]),
h('h3.flex-center', {
style: {
marginTop: '-18px',
fontSize: '16px',
},
}, [
'Send Tokens',
]),
h('img.send-eth-icon', {
src: '../images/eth_logo.svg',
style: {},
}),
h('h3.flex-center', {
style: {
textAlign: 'center',
fontSize: '12px',
},
}, [
'Send Tokens to anyone with an Ethereum account',
]),
h('div', {}, [
'Send'
])
h('h3.flex-center', {
style: {
textAlign: 'center',
marginTop: '2px',
fontSize: '12px',
},
}, [
'Your Aragon Token Balance is:',
]),
h('div', {}, [
'Send Ethereum to anyone with an Ethereum account'
])
h('h3.flex-center', {
style: {
textAlign: 'center',
fontSize: '36px',
marginTop: '8px',
},
}, [
'2.34',
]),
h('div', {}, [
h('h3.flex-center', {
style: {
textAlign: 'center',
fontSize: '12px',
marginTop: '4px',
},
}, [
'ANT',
]),
h('div', {}, [
'From:'
]),
// error message
props.error && h('span.error.flex-center', props.error),
h('input', {
placeholder: '(Placeholder) - My Account 1 - 5924 - Available ETH 2.0'.
}, [
])
])
h('div', {}, [
h('div', {}, [
'To:'
]),
// 'to' field
h('section.flex-row.flex-center', {
style: {
fontSize: '12px',
},
}, [
h(EnsInput, {
name: 'address',
placeholder: 'Recipient Address',
@ -144,87 +108,11 @@ SendTransactionScreen.prototype.render = function () {
identities,
addressBook,
}),
]),
// 'amount' and send button
h('section.flex-column.flex-center', [
h('div.flex-row.flex-center', {
style: {
fontSize: '12px',
width: '100%',
justifyContent: 'space-between',
}
},[
h('span', { style: {} }, ['Amount']),
h('span', { style: {} }, ['Token <> USD']),
]),
])
h('input.large-input', {
name: 'amount',
placeholder: '0',
type: 'number',
style: {
marginRight: '6px',
fontSize: '12px',
},
dataset: {
persistentFormId: 'tx-amount',
},
}),
// [WIP] - Styling Send Screen - Need to bring in data contract for signTx
]),
h('section.flex-column.flex-center', [
h('div.flex-row.flex-center', {
style: {
fontSize: '12px',
width: '100%',
justifyContent: 'space-between',
}
},[
h('span', { style: {} }, ['Gas Fee:']),
h('span', { style: { fontSize: '8px' } }, ['What\'s this?']),
]),
h('input.large-input', {
name: 'Gas Fee',
placeholder: '0',
type: 'number',
style: {
fontSize: '12px',
marginRight: '6px',
},
// dataset: {
// persistentFormId: 'tx-amount',
// },
}),
]),
h('section.flex-column.flex-center', {
style: {
marginBottom: '10px',
},
}, [
h('div.flex-row.flex-center', {
style: {
fontSize: '12px',
width: '100%',
justifyContent: 'flex-start',
}
},[
h('span', { style: {} }, ['Transaction Memo (optional)']),
]),
h('input.large-input', {
name: 'memo',
placeholder: '',
type: 'string',
style: {
marginRight: '6px',
},
}),
]),
]),
// Buttons underneath card
@ -254,7 +142,7 @@ SendTransactionScreen.prototype.render = function () {
)
}
// WIP - hyperscript for renderSendToken - hook up later
// WIP - hyperscript for renderSendToken - hook up later - can take pieces to re-implement
SendTransactionScreen.prototype.renderSendToken = function () {
this.persistentFormParentId = 'send-tx-form'