From ef5474c71a391731620c0eb24d9c5798ae1245c7 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Tue, 27 May 2025 11:00:22 +0530
Subject: [PATCH 1/2] fix: add filled and unfilled bg color theme properties
 for ReactionListBottom

---
 .../ReactionList/ReactionListBottom.tsx           | 15 ++++++++++++---
 package/src/contexts/themeContext/utils/theme.ts  |  4 ++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx b/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx
index 898de782fc..8ff504e4cb 100644
--- a/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx
+++ b/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,
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index 9de896c54b..a1e5a6f50f 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/package/src/contexts/themeContext/utils/theme.ts
@@ -627,10 +627,12 @@ export type Theme = {
       item: {
         container: ViewStyle;
         countText: TextStyle;
+        filledBackgroundColor: ColorValue;
         icon: ViewStyle;
         iconFillColor: ColorValue;
         iconSize: number;
         iconUnFillColor: ColorValue;
+        unfilledBackgroundColor: ColorValue;
       };
     };
     reactionListTop: {
@@ -1412,10 +1414,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: {

From 5e9f1d445fd3d4b9298d2228a828d4f3838372c5 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Fri, 30 May 2025 17:43:05 +0530
Subject: [PATCH 2/2] feat: add theme properties for message user reaction item

---
 .../MessageMenu/MessageUserReactionsItem.tsx          | 11 ++++++++---
 package/src/contexts/themeContext/utils/theme.ts      |  8 ++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/package/src/components/MessageMenu/MessageUserReactionsItem.tsx b/package/src/components/MessageMenu/MessageUserReactionsItem.tsx
index 7dff4e45e0..eb7f23fda8 100644
--- a/package/src/components/MessageMenu/MessageUserReactionsItem.tsx
+++ b/package/src/components/MessageMenu/MessageUserReactionsItem.tsx
@@ -32,7 +32,7 @@ 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,
@@ -40,9 +40,13 @@ export const MessageUserReactionsItem = ({
           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>
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index a1e5a6f50f..363d3b4494 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/package/src/contexts/themeContext/utils/theme.ts
@@ -471,8 +471,11 @@ 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;
@@ -480,6 +483,7 @@ export type Theme = {
       reactionSelectorContainer: ViewStyle;
       reactionsText: TextStyle;
       title: TextStyle;
+      unfilledBackgroundColor: ColorValue;
     };
   };
   messageSimple: {
@@ -1235,8 +1239,11 @@ 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: {},
@@ -1244,6 +1251,7 @@ export const defaultTheme: Theme = {
       reactionSelectorContainer: {},
       reactionsText: {},
       title: {},
+      unfilledBackgroundColor: Colors.grey_gainsboro,
     },
   },
   messageSimple: {