feat: add theme properties for message user reaction item

Author: khushal87

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: {
@@ -1235,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: {