diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js index 8056fc7..7d82d55 100644 --- a/frontend/src/components/MessagesList/index.js +++ b/frontend/src/components/MessagesList/index.js @@ -130,6 +130,7 @@ const useStyles = makeStyles(theme => ({ position: "relative", backgroundColor: "#ffffff", + color: "#303030", alignSelf: "flex-start", borderTopLeftRadius: 0, borderTopRightRadius: 8, @@ -152,6 +153,7 @@ const useStyles = makeStyles(theme => ({ position: "relative", backgroundColor: "#dcf8c6", + color: "#303030", alignSelf: "flex-end", borderTopLeftRadius: 8, borderTopRightRadius: 8, @@ -453,7 +455,7 @@ const MessagesList = () => { ); } } - if (index + 1 === messagesList.length) { + if (index === messagesList.length - 1) { return (
{ } }; + const renderMessageDivider = (message, index) => { + if (index < messagesList.length && index > 0) { + let messageUser = messagesList[index].fromMe; + let previousMessageUser = messagesList[index - 1].fromMe; + + if (messageUser !== previousMessageUser) { + return ( + + ); + } + } + }; + const renderMessages = () => { if (messagesList.length > 0) { const viewMessagesList = messagesList.map((message, index) => { @@ -471,6 +486,7 @@ const MessagesList = () => { return ( {renderDailyTimestamps(message, index)} + {renderMessageDivider(message, index)}
{message.mediaUrl && checkMessaageMedia(message)}
@@ -486,6 +502,7 @@ const MessagesList = () => { return ( {renderDailyTimestamps(message, index)} + {renderMessageDivider(message, index)}
{message.mediaUrl && checkMessaageMedia(message)}