From 287cbad2d5b434426c3646c21564990355e5fac7 Mon Sep 17 00:00:00 2001
From: Zubair Imtiaz <106450046+ZubairImtiaz3@users.noreply.github.com>
Date: Tue, 26 Dec 2023 14:24:33 +0500
Subject: [PATCH] [MM-55974] Theme is not used in notification selector box in
 user notification settings (#25689)

---
 .../user_settings_notifications.tsx           | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
index b571c466e0..cf4b2584d8 100644
--- a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
+++ b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
@@ -872,7 +872,7 @@ class NotificationsTab extends React.PureComponent<Props, State> {
                         autoFocus={true}
                         isClearable={false}
                         isMulti={true}
-                        styles={customKeywordsWithNotificationStyles}
+                        styles={customKeywordsSelectorStyles}
                         className='multiInput'
                         placeholder=''
                         components={{
@@ -965,7 +965,7 @@ class NotificationsTab extends React.PureComponent<Props, State> {
                         autoFocus={true}
                         isClearable={false}
                         isMulti={true}
-                        styles={customKeywordsWithNotificationStyles}
+                        styles={customKeywordsSelectorStyles}
                         className='multiInput'
                         placeholder=''
                         components={{
@@ -1395,7 +1395,27 @@ class NotificationsTab extends React.PureComponent<Props, State> {
     }
 }
 
-const customKeywordsWithNotificationStyles: ReactSelectStyles = {
+const customKeywordsSelectorStyles: ReactSelectStyles = {
+    control: ((baseStyles) => ({
+        ...baseStyles,
+        backgroundColor: 'var(--center-channel-bg)',
+        border: '1px solid rgba(var(--center-channel-color-rgb), 0.16);',
+        ':hover': {
+            borderColor: 'rgba(var(--center-channel-color-rgb), 0.48);',
+        },
+    })),
+    multiValue: ((baseStyles) => ({
+        ...baseStyles,
+        background: 'rgba(var(--center-channel-color-rgb), 0.08)',
+    })),
+    multiValueLabel: ((baseStyles) => ({
+        ...baseStyles,
+        color: 'var(--center-channel-color);',
+    })),
+    input: ((baseStyles) => ({
+        ...baseStyles,
+        color: 'var(--center-channel-color)',
+    })),
     indicatorSeparator: ((indicatorSeperatorStyles) => ({
         ...indicatorSeperatorStyles,
         display: 'none',
@@ -1403,8 +1423,10 @@ const customKeywordsWithNotificationStyles: ReactSelectStyles = {
     multiValueRemove: ((multiValueRemoveStyles) => ({
         ...multiValueRemoveStyles,
         cursor: 'pointer',
+        color: 'rgba(var(--center-channel-color-rgb),0.32);',
         ':hover': {
             backgroundColor: 'rgba(var(--center-channel-color-rgb), 0.16)',
+            color: 'rgba(var(--center-channel-color-rgb), 0.56);',
         },
     })),
 };