fix: add filled and unfilled bg color theme properties for ReactionListBottom (#3100)

* fix: add filled and unfilled bg color theme properties for ReactionListBottom

* feat: add theme properties for message user reaction item

Author: khushal87

package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx

@@ -60,10 +60,19 @@ export const ReactionListBottomItem = (props: ReactionListBottomItemProps) => {
   const scaleValue = useRef(new Animated.Value(1)).current;
   const {
     theme: {
-      colors: { black, grey_gainsboro, light_blue },
+      colors: { black },
       messageSimple: {
         reactionListBottom: {
-          item: { container, countText, icon, iconFillColor, iconSize, iconUnFillColor },
+          item: {
+            container,
+            countText,
+            filledBackgroundColor,
+            icon,
+            iconFillColor,
+            iconSize,
+            iconUnFillColor,
+            unfilledBackgroundColor,
+          },
         },
       },
     },
@@ -134,7 +143,7 @@ export const ReactionListBottomItem = (props: ReactionListBottomItemProps) => {
         style={[
           styles.itemContainer,
           {
-            backgroundColor: reaction.own ? light_blue : grey_gainsboro,
+            backgroundColor: reaction.own ? filledBackgroundColor : unfilledBackgroundColor,
             transform: [{ scale: scaleValue }],
           },
           container,

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -32,17 +32,21 @@ export const MessageUserReactionsItem = ({
   const { id, name, type } = reaction;
   const {
     theme: {
-      colors: { accent_blue, black, grey, grey_gainsboro, white },
+      colors: { black, grey_gainsboro, white },
       messageMenu: {
         userReactions: {
           avatarContainer,
           avatarInnerContainer,
           avatarName,
           avatarNameContainer,
           avatarSize,
+          filledBackgroundColor,
+          iconFilledColor,
+          iconUnFilledColor,
           radius,
           reactionBubbleBackground,
           reactionBubbleBorderRadius,
+          unfilledBackgroundColor,
         },
       },
     },
@@ -76,7 +80,8 @@ export const MessageUserReactionsItem = ({
           style={[
             styles.reactionBubbleBackground,
             {
-              backgroundColor: grey_gainsboro,
+              backgroundColor:
+                alignment === 'left' ? filledBackgroundColor : unfilledBackgroundColor,
               borderColor: alignment === 'left' ? white : grey_gainsboro,
               borderWidth: radius / 2,
               left,
@@ -87,7 +92,7 @@ export const MessageUserReactionsItem = ({
         >
           <Icon
             height={reactionBubbleBorderRadius / 2}
-            pathFill={alignment === 'left' ? accent_blue : grey}
+            pathFill={alignment === 'left' ? iconFilledColor : iconUnFilledColor}
             width={reactionBubbleBorderRadius / 2}
           />
         </View>

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

@@ -471,15 +471,19 @@ export type Theme = {
       avatarSize: number;
       container: ViewStyle;
       contentContainer: ViewStyle;
+      filledBackgroundColor: ColorValue;
       flatlistColumnContainer: ViewStyle;
       flatlistContainer: ViewStyle;
+      iconFilledColor: ColorValue;
+      iconUnFilledColor: ColorValue;
       radius: number;
       reactionBubble: ViewStyle;
       reactionBubbleBackground: ViewStyle;
       reactionBubbleBorderRadius: number;
       reactionSelectorContainer: ViewStyle;
       reactionsText: TextStyle;
       title: TextStyle;
+      unfilledBackgroundColor: ColorValue;
     };
   };
   messageSimple: {
@@ -627,10 +631,12 @@ export type Theme = {
       item: {
         container: ViewStyle;
         countText: TextStyle;
+        filledBackgroundColor: ColorValue;
         icon: ViewStyle;
         iconFillColor: ColorValue;
         iconSize: number;
         iconUnFillColor: ColorValue;
+        unfilledBackgroundColor: ColorValue;
       };
     };
     reactionListTop: {
@@ -1233,15 +1239,19 @@ export const defaultTheme: Theme = {
       avatarSize: 64,
       container: {},
       contentContainer: {},
+      filledBackgroundColor: Colors.light_blue,
       flatlistColumnContainer: {},
       flatlistContainer: {},
+      iconFilledColor: Colors.accent_blue,
+      iconUnFilledColor: Colors.grey,
       radius: 2,
       reactionBubble: {},
       reactionBubbleBackground: {},
       reactionBubbleBorderRadius: 24,
       reactionSelectorContainer: {},
       reactionsText: {},
       title: {},
+      unfilledBackgroundColor: Colors.grey_gainsboro,
     },
   },
   messageSimple: {
@@ -1412,10 +1422,12 @@ export const defaultTheme: Theme = {
       item: {
         container: {},
         countText: {},
+        filledBackgroundColor: Colors.light_blue,
         icon: {},
         iconFillColor: Colors.accent_blue,
         iconSize: 16,
         iconUnFillColor: Colors.grey,
+        unfilledBackgroundColor: Colors.grey_gainsboro,
       },
     },
     reactionListTop: {