make some fix with watched

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

@@ -18,6 +18,7 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
+import DoneIcon from '@mui/icons-material/Done';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,handleDownload,copied,emojisArr,firstLetter,slicedWord,prodAwsS3 } from '../../../../../../helpers'
@@ -281,8 +282,9 @@ const MessageRightAudio = ({ url,tongue,watched,avatarUrl,color,name,lastName,cr
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
-           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
+            <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}

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

@@ -18,6 +18,7 @@ import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
+import DoneIcon from '@mui/icons-material/Done';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -373,8 +374,9 @@ const MessageRightFile = ({ url,tongue,watched,avatarUrl,color,name,lastName,cre
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
-           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
+            <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}

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

@@ -19,6 +19,7 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
+import DoneIcon from '@mui/icons-material/Done';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'
@@ -333,8 +334,9 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
         <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
-           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
+            <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}

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

@@ -20,6 +20,7 @@ import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
+import DoneIcon from '@mui/icons-material/Done';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -423,8 +424,9 @@ const MessageRightImage = ({url,tongue,watched,avatarUrl,color,createdAt,fullTyp
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
-           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
+            <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}

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

@@ -19,6 +19,7 @@ import ImageIcon from '@mui/icons-material/Image';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
+import DoneIcon from '@mui/icons-material/Done';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'
@@ -332,8 +333,9 @@ const MessageRightReply = ({url,tongue,watched,avatarUrl,color,replyMessage,mess
         <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
         <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
-           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
+            <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}

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

@@ -15,6 +15,7 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
+import DoneIcon from '@mui/icons-material/Done';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,prodAwsS3 } from '../../../../../../helpers'
@@ -285,8 +286,9 @@ const MessageRightText = ({message,tongue,watched,avatarUrl,color,name,lastName,
           </div>
         </div>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
-           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
+            <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}

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

@@ -16,6 +16,7 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
+import DoneIcon from '@mui/icons-material/Done';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
@@ -285,8 +286,9 @@ const MessageRightVideo = ({ url,tongue,watched,avatarUrl,color,name,lastName,cr
         </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
-           <div className={classes.time} style={{ color: watched?'#18bd03':'#414141'}}>{timeStampMessage(createdAt)}</div>
-           {watched&&<DoneAllIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+           <div className={classes.time} style={{ color: '#18bd03'}}>{timeStampMessage(createdAt)}</div>
+           {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
+            <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}

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

@@ -12,6 +12,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Badge from '@mui/material/Badge';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
+import DoneIcon from '@mui/icons-material/Done';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 
@@ -204,7 +205,7 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs,id,pinned,selectedCom
   const [modal, setModal] = useState<boolean>(false);
   const open = Boolean(anchorEl);
   const { name, lastName, avatarUrl, color, companionId, mute, seen, total, watched,
-    typing, online, lastMessage, lastMessageCreatedAt, createdAt } = chat
+    typing, online, lastMessage, lastMessageCreatedAt, createdAt,seenCompanion } = chat
   const openedChat = companionId === selectedCompanionId
   const handlePin = (id: string, pinned:boolean) => {
     pinChat(id,!pinned)
@@ -253,7 +254,8 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs,id,pinned,selectedCom
             secondaryTypographyProps={{color:openedChat?'#ffffff':'#000000'}}/>
           <ListItemIcon className={classes.listItem_iconRight}>
             <div className={classes.listItem_iconTimeChecked}>
-              {watched&& <DoneAllIcon style={{ color: openedChat ? '#ffffff' :'#18bd03' }} fontSize='small' />}
+            {watched &&<DoneAllIcon style={{ color: openedChat ? '#ffffff' : '#18bd03' }} fontSize='small' />}
+            {!watched&&seenCompanion < total&& <DoneIcon 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)}