From 38225db1452aee7a8a62781404e4d945a786e8f0 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Mon, 1 Apr 2024 13:43:12 +0530
Subject: [PATCH] fix: theme for MessageList and SendMessageDisallowedIndicator

---
 examples/ExpoMessaging/useStreamChatTheme.ts  | 86 ++++++++++---------
 examples/TypeScriptMessaging/App.tsx          |  1 -
 .../TypeScriptMessaging/useStreamChatTheme.ts |  2 +
 .../Indicators/LoadingIndicator.tsx           |  6 +-
 .../SendMessageDisallowedIndicator.tsx        |  3 +-
 .../components/MessageList/MessageList.tsx    | 26 +++---
 6 files changed, 66 insertions(+), 58 deletions(-)

diff --git a/examples/ExpoMessaging/useStreamChatTheme.ts b/examples/ExpoMessaging/useStreamChatTheme.ts
index cc810c62cf..13a2dfb164 100644
--- a/examples/ExpoMessaging/useStreamChatTheme.ts
+++ b/examples/ExpoMessaging/useStreamChatTheme.ts
@@ -14,49 +14,51 @@ export const useStreamChatTheme = () => {
     colors:
       colorScheme === 'dark'
         ? {
-          accent_blue: '#005FFF',
-          accent_green: '#20E070',
-          accent_red: '#FF3742',
-          bg_gradient_end: '#101214',
-          bg_gradient_start: '#070A0D',
-          black: '#FFFFFF',
-          blue_alice: '#00193D',
-          border: '#141924',
-          grey: '#7A7A7A',
-          grey_gainsboro: '#2D2F2F',
-          grey_whisper: '#1C1E22',
-          icon_background: '#FFFFFF',
-          modal_shadow: '#000000',
-          overlay: '#FFFFFFCC', // CC = 80% opacity
-          shadow_icon: '#00000080', // 80 = 50% opacity
-          targetedMessageBackground: '#302D22',
-          transparent: 'transparent',
-          white: '#101418',
-          white_smoke: '#13151B',
-          white_snow: '#070A0D',
-        }
+            accent_blue: '#005FFF',
+            accent_green: '#20E070',
+            accent_red: '#FF3742',
+            bg_gradient_end: '#101214',
+            bg_gradient_start: '#070A0D',
+            black: '#FFFFFF',
+            blue_alice: '#00193D',
+            border: '#141924',
+            grey: '#7A7A7A',
+            grey_dark: '#F7F7F8',
+            grey_gainsboro: '#2D2F2F',
+            grey_whisper: '#1C1E22',
+            icon_background: '#FFFFFF',
+            modal_shadow: '#000000',
+            overlay: '#FFFFFFCC', // CC = 80% opacity
+            shadow_icon: '#00000080', // 80 = 50% opacity
+            targetedMessageBackground: '#302D22',
+            transparent: 'transparent',
+            white: '#101418',
+            white_smoke: '#13151B',
+            white_snow: '#070A0D',
+          }
         : {
-          accent_blue: '#005FFF',
-          accent_green: '#20E070',
-          accent_red: '#FF3742',
-          bg_gradient_end: '#F7F7F7',
-          bg_gradient_start: '#FCFCFC',
-          black: '#000000',
-          blue_alice: '#E9F2FF',
-          border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
-          grey: '#7A7A7A',
-          grey_gainsboro: '#DBDBDB',
-          grey_whisper: '#ECEBEB',
-          icon_background: '#FFFFFF',
-          modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
-          overlay: '#00000099', // 99 = 60% opacity
-          shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
-          targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
-          transparent: 'transparent',
-          white: '#FFFFFF',
-          white_smoke: '#F2F2F2',
-          white_snow: '#FCFCFC',
-        },
+            accent_blue: '#005FFF',
+            accent_green: '#20E070',
+            accent_red: '#FF3742',
+            bg_gradient_end: '#F7F7F7',
+            bg_gradient_start: '#FCFCFC',
+            black: '#000000',
+            blue_alice: '#E9F2FF',
+            border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
+            grey: '#7A7A7A',
+            grey_dark: '#17191C',
+            grey_gainsboro: '#DBDBDB',
+            grey_whisper: '#ECEBEB',
+            icon_background: '#FFFFFF',
+            modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
+            overlay: '#00000099', // 99 = 60% opacity
+            shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
+            targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
+            transparent: 'transparent',
+            white: '#FFFFFF',
+            white_smoke: '#F2F2F2',
+            white_snow: '#FCFCFC',
+          },
     spinner: {
       height: 15,
       width: 15,
diff --git a/examples/TypeScriptMessaging/App.tsx b/examples/TypeScriptMessaging/App.tsx
index 6d198b2cb4..1764b547eb 100644
--- a/examples/TypeScriptMessaging/App.tsx
+++ b/examples/TypeScriptMessaging/App.tsx
@@ -228,7 +228,6 @@ const App = () => {
         theme={{
           colors: {
             ...(colorScheme === 'dark' ? DarkTheme : DefaultTheme).colors,
-            background: theme.colors?.white_snow || '#FCFCFC',
           },
           dark: colorScheme === 'dark',
         }}
diff --git a/examples/TypeScriptMessaging/useStreamChatTheme.ts b/examples/TypeScriptMessaging/useStreamChatTheme.ts
index 65d485232b..6766cb785e 100644
--- a/examples/TypeScriptMessaging/useStreamChatTheme.ts
+++ b/examples/TypeScriptMessaging/useStreamChatTheme.ts
@@ -21,6 +21,7 @@ const getChatStyle = (colorScheme: string): DeepPartial<Theme> => ({
           blue_alice: '#00193D',
           border: '#141924',
           grey: '#7A7A7A',
+          grey_dark: '#F7F7F8',
           grey_gainsboro: '#2D2F2F',
           grey_whisper: '#1C1E22',
           icon_background: '#FFFFFF',
@@ -43,6 +44,7 @@ const getChatStyle = (colorScheme: string): DeepPartial<Theme> => ({
           blue_alice: '#E9F2FF',
           border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
           grey: '#7A7A7A',
+          grey_dark: '#17191C',
           grey_gainsboro: '#DBDBDB',
           grey_whisper: '#ECEBEB',
           icon_background: '#FFFFFF',
diff --git a/package/src/components/Indicators/LoadingIndicator.tsx b/package/src/components/Indicators/LoadingIndicator.tsx
index 80d9402ef6..453d044712 100644
--- a/package/src/components/Indicators/LoadingIndicator.tsx
+++ b/package/src/components/Indicators/LoadingIndicator.tsx
@@ -21,14 +21,14 @@ const styles = StyleSheet.create({
 const LoadingIndicatorWrapper: React.FC<{ text: string }> = ({ text }) => {
   const {
     theme: {
-      colors: { black },
+      colors: { black, white_snow },
       loadingIndicator: { container, loadingText },
     },
   } = useTheme();
 
   return (
-    <View style={[styles.container, container]}>
-      <Spinner />
+    <View style={[styles.container, { backgroundColor: white_snow }, container]}>
+      <Spinner height={20} width={20} />
       <Text style={[styles.loadingText, { color: black }, loadingText]} testID='loading'>
         {text}
       </Text>
diff --git a/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx b/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx
index 34a889ea5c..f3c59bc582 100644
--- a/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx
+++ b/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx
@@ -21,7 +21,7 @@ export const SendMessageDisallowedIndicator = () => {
   const { t } = useTranslationContext();
   const {
     theme: {
-      colors: { border, grey_dark },
+      colors: { border, grey_dark, white },
       messageInput: {
         sendMessageDisallowedIndicator: { container, text },
       },
@@ -33,6 +33,7 @@ export const SendMessageDisallowedIndicator = () => {
       style={[
         styles.container,
         {
+          backgroundColor: white,
           borderTopColor: border,
           height: 50,
         },
diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
index 893b212619..4b887b1f1e 100644
--- a/package/src/components/MessageList/MessageList.tsx
+++ b/package/src/components/MessageList/MessageList.tsx
@@ -1072,7 +1072,11 @@ const MessageListWithContext = <
   const renderListEmptyComponent = useCallback(
     () => (
       <View
-        style={[styles.flex, shouldApplyAndroidWorkaround ? styles.invertAndroid : styles.invert]}
+        style={[
+          styles.flex,
+          { backgroundColor: white_snow },
+          shouldApplyAndroidWorkaround ? styles.invertAndroid : styles.invert,
+        ]}
         testID='empty-state'
       >
         <EmptyStateIndicator listType='message' />
@@ -1099,16 +1103,6 @@ const MessageListWithContext = <
     [shouldApplyAndroidWorkaround, HeaderComponent],
   );
 
-  if (!FlatList) return null;
-
-  if (loading) {
-    return (
-      <View style={styles.flex}>
-        <LoadingIndicator listType='message' />
-      </View>
-    );
-  }
-
   const StickyHeaderComponent = () => {
     if (!stickyHeaderDateString) return null;
     if (StickyHeader) return <StickyHeader dateString={stickyHeaderDateString} />;
@@ -1127,6 +1121,16 @@ const MessageListWithContext = <
     additionalFlatListPropsExcludingStyle = rest;
   }
 
+  if (!FlatList) return null;
+
+  if (loading) {
+    return (
+      <View style={[styles.container, { backgroundColor: white_snow }, container]}>
+        <LoadingIndicator listType='message' />
+      </View>
+    );
+  }
+
   return (
     <View
       style={[styles.container, { backgroundColor: white_snow }, container]}