m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00
Code

Add rounded background to total token, with minor styling tweaks

Browse Source
This commit is contained in:
sdtsui 2017-07-29 22:44:39 -07:00
parent 4880ee26d5
commit 689f60d1ce
4 changed files with 180 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
ui/app/components/pending-tx.js
View File

@ -25,17 +25,6 @@ const MIN_GAS_LIMIT_BN = new BN(21000)
const Identicon = require('./identicon')
const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
module.exports = PendingTx
inherits(PendingTx, Component)
function PendingTx () {
Component.call(this)
this.state = {
valid: true,
txData: null,
submitting: false,
}
}
// Next: create separate react components
// roughly 5 components:
// heroIcon
@ -48,7 +37,7 @@ const sectionDivider = h('div', {
height:'1px',
background:'#E7E7E7',
},
}),
})
const contentDivider = h('div', {
style: {
@ -59,6 +48,16 @@ const contentDivider = h('div', {
},
})
module.exports = PendingTx
inherits(PendingTx, Component)
function PendingTx () {
Component.call(this)
this.state = {
valid: true,
txData: null,
submitting: false,
}
}
PendingTx.prototype.render = function () {
const props = this.props
@ -175,7 +174,6 @@ PendingTx.prototype.render = function () {
sectionDivider,
h('section.flex-row.flex-center', {
}, [
h('div', {
style: {
@ -216,27 +214,179 @@ PendingTx.prototype.render = function () {
contentDivider,
h('section.flex-row.flex-center', {
}, [
h('div', {
style: {
width: '50%',
}
}, [
h('span', {
style: {
textAlign: 'left',
fontSize: '12px',
}
}, [
'To'
])
]),
h('div', {
style: {
width: '50%',
}
},[
h('div', {
style: {
textAlign: 'left',
fontSize: '10px',
marginBottom: '-10px',
},
}, 'Ethereum Address'),
h('div', {
style: {
textAlign: 'left',
fontSize: '8px',
},
}, '...5924')
])
]),
contentDivider,
h('section.flex-row.flex-center', {
}, [
h('div', {
style: {
width: '50%',
}
}, [
h('span', {
style: {
textAlign: 'left',
fontSize: '12px',
}
}, [
'Gas Fee'
])
]),
h('div', {
style: {
width: '50%',
}
},[
h('div', {
style: {
textAlign: 'left',
fontSize: '10px',
marginBottom: '-10px',
},
}, '$0.04 USD'),
h('div', {
style: {
textAlign: 'left',
fontSize: '8px',
},
}, '0.001575 ETH')
])
]),
contentDivider,
h('section.flex-row.flex-center', {
style: {
backgroundColor: '#F6F6F6', // $wild-sand
borderRadius: '8px',
marginLeft: '10px',
marginRight: '10px',
paddingLeft: '6px',
paddingRight: '6px',
}
}, [
h('div', {
style: {
width: '50%',
}
}, [
h('div', {
style: {
textAlign: 'left',
fontSize: '12px',
}
}, [
'Total Tokens'
]),
h('div', {
style: {
textAlign: 'left',
fontSize: '8px',
}
}, [
'Total Gas'
])
]),
h('div', {
style: {
width: '50%',
}
},[
h('div', {
style: {
textAlign: 'left',
fontSize: '10px',
marginBottom: '-10px',
},
}, '0.24 ANT (127.00 USD)'),
h('div', {
style: {
textAlign: 'left',
fontSize: '8px',
},
}, '0.249 ETH')
])
]),
sectionDivider,
h('form#pending-tx-form', {
onSubmit: this.onSubmit.bind(this),
}, [
// Reset Button
h('button', {
onClick: (event) => {
this.resetGasFields()
event.preventDefault()
},
}, 'Reset'),
// h('button', {
// onClick: (event) => {
// this.resetGasFields()
// event.preventDefault()
// },
// }, 'Reset'),
// Accept Button
h('input.confirm.btn-green', {
type: 'submit',
value: 'SUBMIT',
style: { marginLeft: '10px' },
style: {
color: '#FFFFFF',
fontSize: '12px',
lineHeight: '20px',
textAlign: 'center',
},
disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
}),
// Cancel Button
h('button.cancel.btn-red', {
h('button.cancel.btn-light', {
style: {
background: '#F7F7F7', // $alabaster
border: 'none',
opacity: 1,
width: '8em',
},
onClick: props.cancelTransaction,
}, 'Reject'),
]),

3
ui/app/css/colors.css
View File

@ -1,3 +1,4 @@
$gallery: #EFEFEF;
$alabaster: #F7F7F7;
$shark: #22232C;
$shark: #22232C;
$wild-sand: #F6F6F6;

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

@ -85,10 +85,10 @@ input:focus, textarea:focus {
// box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
// }
// .btn-green, input[type="submit"].btn-green {
// background: rgba(106, 195, 96, 1);
// box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
// }
.btn-green, input[type="submit"].btn-green {
border-radius: 2px;
background-color: #02C9B1;
}
// .btn-red {
// background: rgba(254, 35, 17, 1);
@ -139,7 +139,7 @@ button.primary {
text-transform: uppercase;
}
button.light {
.btn-light {
padding: 8px 12px;
// background: #FFFFFF; // $bg-white
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);

4
ui/app/send.js
View File

@ -272,7 +272,7 @@ SendTransactionScreen.prototype.render = function () {
// Buttons underneath card
h('section.flex-column.flex-center', [
h('button.light', {
h('button.btn-light', {
onClick: this.onSubmit.bind(this),
style: {
marginTop: '8px',
@ -281,7 +281,7 @@ SendTransactionScreen.prototype.render = function () {
},
}, 'Next'),
h('button.light', {
h('button.btn-light', {
onClick: this.back.bind(this),
style: {
background: '#F7F7F7', // $alabaster