From 94245c5c74630ffdf574f7853c3be615b25df3be Mon Sep 17 00:00:00 2001
From: Michel <31534717+biocom@users.noreply.github.com>
Date: Fri, 4 Feb 2022 10:51:42 +0100
Subject: [PATCH] Fix token display in dark/light mode for transactions.
 (#2386)

---
 src/custom/components/AccountDetails/Transaction/styled.ts | 7 ++++---
 src/custom/theme/baseTheme.tsx                             | 5 +++++
 src/custom/theme/styled.d.ts                               | 5 +++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/custom/components/AccountDetails/Transaction/styled.ts b/src/custom/components/AccountDetails/Transaction/styled.ts
index 068dc8665..163429ae8 100644
--- a/src/custom/components/AccountDetails/Transaction/styled.ts
+++ b/src/custom/components/AccountDetails/Transaction/styled.ts
@@ -481,13 +481,14 @@ export const ActivityVisual = styled.div`
     padding: 2px;
     box-sizing: content-box;
     box-shadow: none;
-    background: ${({ theme }) => theme.card.background2};
+    background: ${({ theme }) => theme.transaction.tokenBackground};
     color: ${({ theme }) =>
-      theme.text1}!important; // Todo: Re-factor StyledLogo to prevent inline style and needing to use !important here
+      theme.transaction.tokenColor}!important; // TODO: Fix MOD file to not require this !important property value.
+    border: 2px solid ${({ theme }) => theme.transaction.tokenBorder};
   }
 
   ${StyledLogo}:not(:first-child):last-child {
-    margin: 0 0 0 -8px;
+    margin: 0 0 0 -9px;
   }
 
   &:hover ${StyledLogo} {
diff --git a/src/custom/theme/baseTheme.tsx b/src/custom/theme/baseTheme.tsx
index a76639bd5..30c5f2252 100644
--- a/src/custom/theme/baseTheme.tsx
+++ b/src/custom/theme/baseTheme.tsx
@@ -155,6 +155,11 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
         content: '680px',
       },
     },
+    transaction: {
+      tokenBackground: colorsTheme.bg2,
+      tokenColor: '#1d4373',
+      tokenBorder: darkMode ? '#01182a' : colorsTheme.bg3,
+    },
     neumorphism: {
       boxShadow: css`
         box-shadow: inset 2px -2px 4px ${darkMode ? '#1d4373' : '#ffffff'},
diff --git a/src/custom/theme/styled.d.ts b/src/custom/theme/styled.d.ts
index cc725cf12..b009bf7d7 100644
--- a/src/custom/theme/styled.d.ts
+++ b/src/custom/theme/styled.d.ts
@@ -81,6 +81,11 @@ declare module 'styled-components' {
         content: string
       }
     }
+    transaction: {
+      tokenBackground: string
+      tokenColor: string
+      tokenBorder: string
+    }
     neumorphism: {
       boxShadow: FlattenSimpleInterpolation
     }