work on uread messages

src/components/HomePage/CentralBar/ChatBar/Messages/MessageTime/index.tsx

@@ -17,11 +17,11 @@ const useStyles = makeStyles({
   },
 });
 
-interface IMessageTime {
+interface IMessageDivider {
   message:string,
 }
 
-const MessageTime = ({ message }:IMessageTime) => {
+const MessageDivider = ({ message }:IMessageDivider) => {
   const classes = useStyles();
 
   return (
@@ -30,4 +30,4 @@ const MessageTime = ({ message }:IMessageTime) => {
     </div>    
 )};
 
-export  default  MessageTime
+export  default  MessageDivider

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftAudio/index.tsx

@@ -91,8 +91,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -195,7 +195,6 @@ const useStyles = makeStyles({
   borderRight: "15px solid transparent",
   bottom: '0px',
   left: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -206,7 +205,6 @@ tongueTwo: {
   borderRight: "16px solid transparent",
   bottom: "0px",
   left: "-17px",
-  zIndex:1
  },  
 });
 

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftFile/index.tsx

@@ -96,8 +96,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -242,7 +242,6 @@ const useStyles = makeStyles({
   borderRight: "15px solid transparent",
   bottom: '0px',
   left: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -253,7 +252,6 @@ tongueTwo: {
   borderRight: "16px solid transparent",
   bottom: "0px",
   left: "-17px",
-  zIndex:1
  },    
 });
 

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftForward/index.tsx

@@ -106,8 +106,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -215,7 +215,6 @@ const useStyles = makeStyles({
   borderRight: "15px solid transparent",
   bottom: '0px',
   left: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -226,7 +225,6 @@ tongueTwo: {
   borderRight: "16px solid transparent",
   bottom: "0px",
   left: "-17px",
-  zIndex:1
  },    
 });
 
@@ -311,7 +309,7 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,avatar
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${message} , Caption: ${caption}`}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('ForwardMessage')} text={`ForwardMessage: ${forwardMessage} , ForwardCaption: ${forwardCaption}`}>
           <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftImage/index.tsx

@@ -90,8 +90,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -289,7 +289,6 @@ const useStyles = makeStyles({
   borderRight: "15px solid transparent",
   bottom: '0px',
   left: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -300,7 +299,6 @@ tongueTwo: {
   borderRight: "16px solid transparent",
   bottom: "0px",
   left: "-17px",
-  zIndex:1
  },    
 });
 

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftReply/index.tsx

@@ -106,8 +106,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -230,7 +230,6 @@ const useStyles = makeStyles({
   borderRight: "15px solid transparent",
   bottom: '0px',
   left: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -241,7 +240,6 @@ tongueTwo: {
   borderRight: "16px solid transparent",
   bottom: "0px",
   left: "-17px",
-  zIndex:1
  },    
 });
 
@@ -325,7 +323,7 @@ const MessageLeftReply = ({url,tongue,avatarUrl,color,replyMessage,message,name,
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${replyMessage} , Caption: ${replyCaption}`}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('ReplyMessage')} text={`ReplyMessage: ${replyMessage} , ReplyCaption: ${replyCaption}`}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftText/index.tsx

@@ -95,8 +95,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -196,7 +196,6 @@ const useStyles = makeStyles({
   borderRight: "15px solid transparent",
   bottom: '0px',
   left: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -207,7 +206,6 @@ tongueTwo: {
   borderRight: "16px solid transparent",
   bottom: "0px",
   left: "-17px",
-  zIndex:1
  },    
 });
 

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftVideo/index.tsx

@@ -88,8 +88,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -206,7 +206,6 @@ const useStyles = makeStyles({
   borderRight: "15px solid transparent",
   bottom: '0px',
   left: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -217,7 +216,6 @@ tongueTwo: {
   borderRight: "16px solid transparent",
   bottom: "0px",
   left: "-17px",
-  zIndex:1
  },    
 });
 

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightAudio/index.tsx

@@ -91,8 +91,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -194,7 +194,6 @@ const useStyles = makeStyles({
   borderLeft: "15px solid transparent",
   bottom: '0px',
   right: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -205,7 +204,6 @@ tongueTwo: {
   borderLeft: "16px solid transparent",
   bottom: "0px",
   right: "-17px",
-  zIndex:1
  },  
 });
 

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightFile/index.tsx

@@ -97,8 +97,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -242,7 +242,6 @@ const useStyles = makeStyles({
   borderLeft: "15px solid transparent",
   bottom: '0px',
   right: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -253,7 +252,6 @@ tongueTwo: {
   borderLeft: "16px solid transparent",
   bottom: "0px",
   right: "-17px",
-  zIndex:1
  },    
 });
 

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightForward/index.tsx

@@ -107,8 +107,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -215,7 +215,6 @@ const useStyles = makeStyles({
   borderLeft: "15px solid transparent",
   bottom: '0px',
   right: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -226,7 +225,6 @@ tongueTwo: {
   borderLeft: "16px solid transparent",
   bottom: "0px",
   right: "-17px",
-  zIndex:1
  },    
 });
 
@@ -311,7 +309,7 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${message} , Caption: ${caption}`}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('ForwardMessage')} text={`ForwardMessage: ${forwardMessage} , ForwardCaption: ${forwardCaption}`}>
            <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightImage/index.tsx

@@ -91,8 +91,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -279,7 +279,6 @@ const useStyles = makeStyles({
   borderLeft: "15px solid transparent",
   bottom: '0px',
   right: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -290,7 +289,6 @@ tongueTwo: {
   borderLeft: "16px solid transparent",
   bottom: "0px",
   right: "-17px",
-  zIndex:1
  },    
 });
 

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightReply/index.tsx

@@ -107,8 +107,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -215,7 +215,6 @@ const useStyles = makeStyles({
   borderLeft: "15px solid transparent",
   bottom: '0px',
   right: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -226,7 +225,6 @@ tongueTwo: {
   borderLeft: "16px solid transparent",
   bottom: "0px",
   right: "-17px",
-  zIndex:1
  },    
 });
 
@@ -310,7 +308,7 @@ const MessageRightReply = ({url,tongue,watched,avatarUrl,color,replyMessage,mess
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${replyMessage} , Caption: ${replyCaption}`}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('ReplyMessage')} text={`ReplyMessage: ${replyMessage} , ReplyCaption: ${replyCaption}`}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightText/index.tsx

@@ -96,8 +96,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -196,7 +196,6 @@ const useStyles = makeStyles({
   borderLeft: "15px solid transparent",
   bottom: '0px',
   right: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -207,7 +206,6 @@ tongueTwo: {
   borderLeft: "16px solid transparent",
   bottom: "0px",
   right: "-17px",
-  zIndex:1
  },    
 });
 

src/components/HomePage/CentralBar/ChatBar/index.tsx

@@ -19,7 +19,7 @@ import MessageRightImage from './Messages/MessageRightImage'
 import MessageRightAudio from './Messages/MessageRightAudio'
 import MessageRightVideo from './Messages/MessageRightVideo'
 import MessageRightFile from "./Messages/MessageRightFile";
-import MessageTime from "./Messages/MessageTime";
+import MessageDivider from "./Messages/MessageDivider";
 import AlertInfo from "../../../reusableComponents/AlertInfo";
 import { getMessagesMemo } from '../../../../redux/messages/selector'
 import { getAuthorizationState } from '../../../../redux/authorization/selector'
@@ -97,7 +97,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   const dispatch = useDispatch()
   const messagesMemo = useSelector(getMessagesMemo)
   const { number:userNumber,nightMode,silentMode} = useSelector(getAuthorizationState)
-  const { companionId,total,seen,mute } = useSelector(getChat)
+  const { companionId,total,seen,mute,seenCompanion } = useSelector(getChat)
   const scrollChat = useSelector(getScrollChat)
   const [isArrow, setIsArrow] = useState<boolean>(false)
   const [isNew, setIsNew] = useState<{ new: number, mute: boolean }>({ new: 0, mute: false })
@@ -106,6 +106,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   const [modalForward, setModalForward] = useState<boolean>(false)
   let time: any
   let tongue: any
+  let unread: any
   const getSeconds = (createdAt:string) => Math.round(new Date(createdAt).getTime()/ 1000)
   const isSelected = (_id: string) => selectedArr.some((el: string) => el === _id)  
   const handleSelected = (_id: string) => {
@@ -208,6 +209,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
     const idInterval = setInterval(handleReset, refreshAppTime);
     return () => clearInterval(idInterval);
   }, [total, seen, chatDivRef, companionId, openPinned]);
+  
   return (
     <div className={classes.container} >
       <ArrowBack isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo} openPinned={openPinned}/>
@@ -217,10 +219,15 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName,avatarUrl,color,pinned,
           createdAt, number, type, fullType, replyName, replyLastName, replyCaption, caption, emoji, emojiCompanion,
           _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom,forwardMessage,forwardCaption},i) => {
-          const watched = true
+          const watched = seenCompanion - (i + 1) < 0 ? false : true
+          let isUnread 
           let isTime
           let isTongue = false
           const nextTongue = renderArr[i + 1]
+          if (!unread && seen - (i + 1) < 0) {
+            isUnread = true
+            unread = true
+          }
           if (!time) {
             isTime = true
             time = createdAt
@@ -255,14 +262,17 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
             isTongue = false
             tongue = number
           }
+          if(renderArr.length-1 === i) isTongue = true
           if (nextTongue && timeStampFilter(nextTongue.createdAt) !== timeStampFilter(createdAt)) {
             isTongue = true
           }
           const url = `${prodAwsS3}/${message}`
+          const urlForward = `${prodAwsS3}/${forwardMessage}`
           const urlReply = `${prodAwsS3}/${replyMessage}`
           if (number !== userNumber) {
             if (type === 'text' && !oldId && !companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
-              {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
               <MessageLeftText
                message={message}
                tongue={isTongue}
@@ -284,9 +294,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                handleForward={handleForward} 
                /></div>)
             if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
-              {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                <MessageLeftForward
-                url={url}
+                url={urlForward}
                 companionIdForwardToAndFrom={companionIdForwardToAndFrom}
                 oldId={oldId}
                 tongue={isTongue}
@@ -315,7 +326,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleScrollToTheChat={handleScrollToTheChat}
                  /></div>)  
             if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
-              {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                <MessageLeftReply
                 url={urlReply}
                 tongue={isTongue}
@@ -345,7 +357,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 oldId={oldId}
                 /></div>)                             
             if (type === 'image') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                 <MessageLeftImage   
                 url={url}
                 tongue={isTongue}
@@ -368,7 +381,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleForward={handleForward}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                 <MessageLeftAudio    
                 url={url}
                 tongue={isTongue}
@@ -391,7 +405,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleForward={handleForward}
                   /></div>)
             if (type === 'video') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                 <MessageLeftVideo    
                 url={url}
                 tongue={isTongue}
@@ -414,7 +429,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleForward={handleForward}
                   /></div>)
             if (type) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                 <MessageLeftFile   
                 url={url}
                 tongue={isTongue}
@@ -438,7 +454,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                   /></div>)             
           } else {
             if (type === 'text' && !oldId && !companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                 <MessageRightText   
                 message={message}
                 tongue={isTongue}
@@ -461,9 +478,10 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleForward={handleForward}
                 /></div>)
             if (type === 'text' && companionIdForwardToAndFrom) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
               <MessageRightForward
-                url={url}
+                url={urlForward}
                 oldId={oldId}
                 companionIdForwardToAndFrom={companionIdForwardToAndFrom}
                 tongue={isTongue}
@@ -493,7 +511,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleScrollToTheChat={handleScrollToTheChat}
                   /></div>) 
             if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
               <MessageRightReply
                 url={urlReply}
                 tongue={isTongue}
@@ -524,7 +543,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 oldId={oldId}
                 /></div>)                             
             if (type === 'image') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                 <MessageRightImage   
                 url={url}
                 tongue={isTongue}
@@ -548,7 +568,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleForward={handleForward}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                 <MessageRightAudio    
                 url={url}
                 tongue={isTongue}
@@ -572,7 +593,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 handleForward={handleForward}
                   /></div>)
             if (type === 'video') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                  <MessageRightVideo  
                  url={url}
                  tongue={isTongue}
@@ -596,7 +618,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                  handleForward={handleForward}
                    /></div>)
             if (type) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
-              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
+              {isTime&&<MessageDivider message={timeStampFilter(createdAt)}/>}
+              {isUnread&&<MessageDivider message='Unread Messages'/>}
                  <MessageRightFile  
                  url={url}
                  tongue={isTongue}

src/components/HomePage/LeftBar/ChatsList/ChatItem/index.tsx

@@ -94,7 +94,6 @@ const useStyles = makeStyles({
   },
   listItemInnerText__icon: {
     marginLeft: 5,
-    color: '#959595',
   },
   listItem_iconAvatar: {
     marginRight:10
@@ -116,6 +115,7 @@ const useStyles = makeStyles({
     marginBottom:2
   },
   listItem_iconRightBtn: {
+    cursor: 'pointer',
     background: '#0ac40a',
     borderRadius: '50%',
     color: '#ffffff',
@@ -133,7 +133,8 @@ const useStyles = makeStyles({
       outline: 'solid 3px #3ee415',
     }
   },
-    listItem_iconRightBtnMute: {
+  listItem_iconRightBtnMute: {
+    cursor: 'pointer',
     background: '#a7aaa7',
     borderRadius: '50%',
     color: '#ffffff',
@@ -153,7 +154,6 @@ const useStyles = makeStyles({
   },
   pinnedIcon: {
     transform: 'rotate(45deg)',
-    color: '#959595',
   },
   listIconsRightContainer: {
     marginLeft: 'auto',
@@ -165,14 +165,11 @@ const useStyles = makeStyles({
   listItem_icon_time: {
     fontSize: 12,
     marginLeft: 5,
-    color: '#1b1b1b'
   },
   listItem_typing: {
-    color: '#4d4d4d',
     animation: 'ripple 4s infinite ease-in-out',   
   },  
   listItem_dots: {
-    color: '#1b1b1b',
     fontWeight: 'bold',
     display:'inline-block',
     fontFamily: 'monospace',
@@ -197,9 +194,10 @@ interface IChatItem {
   handleListItemClick: (companionId: string) => void,
   handleNewMsgs: (e: any, companionId: string) => void,
   id: string,
-  pinned:boolean,
+  pinned: boolean,
+  selectedCompanionId: string,
 }
-const  ChatItem = ({chat,handleListItemClick,handleNewMsgs,id,pinned}:IChatItem) => {
+const  ChatItem = ({chat,handleListItemClick,handleNewMsgs,id,pinned,selectedCompanionId}:IChatItem) => {
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -207,7 +205,7 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs,id,pinned}:IChatItem)
   const open = Boolean(anchorEl);
   const { name, lastName, avatarUrl, color, companionId, mute, seen, total, watched,
     typing, online, lastMessage, lastMessageCreatedAt, createdAt } = chat
-
+  const openedChat = companionId === selectedCompanionId
   const handlePin = (id: string, pinned:boolean) => {
     pinChat(id,!pinned)
     handleClose(undefined)
@@ -222,16 +220,16 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs,id,pinned}:IChatItem)
     e.preventDefault()
     setAnchorEl(e.currentTarget)
     setSelected(true)
-  }  
-
+  }
+  
   return (
-    <div>
+    <>
       {modal&&<DeleteModal setModal={setModal} chat={chat}/>}
       <ListItemButton
-        selected={selected}
+        sx={{backgroundColor: openedChat ? '#26afee' : selected ? 'rgba(0, 0, 0, 0.1)' : 'transparent',
+        '&:hover':{backgroundColor:openedChat ? '#26afee':'rgba(0, 0, 0, 0.1)'}}}
         onClick={() => handleListItemClick(companionId)}
-        onContextMenu={(e) => handleContextMenu(e)}
-      >
+        onContextMenu={(e) => handleContextMenu(e)}>
         <ListItemIcon className={classes.listItem_iconAvatar}>
           <StyledBadge overlap="circular"  variant={online === 'true'?'dot':'standard'}
              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
@@ -240,26 +238,33 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs,id,pinned}:IChatItem)
               {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
             </Avatar>
           </StyledBadge>
-          </ListItemIcon> 
-          <ListItemText primary={<div className={classes.listItemInnerText}>
+        </ListItemIcon> 
+        <ListItemText primaryTypographyProps={{color:openedChat?'#ffffff':'#000000'}} primary={<div className={classes.listItemInnerText}>
             <span>{`${firstLetter(name)}${slicedWord(name, 15, 1)} 
-             ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
-            {mute&&<VolumeOffIcon className={classes.listItemInnerText__icon} fontSize='small' />}</div>}
-            secondary={typing ? <span className={classes.listItem_typing}>
-            typing<span className={classes.listItem_dots}>...</span></span> :
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
+            {mute && <VolumeOffIcon style={{color:openedChat?'#ffffff':'#959595'}}
+            className={classes.listItemInnerText__icon} fontSize='small' />}</div>}
+            secondary={typing ? <span style={{color:openedChat?'#ffffff':'#4d4d4d'}}
+            className={classes.listItem_typing}>
+            typing<span style={{color:openedChat?'#ffffff':'#1b1b1b'}}
+            className={classes.listItem_dots}>...</span></span> :
             lastMessage ? slicedWord(lastMessage, 35) :
-            `${firstLetter(name)}${slicedWord(name, 8, 1)} joined Telegram`}/>
+            `${firstLetter(name)}${slicedWord(name, 8, 1)} joined Telegram`}
+            secondaryTypographyProps={{color:openedChat?'#ffffff':'#000000'}}/>
           <ListItemIcon className={classes.listItem_iconRight}>
             <div className={classes.listItem_iconTimeChecked}>
-              {watched&& <DoneAllIcon style={{ color: '#18bd03' }} fontSize='small' />}
-              <Typography className={classes.listItem_icon_time} variant="h6" color="initial">
-                {timeStampEU(lastMessageCreatedAt?lastMessageCreatedAt:createdAt)}
-              </Typography>
+              {watched&& <DoneAllIcon style={{ color: openedChat ? '#ffffff' :'#18bd03' }} fontSize='small' />}
+            <Typography className={classes.listItem_icon_time} style={{ color: openedChat ? '#ffffff' : '#1b1b1b' }}
+              variant="h6" color="initial">
+              {timeStampEU(lastMessageCreatedAt?lastMessageCreatedAt:createdAt)}
+            </Typography>
           </div>
           <div className={classes.listIconsRightContainer}>
-            {pinned && <PushPinIcon className={classes.pinnedIcon} fontSize='small' />}
+            {pinned && <PushPinIcon className={classes.pinnedIcon} fontSize='small'
+            style={{color:openedChat?'#ffffff':'#959595'}}/>}
             {lastMessage && total > seen &&
               <button onClick={(e) => handleNewMsgs(e, companionId)}
+                style={{outline:openedChat?'none':undefined,color:openedChat&&!mute?'#26afee':openedChat?'#ffffff':undefined,backgroundColor:openedChat&&!mute?'#ffffff':openedChat?'#a7aaa7':undefined}}
                 className={mute ? classes.listItem_iconRightBtnMute : classes.listItem_iconRightBtn}>
                 {total - seen}
               </button>}            
@@ -288,7 +293,7 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs,id,pinned}:IChatItem)
             Delete chat
         </MenuItem>       
        </StyledMenu>    
-    </div>
+    </>
   );
 }
 export default ChatItem

src/components/HomePage/LeftBar/ChatsList/index.tsx

@@ -114,7 +114,7 @@ const ChatsList = ({sort}:IChatsList) => {
       aria-label="main mailbox folders">
       {sortedChats.map((el) => <ChatItem key={el.number} chat={el}  
         handleListItemClick={handleListItemClick} handleNewMsgs={handleNewMsgs}
-        id={el._id} pinned={el.pinned}/>)}
+        id={el._id} pinned={el.pinned} selectedCompanionId={chat.companionId} />)}
     </List>
   ):<AlertInfo name='You do not have Chats yet!' />;
 }

src/redux/chat/reducer/index.ts

@@ -23,6 +23,7 @@ const initialState: TChat = {
      mute: false,
      sort:false,
      seen: 0,
+     seenCompanion: 0,
      total: 0,
      watched: false,
      typing: false,

src/typescript/redux/chat/types.ts

@@ -12,6 +12,7 @@ export type TChat = {
   mute: boolean,
   sort:boolean,
   seen: number,
+  seenCompanion: number,
   total: number,
   watched: boolean,
   typing: boolean,

src/typescript/redux/chats/types.ts

@@ -12,6 +12,7 @@ export type TChat = {
   mute: boolean,
   sort:boolean,
   seen: number,
+  seenCompanion: number,
   total: number,
   watched: boolean,
   typing: boolean,