fix: add theme for the bottom sheet styles and message user reactions item (#2827)

Author: khushal87

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -37,7 +37,9 @@ export const MessageUserReactionsItem = <
       messageMenu: {
         userReactions: {
           avatarContainer,
+          avatarInnerContainer,
           avatarName,
+          avatarNameContainer,
           avatarSize,
           radius,
           reactionBubbleBackground,
@@ -69,7 +71,7 @@ export const MessageUserReactionsItem = <
       accessibilityLabel='Individual User Reaction on long press message'
       style={[styles.avatarContainer, avatarContainer]}
     >
-      <View style={styles.avatarInnerContainer}>
+      <View style={[styles.avatarInnerContainer, avatarInnerContainer]}>
         <MessageUserReactionsAvatar reaction={reaction} size={avatarSize} />
         <View
           style={[
@@ -91,7 +93,7 @@ export const MessageUserReactionsItem = <
           />
         </View>
       </View>
-      <View style={styles.avatarNameContainer}>
+      <View style={[styles.avatarNameContainer, avatarNameContainer]}>
         <Text numberOfLines={2} style={[styles.avatarName, { color: black }, avatarName]}>
           {name}
         </Text>

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -45,6 +45,7 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
   const { children, height = windowHeight / 2, onClose, visible } = props;
   const {
     theme: {
+      bottomSheetModal: { container, contentContainer, handle, overlay: overlayTheme },
       colors: { grey, overlay, white_snow },
     },
   } = useTheme();
@@ -121,7 +122,7 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     <Modal animationType='fade' onRequestClose={handleDismiss} transparent visible={visible}>
       <GestureHandlerRootView style={{ flex: 1 }}>
         <TouchableWithoutFeedback onPress={handleDismiss}>
-          <View style={[styles.overlay, { backgroundColor: overlay }]}>
+          <View style={[styles.overlay, { backgroundColor: overlay }, overlayTheme]}>
             <GestureDetector gesture={gesture}>
               <Animated.View
                 style={[
@@ -131,10 +132,13 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
                     height,
                     transform: [{ translateY }],
                   },
+                  container,
                 ]}
               >
-                <View style={[styles.handle, { backgroundColor: grey, width: windowWidth / 4 }]} />
-                <View style={styles.contentContainer}>{children}</View>
+                <View
+                  style={[styles.handle, { backgroundColor: grey, width: windowWidth / 4 }, handle]}
+                />
+                <View style={[styles.contentContainer, contentContainer]}>{children}</View>
               </Animated.View>
             </GestureDetector>
           </View>

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

@@ -127,6 +127,12 @@ export type Theme = {
     presenceIndicator: CircleProps;
     presenceIndicatorContainer: ViewStyle;
   };
+  bottomSheetModal: {
+    container: ViewStyle;
+    contentContainer: ViewStyle;
+    handle: ViewStyle;
+    overlay: ViewStyle;
+  };
   channel: {
     selectChannel: TextStyle;
   };
@@ -443,7 +449,9 @@ export type Theme = {
     };
     userReactions: {
       avatarContainer: ViewStyle;
+      avatarInnerContainer: ViewStyle;
       avatarName: TextStyle;
+      avatarNameContainer: ViewStyle;
       avatarSize: number;
       container: ViewStyle;
       contentContainer: ViewStyle;
@@ -863,6 +871,12 @@ export const defaultTheme: Theme = {
     },
     presenceIndicatorContainer: {},
   },
+  bottomSheetModal: {
+    container: {},
+    contentContainer: {},
+    handle: {},
+    overlay: {},
+  },
   channel: {
     selectChannel: {},
   },
@@ -1174,7 +1188,9 @@ export const defaultTheme: Theme = {
     },
     userReactions: {
       avatarContainer: {},
+      avatarInnerContainer: {},
       avatarName: {},
+      avatarNameContainer: {},
       avatarSize: 64,
       container: {},
       contentContainer: {},