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

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;