fix: add sender and receiver background color for message bubble in message overlay (#2710)

Author: khushal87

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -168,12 +168,14 @@ const MessageOverlayWithContext = <
   );
 
   const {
-    colors: { blue_alice, grey_gainsboro, grey_whisper, transparent, white_smoke },
+    colors: { blue_alice, grey_gainsboro, grey_whisper, transparent },
     messageSimple: {
       content: {
         container: { borderRadiusL, borderRadiusS },
         containerInner,
+        receiverMessageBackgroundColor,
         replyContainer,
+        senderMessageBackgroundColor,
       },
     },
     overlay: { container: containerStyle, padding: overlayPadding },
@@ -360,8 +362,8 @@ const MessageOverlayWithContext = <
                             : grey_gainsboro
                           : blue_alice
                         : alignment === 'left'
-                        ? white_smoke
-                        : grey_gainsboro,
+                        ? receiverMessageBackgroundColor
+                        : senderMessageBackgroundColor,
                     borderBottomLeftRadius:
                       (groupStyle === 'left_bottom' || groupStyle === 'left_single') &&
                       (!hasThreadReplies || threadList)

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

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