[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.

1 files changed, 14 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',