mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
Add rounded background to total token, with minor styling tweaks
This commit is contained in:
parent
4880ee26d5
commit
689f60d1ce
@ -25,17 +25,6 @@ const MIN_GAS_LIMIT_BN = new BN(21000)
|
|||||||
const Identicon = require('./identicon')
|
const Identicon = require('./identicon')
|
||||||
const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
|
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
|
// Next: create separate react components
|
||||||
// roughly 5 components:
|
// roughly 5 components:
|
||||||
// heroIcon
|
// heroIcon
|
||||||
@ -48,7 +37,7 @@ const sectionDivider = h('div', {
|
|||||||
height:'1px',
|
height:'1px',
|
||||||
background:'#E7E7E7',
|
background:'#E7E7E7',
|
||||||
},
|
},
|
||||||
}),
|
})
|
||||||
|
|
||||||
const contentDivider = h('div', {
|
const contentDivider = h('div', {
|
||||||
style: {
|
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 () {
|
PendingTx.prototype.render = function () {
|
||||||
const props = this.props
|
const props = this.props
|
||||||
@ -175,7 +174,6 @@ PendingTx.prototype.render = function () {
|
|||||||
sectionDivider,
|
sectionDivider,
|
||||||
|
|
||||||
h('section.flex-row.flex-center', {
|
h('section.flex-row.flex-center', {
|
||||||
|
|
||||||
}, [
|
}, [
|
||||||
h('div', {
|
h('div', {
|
||||||
style: {
|
style: {
|
||||||
@ -216,27 +214,179 @@ PendingTx.prototype.render = function () {
|
|||||||
|
|
||||||
contentDivider,
|
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', {
|
h('form#pending-tx-form', {
|
||||||
onSubmit: this.onSubmit.bind(this),
|
onSubmit: this.onSubmit.bind(this),
|
||||||
}, [
|
}, [
|
||||||
// Reset Button
|
// Reset Button
|
||||||
h('button', {
|
// h('button', {
|
||||||
onClick: (event) => {
|
// onClick: (event) => {
|
||||||
this.resetGasFields()
|
// this.resetGasFields()
|
||||||
event.preventDefault()
|
// event.preventDefault()
|
||||||
},
|
// },
|
||||||
}, 'Reset'),
|
// }, 'Reset'),
|
||||||
|
|
||||||
// Accept Button
|
// Accept Button
|
||||||
h('input.confirm.btn-green', {
|
h('input.confirm.btn-green', {
|
||||||
type: 'submit',
|
type: 'submit',
|
||||||
value: 'SUBMIT',
|
value: 'SUBMIT',
|
||||||
style: { marginLeft: '10px' },
|
style: {
|
||||||
|
color: '#FFFFFF',
|
||||||
|
fontSize: '12px',
|
||||||
|
lineHeight: '20px',
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
|
disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
|
||||||
}),
|
}),
|
||||||
|
|
||||||
// Cancel Button
|
// 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,
|
onClick: props.cancelTransaction,
|
||||||
}, 'Reject'),
|
}, 'Reject'),
|
||||||
]),
|
]),
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
$gallery: #EFEFEF;
|
$gallery: #EFEFEF;
|
||||||
$alabaster: #F7F7F7;
|
$alabaster: #F7F7F7;
|
||||||
$shark: #22232C;
|
$shark: #22232C;
|
||||||
|
$wild-sand: #F6F6F6;
|
@ -85,10 +85,10 @@ input:focus, textarea:focus {
|
|||||||
// box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
// box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// .btn-green, input[type="submit"].btn-green {
|
.btn-green, input[type="submit"].btn-green {
|
||||||
// background: rgba(106, 195, 96, 1);
|
border-radius: 2px;
|
||||||
// box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
|
background-color: #02C9B1;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// .btn-red {
|
// .btn-red {
|
||||||
// background: rgba(254, 35, 17, 1);
|
// background: rgba(254, 35, 17, 1);
|
||||||
@ -139,7 +139,7 @@ button.primary {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.light {
|
.btn-light {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
// background: #FFFFFF; // $bg-white
|
// background: #FFFFFF; // $bg-white
|
||||||
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
|
||||||
|
@ -272,7 +272,7 @@ SendTransactionScreen.prototype.render = function () {
|
|||||||
// Buttons underneath card
|
// Buttons underneath card
|
||||||
h('section.flex-column.flex-center', [
|
h('section.flex-column.flex-center', [
|
||||||
|
|
||||||
h('button.light', {
|
h('button.btn-light', {
|
||||||
onClick: this.onSubmit.bind(this),
|
onClick: this.onSubmit.bind(this),
|
||||||
style: {
|
style: {
|
||||||
marginTop: '8px',
|
marginTop: '8px',
|
||||||
@ -281,7 +281,7 @@ SendTransactionScreen.prototype.render = function () {
|
|||||||
},
|
},
|
||||||
}, 'Next'),
|
}, 'Next'),
|
||||||
|
|
||||||
h('button.light', {
|
h('button.btn-light', {
|
||||||
onClick: this.back.bind(this),
|
onClick: this.back.bind(this),
|
||||||
style: {
|
style: {
|
||||||
background: '#F7F7F7', // $alabaster
|
background: '#F7F7F7', // $alabaster
|
||||||
|
Loading…
Reference in New Issue
Block a user