fix: add reaction button bg theme for filled and unfilled case (#3149)

Author: khushal87

package/src/components/MessageMenu/ReactionButton.tsx

@@ -29,9 +29,13 @@ export const ReactionButton = (props: ReactionButtonProps) => {
   const { Icon, onPress, selected, type } = props;
   const {
     theme: {
-      colors: { light_blue, white },
       messageMenu: {
-        reactionButton: { filledColor, unfilledColor },
+        reactionButton: {
+          filledBackgroundColor,
+          filledColor,
+          unfilledBackgroundColor,
+          unfilledColor,
+        },
         reactionPicker: { buttonContainer, reactionIconSize },
       },
     },
@@ -49,7 +53,7 @@ export const ReactionButton = (props: ReactionButtonProps) => {
       onPress={onPressHandler}
       style={({ pressed }) => [
         styles.reactionButton,
-        { backgroundColor: pressed || selected ? light_blue : white },
+        { backgroundColor: pressed || selected ? filledBackgroundColor : unfilledBackgroundColor },
         buttonContainer,
       ]}
     >

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

@@ -456,6 +456,8 @@ export type Theme = {
     reactionButton: {
       filledColor: ColorValue;
       unfilledColor: ColorValue;
+      filledBackgroundColor: ColorValue;
+      unfilledBackgroundColor: ColorValue;
     };
     reactionPicker: {
       buttonContainer: ViewStyle;
@@ -1222,7 +1224,9 @@ export const defaultTheme: Theme = {
     },
     bottomSheet: {},
     reactionButton: {
+      filledBackgroundColor: Colors.light_blue,
       filledColor: Colors.accent_blue,
+      unfilledBackgroundColor: Colors.white,
       unfilledColor: Colors.grey,
     },
     reactionPicker: {