diff --git a/package/src/components/Message/MessageSimple/MessageContent.tsx b/package/src/components/Message/MessageSimple/MessageContent.tsx index c45e2beeb..bdf556aec 100644 --- a/package/src/components/Message/MessageSimple/MessageContent.tsx +++ b/package/src/components/Message/MessageSimple/MessageContent.tsx @@ -164,8 +164,10 @@ const MessageContentWithContext = < }, containerInner, errorContainer, + receiverMessageBackgroundColor, replyBorder, replyContainer, + senderMessageBackgroundColor, wrapper, }, reactionList: { radius, reactionSize }, @@ -225,7 +227,9 @@ const MessageContentWithContext = < ); } - let backgroundColor = grey_gainsboro; + const isMessageReceivedOrErrorType = !isMyMessage || error; + + let backgroundColor = senderMessageBackgroundColor || grey_gainsboro; if (onlyEmojis && !message.quoted_message) { backgroundColor = transparent; } else if (otherAttachments.length) { @@ -234,13 +238,11 @@ const MessageContentWithContext = < } else { backgroundColor = blue_alice; } - } else if (alignment === 'left' || error) { - backgroundColor = white; + } else if (isMessageReceivedOrErrorType) { + backgroundColor = receiverMessageBackgroundColor || white; } - const repliesCurveColor = isMyMessage && !error ? backgroundColor : grey_whisper; - - const isBorderColor = isMyMessage && !error; + const repliesCurveColor = !isMessageReceivedOrErrorType ? backgroundColor : grey_gainsboro; const getBorderRadius = () => { // enum('top', 'middle', 'bottom', 'single') @@ -252,10 +254,10 @@ const MessageContentWithContext = < if (isBottomOrSingle && (!hasThreadReplies || threadList)) { // add relevant sharp corner - if (alignment === 'left') { - borderBottomLeftRadius = borderRadiusS; - } else { + if (isMyMessage) { borderBottomRightRadius = borderRadiusS; + } else { + borderBottomLeftRadius = borderRadiusS; } } @@ -319,7 +321,7 @@ const MessageContentWithContext = < * Otherwise background is transparent, so border radius is not really visible. */ style={[ - alignment === 'left' ? styles.leftAlignItems : styles.rightAlignItems, + isMyMessage ? styles.rightAlignItems : styles.leftAlignItems, { paddingTop: hasReactions ? reactionSize / 2 + radius : 2 }, error ? errorContainer : {}, container, @@ -329,7 +331,7 @@ const MessageContentWithContext = <