fix: theme for the message bubble and replies (#2766)

* fix: theme for the message bubble and replies

* fix: theme for the message bubble and replies

* fix: add null coleasing operator

Author: khushal87

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -149,7 +149,7 @@ const MessageContentWithContext = <
 
   const {
     theme: {
-      colors: { blue_alice, grey_gainsboro, grey_whisper, transparent, white },
+      colors: { blue_alice, grey_whisper, light_gray, transparent, white_snow },
       messageSimple: {
         content: {
           container: {
@@ -214,20 +214,20 @@ const MessageContentWithContext = <
 
   const isMessageReceivedOrErrorType = !isMyMessage || error;
 
-  let backgroundColor = senderMessageBackgroundColor || grey_gainsboro;
+  let backgroundColor = senderMessageBackgroundColor ?? light_gray;
   if (onlyEmojis && !message.quoted_message) {
     backgroundColor = transparent;
   } else if (otherAttachments.length) {
     if (otherAttachments[0].type === 'giphy') {
-      backgroundColor = message.quoted_message ? grey_gainsboro : transparent;
+      backgroundColor = message.quoted_message ? light_gray : transparent;
     } else {
       backgroundColor = blue_alice;
     }
   } else if (isMessageReceivedOrErrorType) {
-    backgroundColor = receiverMessageBackgroundColor || white;
+    backgroundColor = receiverMessageBackgroundColor ?? white_snow;
   }
 
-  const repliesCurveColor = !isMessageReceivedOrErrorType ? backgroundColor : grey_gainsboro;
+  const repliesCurveColor = !isMessageReceivedOrErrorType ? backgroundColor : light_gray;
 
   const getBorderRadius = () => {
     // enum('top', 'middle', 'bottom', 'single')

package/src/components/Message/MessageSimple/MessageReplies.tsx

@@ -32,7 +32,7 @@ const styles = StyleSheet.create({
   },
   messageRepliesCurve: {
     borderTopWidth: 0,
-    borderWidth: 1,
+    borderWidth: 2,
     height: 16,
     width: 16,
   },
@@ -181,13 +181,15 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     message: prevMessage,
     noBorder: prevNoBorder,
     onOpenThread: prevOnOpenThread,
+    repliesCurveColor: prevRepliesCurveColor,
     t: prevT,
     threadList: prevThreadList,
   } = prevProps;
   const {
     message: nextMessage,
     noBorder: nextNoBorder,
     onOpenThread: nextOnOpenThread,
+    repliesCurveColor: nextRepliesCurveColor,
     t: nextT,
     threadList: nextThreadList,
   } = nextProps;
@@ -201,6 +203,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const noBorderEqual = prevNoBorder === nextNoBorder;
   if (!noBorderEqual) return false;
 
+  const repliesCurveColorEqual = prevRepliesCurveColor === nextRepliesCurveColor;
+  if (!repliesCurveColorEqual) return false;
+
   const tEqual = prevT === nextT;
   if (!tEqual) return false;
 

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -170,7 +170,7 @@ const MessageOverlayWithContext = <
   );
 
   const {
-    colors: { blue_alice, grey_gainsboro, grey_whisper, transparent },
+    colors: { blue_alice, grey_gainsboro, grey_whisper, light_gray, transparent, white_snow },
     messageSimple: {
       content: {
         container: { borderRadiusL, borderRadiusS },
@@ -364,8 +364,8 @@ const MessageOverlayWithContext = <
                             : grey_gainsboro
                           : blue_alice
                         : alignment === 'left'
-                        ? receiverMessageBackgroundColor
-                        : senderMessageBackgroundColor,
+                        ? receiverMessageBackgroundColor ?? white_snow
+                        : senderMessageBackgroundColor ?? light_gray,
                     borderBottomLeftRadius:
                       (groupStyle === 'left_bottom' || groupStyle === 'left_single') &&
                       (!hasThreadReplies || threadList)

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -416,7 +416,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "overflow": "hidden",
                                 },
                                 {
-                                  "backgroundColor": "#F2F2F2",
+                                  "backgroundColor": "#FCFCFC",
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
@@ -742,7 +742,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "overflow": "hidden",
                                 },
                                 {
-                                  "backgroundColor": "#F2F2F2",
+                                  "backgroundColor": "#FCFCFC",
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
@@ -1068,7 +1068,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "overflow": "hidden",
                                 },
                                 {
-                                  "backgroundColor": "#F2F2F2",
+                                  "backgroundColor": "#FCFCFC",
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
@@ -1422,7 +1422,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "overflow": "hidden",
                                     },
                                     {
-                                      "backgroundColor": "#F2F2F2",
+                                      "backgroundColor": "#FCFCFC",
                                       "borderBottomLeftRadius": 0,
                                       "borderBottomRightRadius": 16,
                                       "borderColor": "#ECEBEB",

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

@@ -1218,10 +1218,8 @@ export const defaultTheme: Theme = {
       metaText: {
         fontSize: 12,
       },
-      receiverMessageBackgroundColor: Colors.white_smoke,
       replyBorder: {},
       replyContainer: {},
-      senderMessageBackgroundColor: Colors.grey_gainsboro,
       textContainer: {
         onlyEmojiMarkdown: { text: { fontSize: 50 } },
       },