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)}