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

Center send token content; hook up 'Next' and 'Cancel' buttons

Browse Source
This commit is contained in:
sdtsui 2017-07-29 18:54:21 -07:00
parent fec3e64d63
commit 9709881679
3 changed files with 210 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/app/app.js
View File

@ -172,15 +172,17 @@ App.prototype.renderAppBar = function () {
]), ]),
]), ]),
h('.app-header', { // extra app-header space
style: {
visibility: props.isUnlocked ? 'visible' : 'none', // h('.app-header', {
background: '#EFEFEF', // $gallery // style: {
height: '38px', // visibility: props.isUnlocked ? 'visible' : 'none',
position: 'relative', // background: '#EFEFEF', // $gallery
zIndex: 12, // height: '38px',
}, // position: 'relative',
}) // zIndex: 12,
// },
// })
]) ])
) )
} }

6
ui/app/css/index.css
View File

@ -489,12 +489,8 @@ input.large-input {
/* Send Screen */ /* Send Screen */
.send-screen {
}
.send-screen section { .send-screen section {
margin: 8px 16px; margin: 4px 16px;
} }
.send-screen input { .send-screen input {

58
ui/app/send.js
View File

@ -59,11 +59,19 @@ SendTransactionScreen.prototype.render = function () {
return ( return (
h('.send-screen.flex-column.flex-grow', { h('div.flex-column.flex-grow', {
style: {
// overflow: 'scroll',
minWidth: '355px', // TODO: maxWidth TBD, use home.html
},
}, [
// Main Send token Card
h('div.send-screen.flex-column.flex-grow', {
style: { style: {
background: '#FFFFFF', // $background-white
marginLeft: '3.5%', marginLeft: '3.5%',
marginRight: '3.5%', marginRight: '3.5%',
background: '#FFFFFF', // $background-white
} }
}, [ }, [
h('section.flex-center.flex-row', { h('section.flex-center.flex-row', {
@ -85,7 +93,7 @@ SendTransactionScreen.prototype.render = function () {
h('h3.flex-center', { h('h3.flex-center', {
style: { style: {
marginTop: '-15px', marginTop: '-15px',
fontSize: '20px', fontSize: '16px',
}, },
}, [ }, [
'Send Tokens', 'Send Tokens',
@ -94,7 +102,7 @@ SendTransactionScreen.prototype.render = function () {
h('h3.flex-center', { h('h3.flex-center', {
style: { style: {
textAlign: 'center', textAlign: 'center',
fontSize: '16px', fontSize: '12px',
}, },
}, [ }, [
'Send Tokens to anyone with an Ethereum account', 'Send Tokens to anyone with an Ethereum account',
@ -103,7 +111,7 @@ SendTransactionScreen.prototype.render = function () {
h('h3.flex-center', { h('h3.flex-center', {
style: { style: {
textAlign: 'center', textAlign: 'center',
fontSize: '16px', fontSize: '12px',
}, },
}, [ }, [
'Your Aragon Token Balance is:', 'Your Aragon Token Balance is:',
@ -112,7 +120,7 @@ SendTransactionScreen.prototype.render = function () {
h('h3.flex-center', { h('h3.flex-center', {
style: { style: {
textAlign: 'center', textAlign: 'center',
fontSize: '43px', fontSize: '36px',
}, },
}, [ }, [
'2.34', '2.34',
@ -121,7 +129,7 @@ SendTransactionScreen.prototype.render = function () {
h('h3.flex-center', { h('h3.flex-center', {
style: { style: {
textAlign: 'center', textAlign: 'center',
fontSize: '16px', fontSize: '12px',
}, },
}, [ }, [
'ANT', 'ANT',
@ -131,7 +139,11 @@ SendTransactionScreen.prototype.render = function () {
props.error && h('span.error.flex-center', props.error), props.error && h('span.error.flex-center', props.error),
// 'to' field // 'to' field
h('section.flex-row.flex-center', [ h('section.flex-row.flex-center', {
style: {
fontSize: '12px',
},
}, [
h(EnsInput, { h(EnsInput, {
name: 'address', name: 'address',
placeholder: 'Recipient Address', placeholder: 'Recipient Address',
@ -147,6 +159,7 @@ SendTransactionScreen.prototype.render = function () {
h('div.flex-row.flex-center', { h('div.flex-row.flex-center', {
style: { style: {
fontSize: '12px',
width: '100%', width: '100%',
justifyContent: 'space-between', justifyContent: 'space-between',
} }
@ -161,6 +174,7 @@ SendTransactionScreen.prototype.render = function () {
type: 'number', type: 'number',
style: { style: {
marginRight: '6px', marginRight: '6px',
fontSize: '12px',
}, },
dataset: { dataset: {
persistentFormId: 'tx-amount', persistentFormId: 'tx-amount',
@ -173,12 +187,13 @@ SendTransactionScreen.prototype.render = function () {
h('div.flex-row.flex-center', { h('div.flex-row.flex-center', {
style: { style: {
fontSize: '12px',
width: '100%', width: '100%',
justifyContent: 'space-between', justifyContent: 'space-between',
} }
},[ },[
h('span', { style: {} }, ['Gas Fee:']), h('span', { style: {} }, ['Gas Fee:']),
h('span', { style: {} }, ['What\'s this?']), h('span', { style: { fontSize: '8px' } }, ['What\'s this?']),
]), ]),
h('input.large-input', { h('input.large-input', {
@ -186,6 +201,7 @@ SendTransactionScreen.prototype.render = function () {
placeholder: '0', placeholder: '0',
type: 'number', type: 'number',
style: { style: {
fontSize: '12px',
marginRight: '6px', marginRight: '6px',
}, },
// dataset: { // dataset: {
@ -203,12 +219,13 @@ SendTransactionScreen.prototype.render = function () {
h('div.flex-row.flex-center', { h('div.flex-row.flex-center', {
style: { style: {
fontSize: '12px',
width: '100%', width: '100%',
justifyContent: 'flex-start', justifyContent: 'flex-start',
} }
},[ },[
h('span', { style: {} }, ['Transaction Memo (optional)']), h('span', { style: {} }, ['Transaction Memo (optional)']),
h('span', { style: {} }, ['What\'s this?']), h('span', { style: { fontSize: '8px' } }, ['What\'s this?']),
]), ]),
h('input.large-input', { h('input.large-input', {
@ -219,11 +236,8 @@ SendTransactionScreen.prototype.render = function () {
marginRight: '6px', marginRight: '6px',
}, },
}), }),
]), ]),
// h('h3.flex-center.text-transform-uppercase', { // h('h3.flex-center.text-transform-uppercase', {
// style: { // style: {
// background: '#EBEBEB', // background: '#EBEBEB',
@ -249,7 +263,25 @@ SendTransactionScreen.prototype.render = function () {
// }, // },
// }), // }),
// ]), // ]),
]),
// Buttons underneath card
h('button.primary', {
onClick: this.onSubmit.bind(this),
style: {
textTransform: 'uppercase',
},
}, 'Next'),
h('button.primary', {
onClick: this.back.bind(this),
style: {
textTransform: 'uppercase',
},
}, 'Cancel'),
]) ])
) )
} }