From 492507aa94cb5713d5eaa700cfd7e88b2a16ca7a Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 12 Sep 2017 19:29:33 -0230 Subject: [NewUI] Color tx-list-item text depending on transaction status. (#2050) * 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. --- ui/app/components/tx-list-item.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) (limited to 'ui/app/components') 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', -- cgit v1.2.3