From 8208245e1b98418e8b5ac53ee238dca5ed1f9d66 Mon Sep 17 00:00:00 2001
From: Vasek Mlejnsky <vasek.mlejnsky@gmail.com>
Date: Thu, 20 Sep 2018 10:14:38 +0200
Subject: [PATCH] Fix prop validation error

---
 .../components/PendingTransactions/index.js   | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js
index a210a87b..ae560e61 100644
--- a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js
+++ b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js
@@ -48,9 +48,13 @@ const TransactionIcon = styled.div`
     text-transform: uppercase;
     user-select: none;
     text-align: center;
-    color: ${props => props.color};
+    color: ${props => props.textColor};
     background: ${props => props.background};
     border-color: ${props => props.borderColor};
+
+    &:before {
+        content: ${props => props.color};
+    }
 `;
 
 const P = styled.p``;
@@ -70,9 +74,9 @@ class PendingTransactions extends Component<Props> {
 
     getTransactionIconColors(tx: any) {
         let iconColors = {
-            color: '',
-            background: '',
-            borderColor: '',
+            textColor: '#fff',
+            background: '#000',
+            borderColor: '#000',
         };
         const bgColorFactory = new ColorHash({ lightness: 0.7 });
         const textColorFactory = new ColorHash();
@@ -84,21 +88,21 @@ class PendingTransactions extends Component<Props> {
 
             if (!token) {
                 iconColors = {
-                    color: '#ffffff',
+                    textColor: '#ffffff',
                     background: '#000000',
                     borderColor: '#000000',
                 };
             } else {
                 const bgColor: string = bgColorFactory.hex(token.name);
                 iconColors = {
-                    color: textColorFactory.hex(token.name),
+                    textColor: textColorFactory.hex(token.name),
                     background: bgColor,
                     borderColor: bgColor,
                 };
             }
         } else {
             iconColors = {
-                color: textColorFactory.hex(tx.network),
+                textColor: textColorFactory.hex(tx.network),
                 background: bgColorFactory.hex(tx.network),
                 borderColor: bgColorFactory.hex(tx.network),
             };
@@ -139,7 +143,7 @@ class PendingTransactions extends Component<Props> {
                         key={tx.id}
                     >
                         <TransactionIcon
-                            color={() => this.getTransactionIconColors(tx).color}
+                            textColor={() => this.getTransactionIconColors(tx).textColor}
                             background={() => this.getTransactionIconColors(tx).background}
                             borderColor={() => this.getTransactionIconColors(tx).borderColor}
                         >