From 9d9909bd77039c10c8a257822d5a10a83823dcfe Mon Sep 17 00:00:00 2001
From: wafflesvsfrankie <92288602+burtonemily@users.noreply.github.com>
Date: Mon, 10 Feb 2025 14:38:10 +1100
Subject: [PATCH 1/2] fix: ses-2495 message request banner icon colour
 incorrect when in light mode

---
 ts/components/leftpane/MessageRequestsBanner.tsx | 5 +++++
 ts/themes/classicDark.ts                         | 1 +
 ts/themes/classicLight.ts                        | 1 +
 ts/themes/oceanDark.ts                           | 1 +
 ts/themes/oceanLight.ts                          | 1 +
 ts/themes/variableColors.tsx                     | 3 +++
 6 files changed, 12 insertions(+)

diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx
index d5c92e263..1d8eaf563 100644
--- a/ts/components/leftpane/MessageRequestsBanner.tsx
+++ b/ts/components/leftpane/MessageRequestsBanner.tsx
@@ -63,6 +63,11 @@ const StyledGridContainer = styled.div`
   align-items: center;
   border-radius: 50%;
   background-color: var(--primary-color);
+  color: var(--renderer-span-primary-color);
+
+  svg > path {
+    fill: var(--message-request-icon-color);
+  }
 `;
 
 export const CircularIcon = (props: {
diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts
index b2b39f463..69965bab4 100644
--- a/ts/themes/classicDark.ts
+++ b/ts/themes/classicDark.ts
@@ -169,4 +169,5 @@ export const classicDark: ThemeColorVariables = {
   '--session-recording-pulse-color': hexColorToRGB(THEMES.CLASSIC_DARK.DANGER),
 
   '--renderer-span-primary-color': 'var(--primary-color)',
+  '--message-request-icon-color': 'var(--background-primary-color)',
 };
diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts
index 568ae6882..74bb13629 100644
--- a/ts/themes/classicLight.ts
+++ b/ts/themes/classicLight.ts
@@ -169,4 +169,5 @@ export const classicLight: ThemeColorVariables = {
   '--session-recording-pulse-color': hexColorToRGB(THEMES.CLASSIC_LIGHT.DANGER),
 
   '--renderer-span-primary-color': 'var(--text-primary-color)',
+  '--message-request-icon-color': 'var(--text-primary-color)',
 };
diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts
index 580f81b91..12c752ae9 100644
--- a/ts/themes/oceanDark.ts
+++ b/ts/themes/oceanDark.ts
@@ -169,4 +169,5 @@ export const oceanDark: ThemeColorVariables = {
   '--session-recording-pulse-color': hexColorToRGB(THEMES.OCEAN_DARK.DANGER),
 
   '--renderer-span-primary-color': 'var(--primary-color)',
+  '--message-request-icon-color': 'var(--background-primary-color)',
 };
diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts
index b1dc2b46f..2a10d200e 100644
--- a/ts/themes/oceanLight.ts
+++ b/ts/themes/oceanLight.ts
@@ -169,4 +169,5 @@ export const oceanLight: ThemeColorVariables = {
   '--session-recording-pulse-color': hexColorToRGB(THEMES.OCEAN_LIGHT.DANGER),
 
   '--renderer-span-primary-color': 'var(--text-primary-color)',
+  '--message-request-icon-color': 'var(--text-primary-color)',
 };
diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx
index 8f3b54b85..d94fad134 100644
--- a/ts/themes/variableColors.tsx
+++ b/ts/themes/variableColors.tsx
@@ -28,6 +28,9 @@ export type ThemeColorVariables = {
   '--message-bubbles-sent-text-color': string;
   '--message-bubbles-received-text-color': string;
 
+  /* Message Request Banner */
+  '--message-request-icon-color': string;
+
   /* Menu Button */
   '--menu-button-background-color': string;
   '--menu-button-background-hover-color': string;

From 7f9fb3aef0fd0331ecb820cf886dbc2211f32ef3 Mon Sep 17 00:00:00 2001
From: wafflesvsfrankie <92288602+burtonemily@users.noreply.github.com>
Date: Mon, 10 Feb 2025 15:18:32 +1100
Subject: [PATCH 2/2] fix: addresses feedback

---
 ts/components/leftpane/MessageRequestsBanner.tsx | 4 ++--
 ts/themes/classicDark.ts                         | 1 -
 ts/themes/classicLight.ts                        | 1 -
 ts/themes/oceanDark.ts                           | 1 -
 ts/themes/oceanLight.ts                          | 1 -
 ts/themes/variableColors.tsx                     | 3 ---
 6 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx
index 1d8eaf563..fdf73c9cc 100644
--- a/ts/components/leftpane/MessageRequestsBanner.tsx
+++ b/ts/components/leftpane/MessageRequestsBanner.tsx
@@ -63,10 +63,10 @@ const StyledGridContainer = styled.div`
   align-items: center;
   border-radius: 50%;
   background-color: var(--primary-color);
-  color: var(--renderer-span-primary-color);
+  color: var(--unread-messages-alert-background-color);
 
   svg > path {
-    fill: var(--message-request-icon-color);
+    fill: var(--unread-messages-alert-text-color);
   }
 `;
 
diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts
index 69965bab4..b2b39f463 100644
--- a/ts/themes/classicDark.ts
+++ b/ts/themes/classicDark.ts
@@ -169,5 +169,4 @@ export const classicDark: ThemeColorVariables = {
   '--session-recording-pulse-color': hexColorToRGB(THEMES.CLASSIC_DARK.DANGER),
 
   '--renderer-span-primary-color': 'var(--primary-color)',
-  '--message-request-icon-color': 'var(--background-primary-color)',
 };
diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts
index 74bb13629..568ae6882 100644
--- a/ts/themes/classicLight.ts
+++ b/ts/themes/classicLight.ts
@@ -169,5 +169,4 @@ export const classicLight: ThemeColorVariables = {
   '--session-recording-pulse-color': hexColorToRGB(THEMES.CLASSIC_LIGHT.DANGER),
 
   '--renderer-span-primary-color': 'var(--text-primary-color)',
-  '--message-request-icon-color': 'var(--text-primary-color)',
 };
diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts
index 12c752ae9..580f81b91 100644
--- a/ts/themes/oceanDark.ts
+++ b/ts/themes/oceanDark.ts
@@ -169,5 +169,4 @@ export const oceanDark: ThemeColorVariables = {
   '--session-recording-pulse-color': hexColorToRGB(THEMES.OCEAN_DARK.DANGER),
 
   '--renderer-span-primary-color': 'var(--primary-color)',
-  '--message-request-icon-color': 'var(--background-primary-color)',
 };
diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts
index 2a10d200e..b1dc2b46f 100644
--- a/ts/themes/oceanLight.ts
+++ b/ts/themes/oceanLight.ts
@@ -169,5 +169,4 @@ export const oceanLight: ThemeColorVariables = {
   '--session-recording-pulse-color': hexColorToRGB(THEMES.OCEAN_LIGHT.DANGER),
 
   '--renderer-span-primary-color': 'var(--text-primary-color)',
-  '--message-request-icon-color': 'var(--text-primary-color)',
 };
diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx
index d94fad134..8f3b54b85 100644
--- a/ts/themes/variableColors.tsx
+++ b/ts/themes/variableColors.tsx
@@ -28,9 +28,6 @@ export type ThemeColorVariables = {
   '--message-bubbles-sent-text-color': string;
   '--message-bubbles-received-text-color': string;
 
-  /* Message Request Banner */
-  '--message-request-icon-color': string;
-
   /* Menu Button */
   '--menu-button-background-color': string;
   '--menu-button-background-hover-color': string;