From 682bd1fe56307af3cbb8dbb1730e1b4017da451a Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@getsession.org>
Date: Mon, 16 Sep 2024 12:19:21 +1000
Subject: [PATCH] fix: remove need for redux theme from Localizer component

---
 ts/components/basic/Localizer.tsx | 9 +++------
 ts/themes/classicDark.ts          | 2 ++
 ts/themes/classicLight.ts         | 2 ++
 ts/themes/oceanDark.ts            | 2 ++
 ts/themes/oceanLight.ts           | 2 ++
 ts/themes/variableColors.tsx      | 7 +++++++
 6 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/ts/components/basic/Localizer.tsx b/ts/components/basic/Localizer.tsx
index 3ff1a4646..de3e65da5 100644
--- a/ts/components/basic/Localizer.tsx
+++ b/ts/components/basic/Localizer.tsx
@@ -6,7 +6,6 @@ import type {
   LocalizerDictionary,
   LocalizerToken,
 } from '../../types/localizer';
-import { useIsDarkTheme } from '../../state/selectors/theme';
 import { SessionHtmlRenderer } from './SessionHTMLRenderer';
 
 /** An array of supported html tags to render if found in a string */
@@ -73,9 +72,9 @@ export function sanitizeArgs(
   );
 }
 
-const StyledHtmlRenderer = styled.span<{ isDarkTheme: boolean }>`
+const StyledHtmlRenderer = styled.span`
   * > span {
-    color: ${props => (props.isDarkTheme ? 'var(--primary-color)' : 'var(--text-primary-color)')};
+    color: var(--renderer-span-primary-color);
   }
 `;
 
@@ -96,8 +95,6 @@ const StyledHtmlRenderer = styled.span<{ isDarkTheme: boolean }>`
  * ```
  */
 export const Localizer = <T extends LocalizerToken>(props: LocalizerComponentProps<T>) => {
-  const isDarkTheme = useIsDarkTheme();
-
   const args = 'args' in props ? props.args : undefined;
 
   const rawString = window.i18n.getRawMessage<T, LocalizerDictionary[T]>(
@@ -114,7 +111,7 @@ export const Localizer = <T extends LocalizerToken>(props: LocalizerComponentPro
 
   return containsFormattingTags ? (
     /** If the string contains a relevant formatting tag, render it as HTML */
-    <StyledHtmlRenderer isDarkTheme={isDarkTheme}>
+    <StyledHtmlRenderer>
       <SessionHtmlRenderer tag={props.asTag} html={i18nString} className={props.className} />
     </StyledHtmlRenderer>
   ) : (
diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts
index daf1a29df..fc776b56e 100644
--- a/ts/themes/classicDark.ts
+++ b/ts/themes/classicDark.ts
@@ -165,4 +165,6 @@ export const classicDark: ThemeColorVariables = {
   '--file-dropzone-border-color': 'var(--primary-color)',
 
   '--session-recording-pulse-color': hexColorToRGB(THEMES.CLASSIC_DARK.DANGER),
+
+  '--renderer-span-primary-color': 'var(--primary-color)',
 };
diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts
index 41b66964b..bc142fd30 100644
--- a/ts/themes/classicLight.ts
+++ b/ts/themes/classicLight.ts
@@ -165,4 +165,6 @@ export const classicLight: ThemeColorVariables = {
   '--file-dropzone-border-color': 'var(--text-primary-color)',
 
   '--session-recording-pulse-color': hexColorToRGB(THEMES.CLASSIC_LIGHT.DANGER),
+
+  '--renderer-span-primary-color': 'var(--text-primary-color)',
 };
diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts
index 2d3ab7a29..f76e8bd3d 100644
--- a/ts/themes/oceanDark.ts
+++ b/ts/themes/oceanDark.ts
@@ -165,4 +165,6 @@ export const oceanDark: ThemeColorVariables = {
   '--file-dropzone-border-color': 'var(--primary-color)',
 
   '--session-recording-pulse-color': hexColorToRGB(THEMES.OCEAN_DARK.DANGER),
+
+  '--renderer-span-primary-color': 'var(--primary-color)',
 };
diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts
index 5f9e6c2cd..8d41f4ed9 100644
--- a/ts/themes/oceanLight.ts
+++ b/ts/themes/oceanLight.ts
@@ -165,4 +165,6 @@ export const oceanLight: ThemeColorVariables = {
   '--file-dropzone-border-color': 'var(--text-primary-color)',
 
   '--session-recording-pulse-color': hexColorToRGB(THEMES.OCEAN_LIGHT.DANGER),
+
+  '--renderer-span-primary-color': 'var(--text-primary-color)',
 };
diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx
index 778304c25..5a9b3ac86 100644
--- a/ts/themes/variableColors.tsx
+++ b/ts/themes/variableColors.tsx
@@ -207,4 +207,11 @@ export type ThemeColorVariables = {
 
   /* Session Recording */
   '--session-recording-pulse-color': string;
+
+  /* HTML Renderer */
+  /**
+   * This isn't good, but we want the span color to be
+   * `--primary-color` on dark themes and `--text-primary-color` on light themes
+   */
+  '--renderer-span-primary-color': string;
 };