diff options
-rw-r--r-- | ui/app/components/tx-list-item.js | 19 | ||||
-rw-r--r-- | ui/app/css/itcss/components/transaction-list.scss | 17 | ||||
-rw-r--r-- | ui/app/css/itcss/settings/variables.scss | 2 |
3 files changed, 33 insertions, 5 deletions
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 62127b153..9c681644e 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -1,6 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const classnames = require('classnames') const prefixForNetwork = require('../../lib/etherscan-prefix-for-network') const Identicon = require('./identicon') @@ -67,9 +68,13 @@ TxListItem.prototype.render = function () { h('div.tx-list-status-wrapper', { style: {}, }, [ - h('span.tx-list-status', {}, [ + h('span', { + className: classnames('tx-list-status', { + 'tx-list-status--rejected': transactionStatus === 'rejected' + }) + }, transactionStatus, - ]), + ), ]), ]), @@ -77,9 +82,13 @@ TxListItem.prototype.render = function () { style: {}, }, [ - h('span.tx-list-value', {}, [ - transactionAmount, - ]), + h('span', { + className: classnames('tx-list-value', { + 'tx-list-value--confirmed': transactionStatus === 'confirmed' + }) + }, + transactionAmount + ), h('span.tx-list-fiat-value', {}, [ '+ $300 USD', diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 298cacec0..50bdb3cd5 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -151,6 +151,10 @@ font-size: 16px; text-transform: capitalize; } + + .tx-list-status--rejected { + color: $monzo; + } } .tx-list-item { @@ -179,6 +183,10 @@ text-align: right; } + .tx-list-value--confirmed { + color: $caribbean-green; + } + .tx-list-fiat-value { font-size: 12px; text-align: right; @@ -191,3 +199,12 @@ padding: 16px; } } + +.tx-list-value { + font-size: 16px; + text-align: right; +} + +.tx-list-value--confirmed { + color: $caribbean-green; +} diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 7de7ca4f5..0c5501fea 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -32,6 +32,8 @@ $nile-blue: #1b344d; $scorpion: #5d5d5d; $caribbean-green: #02C9B1; $silver: #cdcdcd; +$caribbean-green: #02c9b1; +$monzo: #d0021b; $crimson: #e91550; $blue-lagoon: #038789; $purple: #690496; |