fix: add theme properties for EmptyStateIndicator for message list (#2667)

* fix: add theme properties for EmptyStateIndicator for message list

* fix: update snapshots

Author: khushal87

package/src/components/Indicators/EmptyStateIndicator.tsx

@@ -6,33 +6,6 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { useViewport } from '../../hooks/useViewport';
 import { ChatIcon, MessageIcon } from '../../icons';
 
-const styles = StyleSheet.create({
-  channelContainer: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  channelDetails: {
-    fontSize: 14,
-    textAlign: 'center',
-  },
-  channelTitle: {
-    fontSize: 16,
-    paddingBottom: 8,
-    paddingTop: 16,
-  },
-  messageContainer: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  messageTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    paddingBottom: 8,
-  },
-});
-
 export type EmptyStateProps = {
   listType?: 'channel' | 'message' | 'default';
 };
@@ -41,7 +14,13 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
   const {
     theme: {
       colors: { black, grey, grey_gainsboro },
-      emptyStateIndicator: { channelContainer, channelDetails, channelTitle },
+      emptyStateIndicator: {
+        channelContainer,
+        channelDetails,
+        channelTitle,
+        messageContainer,
+        messageTitle,
+      },
     },
   } = useTheme();
   const { vw } = useViewport();
@@ -51,7 +30,7 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
   switch (listType) {
     case 'channel':
       return (
-        <View style={[styles.channelContainer, channelContainer]}>
+        <View style={[styles.container, channelContainer]}>
           <MessageIcon height={width} pathFill={grey_gainsboro} width={width} />
           <Text
             style={[styles.channelTitle, { color: black }, channelTitle]}
@@ -69,14 +48,36 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
       );
     case 'message':
       return (
-        <View style={[styles.messageContainer]}>
+        <View style={[styles.container, messageContainer]}>
           <ChatIcon height={width} pathFill={grey_gainsboro} width={width} />
-          <Text style={[styles.messageTitle, { color: grey_gainsboro }]}>
+          <Text style={[styles.messageTitle, { color: grey_gainsboro }, messageTitle]}>
             {t<string>('No chats here yet…')}
           </Text>
         </View>
       );
     default:
-      return <Text style={{ color: black }}>No items exist</Text>;
+      return <Text style={[{ color: black }, messageContainer]}>No items exist</Text>;
   }
 };
+
+const styles = StyleSheet.create({
+  channelDetails: {
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  channelTitle: {
+    fontSize: 16,
+    paddingBottom: 8,
+    paddingTop: 16,
+  },
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  messageTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    paddingBottom: 8,
+  },
+});

package/src/components/Indicators/LoadingDot.tsx

@@ -62,8 +62,8 @@ export const LoadingDot = (props: Props) => {
           width: diameter,
         },
         style,
-        loadingDot,
         dotStyle,
+        loadingDot,
       ]}
     />
   );

package/src/components/Indicators/LoadingErrorIndicator.tsx

@@ -4,24 +4,6 @@ import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    height: '100%',
-    justifyContent: 'center',
-    width: '100%',
-  },
-  errorText: {
-    fontSize: 14,
-    fontWeight: '600',
-    marginTop: 20,
-  },
-  retryText: {
-    fontSize: 30,
-    fontWeight: '600',
-  },
-});
-
 type LoadingErrorWrapperProps = {
   text: string;
   onPress?: () => void;
@@ -85,3 +67,21 @@ export const LoadingErrorIndicator = (props: LoadingErrorProps) => {
 };
 
 LoadingErrorIndicator.displayName = 'LoadingErrorIndicator{loadingErrorIndicator}';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    height: '100%',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  errorText: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginTop: 20,
+  },
+  retryText: {
+    fontSize: 30,
+    fontWeight: '600',
+  },
+});

package/src/components/Indicators/LoadingIndicator.tsx

@@ -5,19 +5,6 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Spinner } from '../Spinner/Spinner';
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  loadingText: {
-    fontSize: 14,
-    fontWeight: '600',
-    marginTop: 20,
-  },
-});
-
 type LoadingIndicatorWrapperProps = { text: string };
 
 const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
@@ -66,3 +53,16 @@ export const LoadingIndicator = (props: LoadingProps) => {
 };
 
 LoadingIndicator.displayName = 'LoadingIndicator{loadingIndicator}';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  loadingText: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginTop: 20,
+  },
+});

package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap

@@ -43,10 +43,10 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
           {
             "marginRight": 2,
           },
-          {},
           {
             "opacity": -0.3333333333333333,
           },
+          {},
         ]
       }
     />
@@ -62,10 +62,10 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
           {
             "marginHorizontal": 2,
           },
-          {},
           {
             "opacity": 0.3333333333333333,
           },
+          {},
         ]
       }
     />
@@ -81,10 +81,10 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
           {
             "marginLeft": 2,
           },
-          {},
           {
             "opacity": 1,
           },
+          {},
         ]
       }
     />

package/src/contexts/themeContext/utils/theme.ts

@@ -167,6 +167,8 @@ export type Theme = {
     channelContainer: ViewStyle;
     channelDetails: TextStyle;
     channelTitle: TextStyle;
+    messageContainer: ViewStyle;
+    messageTitle: TextStyle;
   };
   groupAvatar: {
     container: ViewStyle;
@@ -753,6 +755,8 @@ export const defaultTheme: Theme = {
     channelContainer: {},
     channelDetails: {},
     channelTitle: {},
+    messageContainer: {},
+    messageTitle: {},
   },
   groupAvatar: {
     container: {},