tx list item redesign
This commit is contained in:
parent
b6c0df4f2e
commit
8d4e92b90c
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="2" height="18">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M1 13a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v11a1 1 0 0 1-1 1zm0 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 208 B |
|
@ -19,18 +19,8 @@ TransactionIcon.prototype.render = function () {
|
|||
return h(!isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg')
|
||||
|
||||
case 'rejected':
|
||||
return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
|
||||
style: {
|
||||
width: '24px',
|
||||
},
|
||||
})
|
||||
|
||||
case 'failed':
|
||||
return h('i.fa.fa-exclamation-triangle.fa-lg.error', {
|
||||
style: {
|
||||
width: '24px',
|
||||
},
|
||||
})
|
||||
return h('i.tx-warning')
|
||||
|
||||
case 'submitted':
|
||||
return h(Tooltip, {
|
||||
|
@ -48,20 +38,20 @@ TransactionIcon.prototype.render = function () {
|
|||
if (isMsg) {
|
||||
return h('i.fa.fa-certificate.fa-lg', {
|
||||
style: {
|
||||
width: '24px',
|
||||
width: '40px',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (txParams.to) {
|
||||
return h(Identicon, {
|
||||
diameter: 24,
|
||||
diameter: 40,
|
||||
address: txParams.to || transaction.hash,
|
||||
})
|
||||
} else {
|
||||
return h('i.fa.fa-file-text-o.fa-lg', {
|
||||
style: {
|
||||
width: '24px',
|
||||
width: '40px',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
@ -85,7 +85,7 @@ TransactionListItem.prototype.render = function () {
|
|||
|
||||
const isClickable = ('hash' in transaction && isLinkable) || isPending
|
||||
const valueStyle = {
|
||||
fontFamily: 'Nunito-Bold',
|
||||
fontFamily: 'Nunito Bold',
|
||||
width: '100%',
|
||||
textAlign: 'right',
|
||||
fontSize: '14px',
|
||||
|
@ -93,7 +93,7 @@ TransactionListItem.prototype.render = function () {
|
|||
}
|
||||
|
||||
const dimStyle = {
|
||||
fontFamily: 'Nunito-Regular',
|
||||
fontFamily: 'Nunito Regular',
|
||||
color: '#333333',
|
||||
marginLeft: '5px',
|
||||
fontSize: '14px',
|
||||
|
@ -136,6 +136,7 @@ TransactionListItem.prototype.render = function () {
|
|||
}, [
|
||||
h('span', {
|
||||
style: {
|
||||
fontFamily: 'Nunito Bold',
|
||||
display: 'flex',
|
||||
cursor: 'normal',
|
||||
flexDirection: 'column',
|
||||
|
@ -146,15 +147,26 @@ TransactionListItem.prototype.render = function () {
|
|||
}, nonce),
|
||||
]),
|
||||
|
||||
h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
|
||||
h('.flex-column', {
|
||||
style: {
|
||||
overflow: 'hidden',
|
||||
textAlign: 'left',
|
||||
}
|
||||
}, [
|
||||
domainField(txParams),
|
||||
h('div', date),
|
||||
recipientField(txParams, transaction, isTx, isMsg),
|
||||
h('div.flex-row', [
|
||||
recipientField(txParams, transaction, isTx, isMsg),
|
||||
// Places a copy button if tx is successful, else places a placeholder empty div.
|
||||
transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
|
||||
]),
|
||||
h('div', {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
color: '#777777'
|
||||
}
|
||||
}, date),
|
||||
]),
|
||||
|
||||
// Places a copy button if tx is successful, else places a placeholder empty div.
|
||||
transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
|
||||
|
||||
isTx ? h(EthBalance, {
|
||||
valueStyle,
|
||||
dimStyle,
|
||||
|
@ -165,7 +177,9 @@ TransactionListItem.prototype.render = function () {
|
|||
shorten: true,
|
||||
showFiat: false,
|
||||
network,
|
||||
style: {fontSize: '15px'},
|
||||
style: {
|
||||
margin: '0 auto',
|
||||
},
|
||||
}) : h('.flex-column'),
|
||||
]),
|
||||
|
||||
|
@ -234,8 +248,8 @@ function recipientField (txParams, transaction, isTx, isMsg) {
|
|||
|
||||
return h('div', {
|
||||
style: {
|
||||
fontSize: 'x-small',
|
||||
color: '#ABA9AA',
|
||||
fontSize: '14px',
|
||||
color: '#333333',
|
||||
},
|
||||
}, [
|
||||
message,
|
||||
|
|
|
@ -44,7 +44,7 @@ TransactionList.prototype.render = function () {
|
|||
style: {
|
||||
overflowY: 'auto',
|
||||
height: '100%',
|
||||
padding: '0 25px 0 15px',
|
||||
padding: '0 20px 0 20px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, [
|
||||
|
|
|
@ -546,6 +546,18 @@ input.large-input {
|
|||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.tx-warning {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
background: #6729a8;
|
||||
background-image: url('../images/invalid-name.svg');
|
||||
background-size: 2px 18px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.cell.label {
|
||||
font-family: 'Nunito Regular';
|
||||
font-size: 14px;
|
||||
|
|
Loading…
Reference in New Issue