From 9d5a9d2fc08103e34cd865aeb9788ed4050035e2 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Fri, 8 Nov 2024 11:34:05 +0530
Subject: [PATCH 1/3] fix: theme for the message bubble and replies

---
 .../Message/MessageSimple/MessageContent.tsx           | 10 +++++-----
 .../Message/MessageSimple/MessageReplies.tsx           |  7 ++++++-
 .../Thread/__tests__/__snapshots__/Thread.test.js.snap |  8 ++++----
 package/src/contexts/themeContext/utils/theme.ts       |  2 --
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/package/src/components/Message/MessageSimple/MessageContent.tsx b/package/src/components/Message/MessageSimple/MessageContent.tsx
index 4a6a20fe9d..54543e85b2 100644
--- a/package/src/components/Message/MessageSimple/MessageContent.tsx
+++ b/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')
diff --git a/package/src/components/Message/MessageSimple/MessageReplies.tsx b/package/src/components/Message/MessageSimple/MessageReplies.tsx
index c98a82df0d..9f3092bf23 100644
--- a/package/src/components/Message/MessageSimple/MessageReplies.tsx
+++ b/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,6 +181,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     message: prevMessage,
     noBorder: prevNoBorder,
     onOpenThread: prevOnOpenThread,
+    repliesCurveColor: prevRepliesCurveColor,
     t: prevT,
     threadList: prevThreadList,
   } = prevProps;
@@ -188,6 +189,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     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;
 
diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
index 5f63002d17..8622e18f8f 100644
--- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
+++ b/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",
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index 0784cfa111..9e380e064c 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/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 } },
       },

From 5402f32d3576d26169e021d63f4b1a15f111f1de Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Fri, 8 Nov 2024 11:42:17 +0530
Subject: [PATCH 2/3] fix: theme for the message bubble and replies

---
 package/src/components/MessageOverlay/MessageOverlay.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package/src/components/MessageOverlay/MessageOverlay.tsx b/package/src/components/MessageOverlay/MessageOverlay.tsx
index ae206e1f75..599c8fbfdb 100644
--- a/package/src/components/MessageOverlay/MessageOverlay.tsx
+++ b/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)

From 5f14e60caa8889fa75f37daecdd920593e3692eb Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Fri, 8 Nov 2024 11:43:23 +0530
Subject: [PATCH 3/3] fix: add null coleasing operator

---
 .../src/components/Message/MessageSimple/MessageContent.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package/src/components/Message/MessageSimple/MessageContent.tsx b/package/src/components/Message/MessageSimple/MessageContent.tsx
index 54543e85b2..977d2c4554 100644
--- a/package/src/components/Message/MessageSimple/MessageContent.tsx
+++ b/package/src/components/Message/MessageSimple/MessageContent.tsx
@@ -214,7 +214,7 @@ const MessageContentWithContext = <
 
   const isMessageReceivedOrErrorType = !isMyMessage || error;
 
-  let backgroundColor = senderMessageBackgroundColor || light_gray;
+  let backgroundColor = senderMessageBackgroundColor ?? light_gray;
   if (onlyEmojis && !message.quoted_message) {
     backgroundColor = transparent;
   } else if (otherAttachments.length) {
@@ -224,7 +224,7 @@ const MessageContentWithContext = <
       backgroundColor = blue_alice;
     }
   } else if (isMessageReceivedOrErrorType) {
-    backgroundColor = receiverMessageBackgroundColor || white_snow;
+    backgroundColor = receiverMessageBackgroundColor ?? white_snow;
   }
 
   const repliesCurveColor = !isMessageReceivedOrErrorType ? backgroundColor : light_gray;