mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
[New-UI] Confirm Screen restyle and connect to state (#2042)
* Adds utility for converting currencies (WIP) * Implements confirm screen * Style tweaks. * Confirm screen total ammount now uses real data. * Confirm screen total ammount now uses real data. * Replace content divider with sibling css. * Replace section divider with scss.
This commit is contained in:
Dan J Miller
Chi Kei Chan
parent
062e67bff8
commit
1e83835ba8
@ -1,23 +1,23 @@
|
||||
const Component = require('react').Component
|
||||
const { connect } = require('react-redux')
|
||||
const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const actions = require('../actions')
|
||||
const clone = require('clone')
|
||||
const FiatValue = require('./fiat-value')
|
||||
const Identicon = require('./identicon')
|
||||
const { setCurrentCurrency } = require('../actions')
|
||||
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
const BN = ethUtil.BN
|
||||
const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
|
||||
const util = require('../util')
|
||||
const { conversionUtil } = require('../conversion-util')
|
||||
|
||||
const MIN_GAS_PRICE_GWEI_BN = new BN(1)
|
||||
const GWEI_FACTOR = new BN(1e9)
|
||||
const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
|
||||
|
||||
|
||||
// Faked, for Icon
|
||||
const Identicon = require('./identicon')
|
||||
const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
|
||||
|
||||
// Next: create separate react components
|
||||
// roughly 5 components:
|
||||
// heroIcon
|
||||
@ -25,23 +25,27 @@ const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
|
||||
// divider
|
||||
// contentBox
|
||||
// actionButtons
|
||||
const sectionDivider = h('div', {
|
||||
style: {
|
||||
height: '1px',
|
||||
background: '#E7E7E7',
|
||||
},
|
||||
})
|
||||
|
||||
const contentDivider = h('div', {
|
||||
style: {
|
||||
marginLeft: '16px',
|
||||
marginRight: '16px',
|
||||
height: '1px',
|
||||
background: '#E7E7E7',
|
||||
},
|
||||
})
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(PendingTx)
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const {
|
||||
conversionRate,
|
||||
identities,
|
||||
} = state.metamask
|
||||
|
||||
return {
|
||||
conversionRate,
|
||||
identities,
|
||||
}
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return {
|
||||
setCurrentCurrencyToUSD: () => dispatch(setCurrentCurrency('USD'))
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = PendingTx
|
||||
inherits(PendingTx, Component)
|
||||
function PendingTx () {
|
||||
Component.call(this)
|
||||
@ -52,9 +56,13 @@ function PendingTx () {
|
||||
}
|
||||
}
|
||||
|
||||
PendingTx.prototype.componentWillMount = function () {
|
||||
this.props.setCurrentCurrencyToUSD()
|
||||
}
|
||||
|
||||
PendingTx.prototype.render = function () {
|
||||
const props = this.props
|
||||
const { blockGasLimit } = props
|
||||
const { blockGasLimit, conversionRate, identities } = props
|
||||
|
||||
const txMeta = this.gatherTxMeta()
|
||||
const txParams = txMeta.txParams || {}
|
||||
@ -76,16 +84,48 @@ PendingTx.prototype.render = function () {
|
||||
const gasPriceBn = hexToBn(gasPrice)
|
||||
|
||||
const txFeeBn = gasBn.mul(gasPriceBn)
|
||||
const valueBn = hexToBn(txParams.value)
|
||||
const maxCost = txFeeBn.add(valueBn)
|
||||
|
||||
const balanceBn = hexToBn(balance)
|
||||
const insufficientBalance = balanceBn.lt(maxCost)
|
||||
const amountBn = hexToBn(txParams.value)
|
||||
|
||||
// TODO: insufficient balance should be handled on send screen
|
||||
// const maxCost = txFeeBn.add(amountBn)
|
||||
// const balanceBn = hexToBn(balance)
|
||||
// const insufficientBalance = balanceBn.lt(maxCost)
|
||||
|
||||
const fromName = identities[txParams.from].name;
|
||||
const toName = identities[txParams.to].name;
|
||||
|
||||
const endOfFromAddress = txParams.from.slice(txParams.from.length - 4)
|
||||
const endOfToAddress = txParams.to.slice(txParams.to.length - 4)
|
||||
|
||||
const gasFeeInUSD = conversionUtil(txFeeBn, {
|
||||
fromFormat: 'BN',
|
||||
fromCurrency: 'GWEI',
|
||||
toCurrency: 'USD',
|
||||
conversionRate,
|
||||
})
|
||||
const gasFeeInETH = conversionUtil(txFeeBn, {
|
||||
fromFormat: 'BN',
|
||||
fromCurrency: 'GWEI',
|
||||
toCurrency: 'ETH',
|
||||
conversionRate,
|
||||
})
|
||||
|
||||
const totalInUSD = conversionUtil(amountBn, {
|
||||
fromFormat: 'BN',
|
||||
toCurrency: 'USD',
|
||||
conversionRate,
|
||||
})
|
||||
const totalInETH = conversionUtil(amountBn, {
|
||||
fromFormat: 'BN',
|
||||
toCurrency: 'ETH',
|
||||
conversionRate,
|
||||
})
|
||||
|
||||
this.inputs = []
|
||||
|
||||
return (
|
||||
h('div.flex-column.flex-grow', {
|
||||
h('div.flex-column.flex-grow.confirm-screen-container', {
|
||||
style: {
|
||||
// overflow: 'scroll',
|
||||
minWidth: '355px', // TODO: maxWidth TBD, use home.html
|
||||
@ -93,86 +133,79 @@ PendingTx.prototype.render = function () {
|
||||
}, [
|
||||
|
||||
// Main Send token Card
|
||||
h('div.send-screen.flex-column.flex-grow', {
|
||||
style: {
|
||||
marginLeft: '3.5%',
|
||||
marginRight: '3.5%',
|
||||
background: '#FFFFFF', // $background-white
|
||||
boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)',
|
||||
},
|
||||
}, [
|
||||
h('section.flex-center.flex-row', {
|
||||
style: {
|
||||
zIndex: 15, // $token-icon-z-index
|
||||
marginTop: '-35px',
|
||||
},
|
||||
}, [
|
||||
h(Identicon, {
|
||||
address: ARAGON,
|
||||
diameter: 76,
|
||||
}),
|
||||
h('div.confirm-screen-wrapper.flex-column.flex-grow', {}, [
|
||||
|
||||
h('h3.flex-center.confirm-screen-header', {}, [
|
||||
|
||||
h('button.confirm-screen-back-button', {}, 'BACK'),
|
||||
|
||||
h('div.confirm-screen-title', {}, 'Confirm Transaction'),
|
||||
|
||||
]),
|
||||
|
||||
//
|
||||
// Required Fields
|
||||
//
|
||||
h('div.flex-row.flex-center.confirm-screen-identicons', {}, [
|
||||
|
||||
h('h3.flex-center', {
|
||||
h('div.confirm-screen-account-wrapper', {}, [
|
||||
h(
|
||||
Identicon,
|
||||
{
|
||||
address: txParams.from,
|
||||
diameter: 64,
|
||||
style: {},
|
||||
},
|
||||
),
|
||||
h('span.confirm-screen-account-name', {}, fromName),
|
||||
h('span.confirm-screen-account-number', {}, endOfFromAddress),
|
||||
|
||||
]),
|
||||
|
||||
h('i.fa.fa-arrow-right.fa-lg'),
|
||||
|
||||
h('div.confirm-screen-account-wrapper', {}, [
|
||||
h(
|
||||
Identicon,
|
||||
{
|
||||
address: txParams.to,
|
||||
diameter: 64,
|
||||
style: {},
|
||||
},
|
||||
),
|
||||
h('span.confirm-screen-account-name', {}, toName),
|
||||
h('span.confirm-screen-account-number', {}, endOfToAddress),
|
||||
])
|
||||
|
||||
]),
|
||||
|
||||
h('h3.flex-center.confirm-screen-sending-to-message', {
|
||||
style: {
|
||||
marginTop: '-18px',
|
||||
textAlign: 'center',
|
||||
fontSize: '16px',
|
||||
},
|
||||
}
|
||||
}, [
|
||||
'Confirm Transaction',
|
||||
`You're sending to Recipient ...${endOfToAddress}`
|
||||
]),
|
||||
|
||||
h('h3.flex-center', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, [
|
||||
'You\'re sending to Recipient ...5924',
|
||||
h('h3.flex-center.confirm-screen-send-amount', {}, [`$${totalInUSD}`]),
|
||||
|
||||
h('h3.flex-center.confirm-screen-send-amount-currency', {}, [
|
||||
'USD',
|
||||
]),
|
||||
|
||||
h('h3.flex-center', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
fontSize: '36px',
|
||||
marginTop: '8px',
|
||||
},
|
||||
}, [
|
||||
'0.24',
|
||||
]),
|
||||
h('div.flex-center.confirm-memo-wrapper', {}, h(
|
||||
'h3.confirm-screen-send-memo', {}, txParams.memo || 'Fake memo'
|
||||
)),
|
||||
|
||||
h('h3.flex-center', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
fontSize: '12px',
|
||||
marginTop: '4px',
|
||||
},
|
||||
}, [
|
||||
'ANT',
|
||||
]),
|
||||
// TODO: put this error message in the right place
|
||||
// props.error && h('span.error.flex-center', props.error),
|
||||
|
||||
// error message
|
||||
props.error && h('span.error.flex-center', props.error),
|
||||
|
||||
sectionDivider,
|
||||
|
||||
h('section.flex-row.flex-center', {
|
||||
h('section.flex-row.flex-center.confirm-screen-row', {
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
width: '50%',
|
||||
},
|
||||
}, [
|
||||
h('span', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, [
|
||||
h('span.confirm-screen-label', {}, [
|
||||
'From',
|
||||
]),
|
||||
]),
|
||||
@ -182,38 +215,21 @@ PendingTx.prototype.render = function () {
|
||||
width: '50%',
|
||||
},
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '10px',
|
||||
marginBottom: '-10px',
|
||||
},
|
||||
}, 'Aragon Token'),
|
||||
h('div.confirm-screen-row-info', {}, fromName),
|
||||
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '8px',
|
||||
},
|
||||
}, 'Your Balance 2.34 ANT'),
|
||||
h('div.confirm-screen-row-detail', {}, `...${endOfFromAddress}`),
|
||||
]),
|
||||
]),
|
||||
|
||||
contentDivider,
|
||||
|
||||
h('section.flex-row.flex-center', {
|
||||
h('section.flex-row.flex-center.confirm-screen-row', {
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
width: '50%',
|
||||
},
|
||||
}, [
|
||||
h('span', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, [
|
||||
h('span.confirm-screen-label', {}, [
|
||||
'To',
|
||||
]),
|
||||
]),
|
||||
@ -223,38 +239,21 @@ PendingTx.prototype.render = function () {
|
||||
width: '50%',
|
||||
},
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '10px',
|
||||
marginBottom: '-10px',
|
||||
},
|
||||
}, 'Ethereum Address'),
|
||||
h('div.confirm-screen-row-info', {}, toName),
|
||||
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '8px',
|
||||
},
|
||||
}, '...5924'),
|
||||
h('div.confirm-screen-row-detail', {}, `...${endOfToAddress}`),
|
||||
]),
|
||||
]),
|
||||
|
||||
contentDivider,
|
||||
|
||||
h('section.flex-row.flex-center', {
|
||||
h('section.flex-row.flex-center.confirm-screen-row', {
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
width: '50%',
|
||||
},
|
||||
}, [
|
||||
h('span', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '12px',
|
||||
},
|
||||
}, [
|
||||
h('span.confirm-screen-label', {}, [
|
||||
'Gas Fee',
|
||||
]),
|
||||
]),
|
||||
@ -264,49 +263,21 @@ PendingTx.prototype.render = function () {
|
||||
width: '50%',
|
||||
},
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '10px',
|
||||
marginBottom: '-10px',
|
||||
},
|
||||
}, '$0.04 USD'),
|
||||
h('div.confirm-screen-row-info', {}, `$${gasFeeInUSD} USD`),
|
||||
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '8px',
|
||||
},
|
||||
}, '0.001575 ETH'),
|
||||
h('div.confirm-screen-row-detail', {}, `${gasFeeInETH} ETH`),
|
||||
]),
|
||||
]),
|
||||
|
||||
contentDivider,
|
||||
|
||||
h('section.flex-row.flex-center', {
|
||||
style: {
|
||||
backgroundColor: '#F6F6F6', // $wild-sand
|
||||
borderRadius: '8px',
|
||||
marginLeft: '10px',
|
||||
marginRight: '10px',
|
||||
paddingLeft: '6px',
|
||||
paddingRight: '6px',
|
||||
marginBottom: '10px',
|
||||
},
|
||||
}, [
|
||||
h('section.flex-row.flex-center.confirm-screen-total-box ', {}, [
|
||||
h('div', {
|
||||
style: {
|
||||
width: '50%',
|
||||
},
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '12px',
|
||||
marginBottom: '-10px',
|
||||
},
|
||||
}, [
|
||||
'Total Tokens',
|
||||
h('span.confirm-screen-label', {}, [
|
||||
'Total ',
|
||||
]),
|
||||
|
||||
h('div', {
|
||||
@ -315,7 +286,7 @@ PendingTx.prototype.render = function () {
|
||||
fontSize: '8px',
|
||||
},
|
||||
}, [
|
||||
'Total Gas',
|
||||
'Amount + Gas',
|
||||
]),
|
||||
|
||||
]),
|
||||
@ -325,20 +296,9 @@ PendingTx.prototype.render = function () {
|
||||
width: '50%',
|
||||
},
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '10px',
|
||||
marginBottom: '-10px',
|
||||
},
|
||||
}, '0.24 ANT (127.00 USD)'),
|
||||
h('div.confirm-screen-row-info', {}, `$${totalInUSD} USD`),
|
||||
|
||||
h('div', {
|
||||
style: {
|
||||
textAlign: 'left',
|
||||
fontSize: '8px',
|
||||
},
|
||||
}, '0.249 ETH'),
|
||||
h('div.confirm-screen-row-detail', {}, `${totalInETH} ETH`),
|
||||
]),
|
||||
]),
|
||||
|
||||
@ -356,32 +316,14 @@ PendingTx.prototype.render = function () {
|
||||
// }, 'Reset'),
|
||||
|
||||
// Accept Button
|
||||
h('input.confirm.btn-green', {
|
||||
h('input.confirm-screen-confirm-button', {
|
||||
type: 'submit',
|
||||
value: 'CONFIRM',
|
||||
style: {
|
||||
marginTop: '8px',
|
||||
width: '8em',
|
||||
color: '#FFFFFF',
|
||||
borderRadius: '2px',
|
||||
fontSize: '12px',
|
||||
lineHeight: '20px',
|
||||
textAlign: 'center',
|
||||
borderStyle: 'none',
|
||||
},
|
||||
disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
|
||||
// disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
|
||||
}),
|
||||
|
||||
// Cancel Button
|
||||
h('button.cancel.btn-light', {
|
||||
style: {
|
||||
background: '#F7F7F7', // $alabaster
|
||||
border: 'none',
|
||||
opacity: 1,
|
||||
width: '8em',
|
||||
},
|
||||
onClick: props.cancelTransaction,
|
||||
}, 'CANCEL'),
|
||||
h('button.cancel.btn-light.confirm-screen-cancel-button', {}, 'CANCEL'),
|
||||
]),
|
||||
]) // end of minwidth wrapper
|
||||
)
|
||||
|
||||
50
ui/app/conversion-util.js
Normal file
50
ui/app/conversion-util.js
Normal file
@ -0,0 +1,50 @@
|
||||
const {
|
||||
numericBalance,
|
||||
parseBalance,
|
||||
formatBalance,
|
||||
normalizeToWei,
|
||||
valueTable,
|
||||
} = require('./util')
|
||||
const hexToBn = require('../../app/scripts/lib/hex-to-bn')
|
||||
const { BN } = require('ethereumjs-util')
|
||||
const GWEI_MULTIPLIER = normalizeToWei(hexToBn(valueTable.gwei.toString(16)), 'gwei');
|
||||
|
||||
const conversionUtil = (value, {
|
||||
fromCurrency,
|
||||
toCurrency,
|
||||
fromFormat,
|
||||
toFormat,
|
||||
precision = 2,
|
||||
conversionRate,
|
||||
}) => {
|
||||
let result;
|
||||
|
||||
if (fromFormat === 'BN') {
|
||||
if (fromCurrency !== 'GWEI') {
|
||||
result = normalizeToWei(value, 'gwei')
|
||||
}
|
||||
else {
|
||||
result = value
|
||||
}
|
||||
|
||||
result = result.toString(16)
|
||||
result = formatBalance(result, 9)
|
||||
result = result.split(' ')
|
||||
result = Number(result[0]) * 1000000000
|
||||
}
|
||||
|
||||
if (fromCurrency === 'GWEI') {
|
||||
result = result / 1000000000
|
||||
}
|
||||
|
||||
if (toCurrency === 'USD') {
|
||||
result = result * conversionRate
|
||||
result = result.toFixed(precision)
|
||||
}
|
||||
|
||||
return result
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
conversionUtil,
|
||||
}
|
||||
223
ui/app/css/itcss/components/confirm.scss
Normal file
223
ui/app/css/itcss/components/confirm.scss
Normal file
@ -0,0 +1,223 @@
|
||||
.confirm-screen-container {
|
||||
position: absolute;
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
margin-top: 6.9vh;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-screen-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 320px;
|
||||
min-height: 753px;
|
||||
z-index: 100;
|
||||
top: 5%;
|
||||
font-family: 'DIN NEXT';
|
||||
margin-left: 3.5%;
|
||||
margin-right: 3.5%;
|
||||
background: $white;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
|
||||
padding-top: 20px;
|
||||
padding-bottom: 31px;
|
||||
|
||||
@media screen and (min-width: $break-large) {
|
||||
width: 498px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-screen-wrapper > h3,
|
||||
.confirm-screen-wrapper > div,
|
||||
.confirm-screen-wrapper > section {
|
||||
margin-left: 23px;
|
||||
margin-right: 23px;
|
||||
}
|
||||
|
||||
.confirm-screen-wrapper > .confirm-screen-total-box {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.confirm-screen-wrapper > .confirm-memo-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.confirm-screen-wrapper > .confirm-screen-header {
|
||||
@media screen and (max-width: $break-small) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-screen-header {
|
||||
font-size: 26px;
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-screen-title {
|
||||
@media screen and (max-width: $break-small) {
|
||||
margin-left: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-screen-back-button {
|
||||
background: $white;
|
||||
border: 1px solid $dusty-gray;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
color: $black;
|
||||
padding: 6px 13px 7px 12px;
|
||||
border-radius: 2px;
|
||||
height: 30px;
|
||||
width: 54px;
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-screen-account-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.confirm-screen-account-name, .confirm-screen-row-info {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: $scorpion;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.confirm-screen-account-number {
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
color: $dusty-gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.confirm-screen-identicons {
|
||||
margin-top: 48px;
|
||||
|
||||
i {
|
||||
align-self: start;
|
||||
margin: 20px 14px 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-screen-sending-to-message {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.confirm-screen-send-amount {
|
||||
font-size: 64px;
|
||||
color: $scorpion;
|
||||
margin-top: 12px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-family: 'DIN NEXT Light';
|
||||
}
|
||||
|
||||
.confirm-screen-send-amount-currency {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.confirm-memo-wrapper {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $gallery;
|
||||
}
|
||||
|
||||
.confirm-screen-send-memo {
|
||||
color: $dusty-gray;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
margin-top: 21px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.confirm-screen-label {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: $scorpion;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
section .confirm-screen-account-name,
|
||||
section .confirm-screen-account-number,
|
||||
.confirm-screen-row-info,
|
||||
.confirm-screen-row-detail {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.confirm-screen-row {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 11.5px;
|
||||
}
|
||||
|
||||
.confirm-screen-row-detail {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $dusty-gray;
|
||||
}
|
||||
|
||||
.confirm-screen-total-box {
|
||||
background-color: $wild-sand;
|
||||
border-radius: 8px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 22px 14px 22px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.confirm-screen-confirm-button {
|
||||
height: 62px;
|
||||
width: 216.88px;
|
||||
border-radius: 2px;
|
||||
background-color: #02C9B1;
|
||||
font-size: 16px;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
font-family: 'DIN NEXT';
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
margin-top: 23px;
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-light.confirm-screen-cancel-button {
|
||||
height: 62px;
|
||||
width: 216.88px;
|
||||
background: none;
|
||||
border: none;
|
||||
opacity: 1;
|
||||
width: 8em;
|
||||
font-family: 'DIN NEXT';
|
||||
border-width: 0;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#pending-tx-form {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.confirm-screen-row + .confirm-screen-row {
|
||||
border-top: 1px solid $gallery;
|
||||
}
|
||||
@ -14,6 +14,8 @@
|
||||
|
||||
@import './send.scss';
|
||||
|
||||
@import './confirm.scss';
|
||||
|
||||
// Balances
|
||||
@import './hero-balance.scss';
|
||||
|
||||
|
||||
@ -49,6 +49,20 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DIN NEXT';
|
||||
src: url('/fonts/DIN NEXT/DIN NEXT W01 Regular.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DIN NEXT Light';
|
||||
src: url('/fonts/DIN NEXT/DIN NEXT W10 Light.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype');
|
||||
|
||||
@ -30,6 +30,7 @@ $concrete: #f3f3f3;
|
||||
$tundora: #4d4d4d;
|
||||
$nile-blue: #1b344d;
|
||||
$scorpion: #5d5d5d;
|
||||
$caribbean-green: #02C9B1;
|
||||
$silver: #cdcdcd;
|
||||
$crimson: #e91550;
|
||||
$blue-lagoon: #038789;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user