Fix token display in dark/light mode for transactions. (#2386)

gnosis · Feb 4, 2022 · 94245c5 · 94245c5
1 parent c939d78
commit 94245c5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -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
@@ -81,6 +81,11 @@ declare module 'styled-components' {
         content: string
       }
     }
+    transaction: {
+      tokenBackground: string
+      tokenColor: string
+      tokenBorder: string
+    }
     neumorphism: {
       boxShadow: FlattenSimpleInterpolation
     }