fix: regression in theme default value colors (#3203)

* fix: regression in theme default value colors

* test: fix issues with test

* fix: remove extra properties

Author: khushal87

package/src/components/Message/Message.tsx

@@ -279,8 +279,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const { client } = chatContext;
   const {
     theme: {
-      colors: { targetedMessageBackground },
-      messageSimple: { targetedMessageContainer, unreadUnderlayColor, wrapper },
+      colors: { targetedMessageBackground, bg_gradient_start },
+      messageSimple: { targetedMessageContainer, unreadUnderlayColor = bg_gradient_start, wrapper },
       screenPadding,
     },
   } = useTheme();

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

@@ -60,18 +60,18 @@ export const ReactionListBottomItem = (props: ReactionListBottomItemProps) => {
   const scaleValue = useRef(new Animated.Value(1)).current;
   const {
     theme: {
-      colors: { black },
+      colors: { accent_blue, black, light_blue, grey, grey_gainsboro },
       messageSimple: {
         reactionListBottom: {
           item: {
             container,
             countText,
-            filledBackgroundColor,
+            filledBackgroundColor = light_blue,
             icon,
-            iconFillColor,
+            iconFillColor = accent_blue,
             iconSize,
-            iconUnFillColor,
-            unfilledBackgroundColor,
+            iconUnFillColor = grey,
+            unfilledBackgroundColor = grey_gainsboro,
           },
         },
       },

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -32,21 +32,21 @@ export const MessageUserReactionsItem = ({
   const { id, name, type } = reaction;
   const {
     theme: {
-      colors: { black, grey_gainsboro, white },
+      colors: { accent_blue, black, grey, grey_gainsboro, light_blue, white },
       messageMenu: {
         userReactions: {
           avatarContainer,
           avatarInnerContainer,
           avatarName,
           avatarNameContainer,
           avatarSize,
-          filledBackgroundColor,
-          iconFilledColor,
-          iconUnFilledColor,
+          filledBackgroundColor = light_blue,
+          iconFilledColor = accent_blue,
+          iconUnFilledColor = grey,
           radius,
           reactionBubbleBackground,
           reactionBubbleBorderRadius,
-          unfilledBackgroundColor,
+          unfilledBackgroundColor = grey_gainsboro,
         },
       },
     },

package/src/components/MessageMenu/ReactionButton.tsx

@@ -29,12 +29,13 @@ export const ReactionButton = (props: ReactionButtonProps) => {
   const { Icon, onPress, selected, type } = props;
   const {
     theme: {
+      colors: { light_blue, accent_blue, white, grey },
       messageMenu: {
         reactionButton: {
-          filledBackgroundColor,
-          filledColor,
-          unfilledBackgroundColor,
-          unfilledColor,
+          filledBackgroundColor = light_blue,
+          filledColor = accent_blue,
+          unfilledBackgroundColor = white,
+          unfilledColor = grey,
         },
         reactionPicker: { buttonContainer, reactionIconSize },
       },

package/src/components/MessageMenu/__tests__/ReactionButton.test.tsx

@@ -34,9 +34,7 @@ describe('ReactionButton', () => {
     );
 
     // Check if the unselected pathFill color is rendered by the mock Icon
-    expect(
-      getByText(defaultTheme.messageMenu.reactionButton.unfilledColor.toString()),
-    ).toBeTruthy();
+    expect(getByText(defaultTheme.colors.grey.toString())).toBeTruthy();
   });
 
   it('should call onPress function with the correct reaction type when pressed', () => {
@@ -72,6 +70,6 @@ describe('ReactionButton', () => {
       </ThemeProvider>,
     );
 
-    expect(getByText(defaultTheme.messageMenu.reactionButton.filledColor.toString())).toBeTruthy();
+    expect(getByText(defaultTheme.colors.accent_blue.toString())).toBeTruthy();
   });
 });

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

@@ -478,10 +478,10 @@ export type Theme = {
       height?: number;
     };
     reactionButton: {
-      filledColor: ColorValue;
-      unfilledColor: ColorValue;
-      filledBackgroundColor: ColorValue;
-      unfilledBackgroundColor: ColorValue;
+      filledColor?: ColorValue;
+      unfilledColor?: ColorValue;
+      filledBackgroundColor?: ColorValue;
+      unfilledBackgroundColor?: ColorValue;
     };
     reactionPicker: {
       buttonContainer: ViewStyle;
@@ -497,19 +497,19 @@ export type Theme = {
       avatarSize: number;
       container: ViewStyle;
       contentContainer: ViewStyle;
-      filledBackgroundColor: ColorValue;
+      filledBackgroundColor?: ColorValue;
       flatlistColumnContainer: ViewStyle;
       flatlistContainer: ViewStyle;
-      iconFilledColor: ColorValue;
-      iconUnFilledColor: ColorValue;
+      iconFilledColor?: ColorValue;
+      iconUnFilledColor?: ColorValue;
       radius: number;
       reactionBubble: ViewStyle;
       reactionBubbleBackground: ViewStyle;
       reactionBubbleBorderRadius: number;
       reactionSelectorContainer: ViewStyle;
       reactionsText: TextStyle;
       title: TextStyle;
-      unfilledBackgroundColor: ColorValue;
+      unfilledBackgroundColor?: ColorValue;
     };
   };
   messagePreview: {
@@ -660,12 +660,12 @@ export type Theme = {
       item: {
         container: ViewStyle;
         countText: TextStyle;
-        filledBackgroundColor: ColorValue;
+        filledBackgroundColor?: ColorValue;
         icon: ViewStyle;
-        iconFillColor: ColorValue;
+        iconFillColor?: ColorValue;
         iconSize: number;
-        iconUnFillColor: ColorValue;
-        unfilledBackgroundColor: ColorValue;
+        iconUnFillColor?: ColorValue;
+        unfilledBackgroundColor?: ColorValue;
       };
     };
     reactionListTop: {
@@ -1275,12 +1275,7 @@ export const defaultTheme: Theme = {
       title: {},
     },
     bottomSheet: {},
-    reactionButton: {
-      filledBackgroundColor: Colors.light_blue,
-      filledColor: Colors.accent_blue,
-      unfilledBackgroundColor: Colors.white,
-      unfilledColor: Colors.grey,
-    },
+    reactionButton: {},
     reactionPicker: {
       buttonContainer: {},
       container: {},
@@ -1295,19 +1290,15 @@ 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,
     },
   },
   messagePreview: {
@@ -1481,12 +1472,8 @@ 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: {
@@ -1533,7 +1520,6 @@ export const defaultTheme: Theme = {
       container: {},
     },
     targetedMessageContainer: {},
-    unreadUnderlayColor: Colors.bg_gradient_start,
     videoThumbnail: {
       container: {},
       roundedView: {},