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

[NewUI] Color tx-list-item text depending on transaction status. (#2050)

Browse Source 
* Color tx-list-item text depending on transaction status.

* Handle css change of text colour with scss instead on inline styles, add classnames package and helper function.

* Refactored to use classnames with component property className.
This commit is contained in:
Dan J Miller 2017-09-12 19:29:33 -02:30 committed by Chi Kei Chan
parent 7eb6dae418
commit 492507aa94
3 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/app/components/tx-list-item.js
View File

@ -1,6 +1,7 @@
const Component = require('react').Component const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const classnames = require('classnames')
const prefixForNetwork = require('../../lib/etherscan-prefix-for-network') const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
const Identicon = require('./identicon') const Identicon = require('./identicon')
@ -67,9 +68,13 @@ TxListItem.prototype.render = function () {
h('div.tx-list-status-wrapper', { h('div.tx-list-status-wrapper', {
style: {}, style: {},
}, [ }, [
h('span.tx-list-status', {}, [ h('span', {
className: classnames('tx-list-status', {
'tx-list-status--rejected': transactionStatus === 'rejected'
})
},
transactionStatus, transactionStatus,
]), ),
]), ]),
]), ]),
@ -77,9 +82,13 @@ TxListItem.prototype.render = function () {
style: {}, style: {},
}, [ }, [
h('span.tx-list-value', {}, [ h('span', {
transactionAmount, className: classnames('tx-list-value', {
]), 'tx-list-value--confirmed': transactionStatus === 'confirmed'
})
},
transactionAmount
),
h('span.tx-list-fiat-value', {}, [ h('span.tx-list-fiat-value', {}, [
'+ $300 USD', '+ $300 USD',

17
ui/app/css/itcss/components/transaction-list.scss
View File

@ -151,6 +151,10 @@
font-size: 16px; font-size: 16px;
text-transform: capitalize; text-transform: capitalize;
} }
.tx-list-status--rejected {
color: $monzo;
}
} }
.tx-list-item { .tx-list-item {
@ -179,6 +183,10 @@
text-align: right; text-align: right;
} }
.tx-list-value--confirmed {
color: $caribbean-green;
}
.tx-list-fiat-value { .tx-list-fiat-value {
font-size: 12px; font-size: 12px;
text-align: right; text-align: right;
@ -191,3 +199,12 @@
padding: 16px; padding: 16px;
} }
} }
.tx-list-value {
font-size: 16px;
text-align: right;
}
.tx-list-value--confirmed {
color: $caribbean-green;
}

2
ui/app/css/itcss/settings/variables.scss
View File

@ -32,6 +32,8 @@ $nile-blue: #1b344d;
$scorpion: #5d5d5d; $scorpion: #5d5d5d;
$caribbean-green: #02C9B1; $caribbean-green: #02C9B1;
$silver: #cdcdcd; $silver: #cdcdcd;
$caribbean-green: #02c9b1;
$monzo: #d0021b;
$crimson: #e91550; $crimson: #e91550;
$blue-lagoon: #038789; $blue-lagoon: #038789;
$purple: #690496; $purple: #690496;