[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, 17 insertions, 0 deletions

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;
+}