work on visual part of chat

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

@@ -3,7 +3,6 @@ import { styled } from '@mui/material/styles';
 import { useState } from "react";
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
-import AudioFileIcon from '@mui/icons-material/AudioFile';
 import ReactAudioPlayer from 'react-audio-player';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -80,14 +79,6 @@ const useStyles = makeStyles({
     width:350,
     borderRadius: 7,
   },
-  wrapperInner: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    width: '100%',
-    cursor: 'pointer',
-    padding:'10px 0px',
-  },
   informationWrapper: {
     display: 'flex',
     alignItems: 'center',
@@ -100,17 +91,10 @@ const useStyles = makeStyles({
     fontSize: ".65em",
     fontWeight:600,
     color: '#414141',
-  },
-  folderIcon: {
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },  
+  }, 
   player: {
-    margin: '0px 5px 0px 0px',
     borderRadius: 7,
+    width:'100%'
   },
   modalDelete: {
     background: '#ffffff',
@@ -244,7 +228,7 @@ const MessageLeftAudio = ({ url,tongue,watched,edited,avatarUrl,color,name,lastN
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Link')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -275,15 +259,11 @@ const MessageLeftAudio = ({ url,tongue,watched,edited,avatarUrl,color,name,lastN
     <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={classes.wrapper} style={{backgroundColor: selected ? '#babdbc' : "#ffffff",pointerEvents: isSomeSelected ? 'none' : 'auto'}}>
-         <Typography style={{color: "#00b333"}} variant="h6" align="right">
+         <Typography style={{color: "#00b333",marginBottom:10}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
-        <div className={classes.wrapperInner}>
-          <AudioFileIcon onClick={() => handleDownload(url, fullType)}
-            className={classes.folderIcon} fontSize='large' />
-          <ReactAudioPlayer className={classes.player} src={url} controls />
-        </div>
+        <ReactAudioPlayer className={classes.player} src={url} controls />
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
            <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
@@ -326,12 +306,12 @@ const MessageLeftAudio = ({ url,tongue,watched,edited,avatarUrl,color,name,lastN
             <DownloadIcon/>
             Download
         </MenuItem>         
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+        {caption&&<CopyToClipboard onCopy={() => handleClose('copy')} text={caption}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Link
+             Copy Text
           </MenuItem>
-        </CopyToClipboard>
+        </CopyToClipboard>}
         <MenuItem onClick={() => {
           pinMessageById(_id, !pinned)
           handleClose(undefined)

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

@@ -82,17 +82,6 @@ const useStyles = makeStyles({
     padding: 5,
     borderRadius: 7, 
   },
-  wrapperInner: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    width: '100%',
-    cursor: 'pointer',
-    padding:'10px 10px 10px 0px',
-    '&:hover': {
-      backgroundColor: 'rgba(104, 105, 104, 0.2)'
-    }
-  },  
   informationWrapper: {
     display: 'flex',
     alignItems: 'center',
@@ -320,7 +309,7 @@ const MessageLeftFile = ({ url,tongue,watched,edited,avatarUrl,color,name,lastNa
     }
   }
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Link')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -366,14 +355,13 @@ const MessageLeftFile = ({ url,tongue,watched,edited,avatarUrl,color,name,lastNa
       </div>}
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':"#ffffff",pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#00b333"}} variant="h6" align="right">
+        <Typography style={{color: "#00b333",marginBottom:10}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
-        <div className={classes.wrapperInner} id='read' onClick={handleOpenRead}>
-          <InsertDriveFileIcon onClick={handleDownloadFile} className={classes.folderIcon} fontSize='large' />
-          {!read &&<ListItemText primary='Press to read the File'/>} 
-        </div>
+        {!read &&<Button fullWidth onClick={handleOpenRead} variant="contained" color='warning' style={{fontWeight:500,fontSize:18}}>
+            Read File
+          </Button>}
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
            <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
@@ -416,12 +404,12 @@ const MessageLeftFile = ({ url,tongue,watched,edited,avatarUrl,color,name,lastNa
             <DownloadIcon/>
             Download
         </MenuItem>         
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+        {caption&&<CopyToClipboard onCopy={() => handleClose('copy')} text={caption}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Link
+             Copy Text
           </MenuItem>
-        </CopyToClipboard>
+        </CopyToClipboard>}
         <MenuItem onClick={() => {
           pinMessageById(_id, !pinned)
           handleClose(undefined)

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

@@ -272,7 +272,7 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watche
   const checked = isSelected(_id)
   
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Message')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -312,7 +312,7 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watche
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('ForwardMessage')} text={`ForwardMessage: ${forwardMessage} , ForwardCaption: ${forwardCaption}`}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('Text')} text={`${forwardMessage ? forwardMessage : ''} ${forwardCaption ? forwardCaption : ''}`}>
           <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
@@ -329,7 +329,7 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watche
              {`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)}
               ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
             </Typography>
-            <ListItemText primary={forwardMessage} primaryTypographyProps={{ color: "#535353" }} />
+            <ListItemText primary={fullType === null?forwardMessage:fullType} primaryTypographyProps={{ color: "#535353" }} />
             <ListItemText secondary={forwardCaption} secondaryTypographyProps={{color: "#535353"}}/>
           </div>
         </div>
@@ -372,7 +372,7 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watche
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -3,7 +3,6 @@ import { styled } from '@mui/material/styles';
 import { useState, useRef } from "react";
 import Typography from '@mui/material/Typography';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import ImageIcon from '@mui/icons-material/Image';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -82,11 +81,6 @@ const useStyles = makeStyles({
     borderRadius: 7,
     padding: 5,
   },
-  wrapperInner: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-  },
   informationWrapper: {
     display: 'flex',
     alignItems: 'center',
@@ -102,10 +96,9 @@ const useStyles = makeStyles({
   },  
   image: {
     borderRadius: 7,
-    width: 348,
+    width: '100%',
     maxHeight: 'auto',
     cursor: 'pointer',
-    padding: '10px 0px 10px 0px',
   },    
   bntDownload: {
     backgroundColor: 'inherit',
@@ -269,14 +262,6 @@ const useStyles = makeStyles({
     top: -10,
     pointerEvents: 'auto'
   },
-  folderIcon: {
-    marginRight: 7,
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },
  avatarIcon: {
     position: 'absolute',
     left: -54,
@@ -364,7 +349,7 @@ const MessagesLeftImage = ({url,tongue,watched,edited,avatarUrl,color,createdAt,
     }
   }  
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Link')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -424,16 +409,12 @@ const MessagesLeftImage = ({url,tongue,watched,edited,avatarUrl,color,createdAt,
     <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#00b333"}} variant="h6" align="right">
+        <Typography style={{color: "#00b333",marginBottom:10}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
-        <div className={classes.wrapperInner}>
-          <ImageIcon onClick={() => handleDownload(url, fullType)}
-            className={classes.folderIcon} fontSize='large' />
-          <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
+        <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
             style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
-        </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
            <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
@@ -476,12 +457,12 @@ const MessagesLeftImage = ({url,tongue,watched,edited,avatarUrl,color,createdAt,
             <DownloadIcon/>
             Download
         </MenuItem>        
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+        {caption&&<CopyToClipboard onCopy={() => handleClose('copy')} text={caption}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Link
+             Copy Text
           </MenuItem>
-        </CopyToClipboard>
+        </CopyToClipboard>}
         <MenuItem onClick={() => {
           pinMessageById(_id, !pinned)
           handleClose(undefined)

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

@@ -286,7 +286,7 @@ const MessageLeftReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessag
   const checked = isSelected(_id)
   
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Message')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -326,7 +326,7 @@ const MessageLeftReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessag
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('ReplyMessage')} text={`ReplyMessage: ${replyMessage} , ReplyCaption: ${replyCaption}`}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('Text')} text={`${replyMessage ? replyMessage : ''} ${replyCaption ? replyCaption : ''}`}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
@@ -343,7 +343,7 @@ const MessageLeftReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessag
              {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
               ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
             </Typography>
-            <ListItemText primary={replyMessage} primaryTypographyProps={{ color: "#535353" }} />
+            <ListItemText primary={fullType === null?replyMessage:fullType} primaryTypographyProps={{ color: "#535353" }} />
             <ListItemText secondary={replyCaption} secondaryTypographyProps={{color: "#535353"}}/>
           </div>
         </div>        
@@ -386,7 +386,7 @@ const MessageLeftReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessag
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -81,11 +81,6 @@ const useStyles = makeStyles({
     font: "400 .9em 'Open Sans', sans-serif",
   },
   wrapperInner: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-  },  
-  wrapperInnerMessage: {
     display: 'flex',
     alignItems: 'start',
     alignContent: 'start',
@@ -175,14 +170,6 @@ const useStyles = makeStyles({
     top: -10,
     pointerEvents: 'auto'
   },
-  folderIcon: {
-    marginRight: 7,
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },
  avatarIcon: {
     position: 'absolute',
     left: -54,
@@ -244,7 +231,7 @@ const MessageLeftText = ({message,tongue,watched,edited,avatarUrl,color,name,las
   const checked = isSelected(_id)
   
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Message')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -279,13 +266,8 @@ const MessageLeftText = ({message,tongue,watched,edited,avatarUrl,color,name,las
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          <CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${message} , Caption: ${caption}`}>
-            <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
-          </CopyToClipboard>
-          <div className={classes.wrapperInnerMessage}>
-            <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
-        <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
-          </div>
+          <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+          <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         </div>
         <div className={classes.informationWrapper}>
            <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
@@ -324,7 +306,7 @@ const MessageLeftText = ({message,tongue,watched,edited,avatarUrl,color,name,las
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message?message:''} ${caption?caption:''}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -3,7 +3,6 @@ import { styled } from '@mui/material/styles';
 import { useState } from "react";
 import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
-import VideoFileIcon from '@mui/icons-material/VideoFile';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -79,12 +78,6 @@ const useStyles = makeStyles({
     padding: 5,
     borderRadius: 7,
   },
-  wrapperInner: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    width: '100%',
-  },  
   informationWrapper: {
     display: 'flex',
     alignItems: 'center',
@@ -111,9 +104,11 @@ const useStyles = makeStyles({
   },
   player: {
     backgroundColor: '#ffffff',
+    width: '100%',
   },
   playerActive: {
     backgroundColor: '#babdbc',
+    width: '100%',
   },  
   modalDelete: {
     background: '#ffffff',
@@ -186,14 +181,6 @@ const useStyles = makeStyles({
     top: -10,
     pointerEvents: 'auto'
   },
-  folderIcon: {
-    marginRight: 7,
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },
  avatarIcon: {
     position: 'absolute',
     left: -54,
@@ -255,7 +242,7 @@ const MessageLeftVideo = ({ url,tongue,watched,edited,avatarUrl,color,name,lastN
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Link')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -285,15 +272,11 @@ const MessageLeftVideo = ({ url,tongue,watched,edited,avatarUrl,color,name,lastN
     <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#00b333"}} variant="h6" align="right">
+        <Typography style={{color: "#00b333",marginBottom:10}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
-        <div className={classes.wrapperInner}>
-          <VideoFileIcon onClick={() => handleDownload(url, fullType)}
-            className={classes.folderIcon} fontSize='large' />
-          <Player className={selected?classes.playerActive:classes.player} playsInline  src={url}/>
-        </div>
+        <Player className={selected?classes.playerActive:classes.player}  playsInline  src={url}/>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
            <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
@@ -336,12 +319,12 @@ const MessageLeftVideo = ({ url,tongue,watched,edited,avatarUrl,color,name,lastN
             <DownloadIcon/>
             Download
         </MenuItem>        
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+        {caption&&<CopyToClipboard onCopy={() => handleClose('copy')} text={caption}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Link
+             Copy Text
           </MenuItem>
-        </CopyToClipboard>
+        </CopyToClipboard>}
         <MenuItem onClick={() => {
           pinMessageById(_id, !pinned)
           handleClose(undefined)

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

@@ -2,7 +2,6 @@ import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
 import { useState } from "react";
 import Avatar from '@mui/material/Avatar';
-import AudioFileIcon from '@mui/icons-material/AudioFile';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import ReactAudioPlayer from 'react-audio-player';
@@ -81,14 +80,6 @@ const useStyles = makeStyles({
     width:350,
     borderRadius: 7,
   },
-  wrapperInner: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    width: '100%',
-    cursor: 'pointer',
-    padding:'10px 0px',
-  },
   informationWrapper: {
     display: 'flex',
     alignItems: 'center',
@@ -100,17 +91,10 @@ const useStyles = makeStyles({
   time: {
     fontSize: ".65em",
     fontWeight:600,
-  },
-  folderIcon: {
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },  
+  }, 
   player: {
-    margin: '0px 5px 0px 0px',
     borderRadius: 7,
+    width:'100%'
   },
   modalDelete: {
     background: '#ffffff',
@@ -245,7 +229,7 @@ const MessageRightAudio = ({ url,tongue,watched,edited,avatarUrl,color,name,last
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Link')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -275,15 +259,11 @@ const MessageRightAudio = ({ url,tongue,watched,edited,avatarUrl,color,name,last
     <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
         style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents: isSomeSelected ? 'none' : 'auto' }}>
-        <Typography style={{color: "#26afee"}} variant="h6" align="right">
+        <Typography style={{color: "#26afee",marginBottom:10}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
-        <div className={classes.wrapperInner}>
-          <AudioFileIcon onClick={() => handleDownload(url, fullType)}
-            className={classes.folderIcon} fontSize='large' />
-          <ReactAudioPlayer className={classes.player} src={url} controls />
-        </div>
+        <ReactAudioPlayer className={classes.player} src={url} controls />
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
            <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
@@ -334,12 +314,12 @@ const MessageRightAudio = ({ url,tongue,watched,edited,avatarUrl,color,name,last
             <DownloadIcon/>
             Download
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+        {caption&&<CopyToClipboard onCopy={() => handleClose('copy')} text={caption}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Link
+             Copy Text
           </MenuItem>
-        </CopyToClipboard>
+        </CopyToClipboard>}
         <MenuItem onClick={() => {
           pinMessageById(_id, !pinned)
           handleClose(undefined)

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

@@ -83,17 +83,6 @@ const useStyles = makeStyles({
     minWidth:200,
     padding: 5,
     borderRadius: 7,
-  },
-  wrapperInner: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    width: '100%',
-    cursor: 'pointer',
-    padding:'10px 10px 10px 0px',
-    '&:hover': {
-      backgroundColor: 'rgba(104, 105, 104, 0.2)'
-    }
   },  
   informationWrapper: {
     display: 'flex',
@@ -223,14 +212,6 @@ const useStyles = makeStyles({
     top: -10,
     pointerEvents: 'auto'
   },
-  folderIcon: {
-    marginRight: 7,
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },
  avatarIcon: {
     position: 'absolute',
     right: -54,
@@ -322,7 +303,7 @@ const MessageRightFile = ({ url,tongue,watched,edited,avatarUrl,color,name,lastN
     }
   }
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Link')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -368,14 +349,13 @@ const MessageRightFile = ({ url,tongue,watched,edited,avatarUrl,color,name,lastN
       </div>}
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':"#deffa9",pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#26afee"}} variant="h6" align="right">
+        <Typography style={{color: "#26afee",marginBottom:10}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
-        <div className={classes.wrapperInner} id='read' onClick={handleOpenRead}>
-          <InsertDriveFileIcon onClick={handleDownloadFile} className={classes.folderIcon} fontSize='large' />
-          {!read &&<ListItemText primary='Press to read the File'/>} 
-        </div>
+        {!read &&<Button fullWidth onClick={handleOpenRead} variant="contained" color='warning' style={{fontWeight:500,fontSize:18}}>
+            Read File
+          </Button>}
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
            <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
@@ -426,12 +406,12 @@ const MessageRightFile = ({ url,tongue,watched,edited,avatarUrl,color,name,lastN
             <DownloadIcon/>
             Download
         </MenuItem>          
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+        {caption&&<CopyToClipboard onCopy={() => handleClose('copy')} text={caption}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Link
+             Copy Text
           </MenuItem>
-        </CopyToClipboard>
+        </CopyToClipboard>}
         <MenuItem onClick={() => {
           pinMessageById(_id, !pinned)
           handleClose(undefined)

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

@@ -273,7 +273,7 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Message')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
       setAnchorEl(null)
       setSelected(false)
@@ -313,7 +313,7 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('ForwardMessage')} text={`ForwardMessage: ${forwardMessage} , ForwardCaption: ${forwardCaption}`}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('Text')} text={`${forwardMessage ? forwardMessage : ''} ${forwardCaption ? forwardCaption : ''}`}>
            <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
@@ -330,7 +330,7 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
              {`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)}
               ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
             </Typography>
-            <ListItemText primary={forwardMessage} primaryTypographyProps={{ color: "#535353" }} />
+            <ListItemText primary={fullType === null?forwardMessage:fullType} primaryTypographyProps={{ color: "#535353" }} />
             <ListItemText secondary={forwardCaption} secondaryTypographyProps={{color: "#535353"}}/>
           </div>
         </div>
@@ -381,7 +381,7 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
             <EditIcon/>
             Edit
         </MenuItem>       
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -3,7 +3,6 @@ import { styled } from '@mui/material/styles';
 import { useState, useRef } from "react";
 import Typography from '@mui/material/Typography';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import ImageIcon from '@mui/icons-material/Image';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -84,11 +83,6 @@ const useStyles = makeStyles({
     borderRadius: 7,
     padding: 5,
   },
-  wrapperInner: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-  },
   informationWrapper: {
     display: 'flex',
     alignItems: 'center',
@@ -103,10 +97,9 @@ const useStyles = makeStyles({
   }, 
   image: {
     borderRadius: 7,
-    width: 348,
+    width: '100%',
     maxHeight: 'auto',
     cursor: 'pointer',
-    padding: '10px 0px 10px 0px'
   },   
   overlay: {
     position: 'fixed',
@@ -260,14 +253,6 @@ const useStyles = makeStyles({
     top: -10,
     pointerEvents: 'auto'
   },
-  folderIcon: {
-    marginRight: 7,
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },
  avatarIcon: {
     position: 'absolute',
     right: -54,
@@ -356,7 +341,7 @@ const MessageRightImage = ({url,tongue,watched,edited,avatarUrl,color,createdAt,
     }
   }  
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Link')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -416,16 +401,12 @@ const MessageRightImage = ({url,tongue,watched,edited,avatarUrl,color,createdAt,
     <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#26afee"}} variant="h6" align="right">
+        <Typography style={{color: "#26afee",marginBottom:10}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
-        <div className={classes.wrapperInner}>
-          <ImageIcon onClick={() => handleDownload(url, fullType)}
-            className={classes.folderIcon} fontSize='large' />
-          <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
+        <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
             style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
-        </div>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
            <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
@@ -476,12 +457,12 @@ const MessageRightImage = ({url,tongue,watched,edited,avatarUrl,color,createdAt,
             <DownloadIcon/>
             Download
         </MenuItem>          
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+        {caption&&<CopyToClipboard onCopy={() => handleClose('copy')} text={caption}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Link
+             Copy Text
           </MenuItem>
-        </CopyToClipboard>
+        </CopyToClipboard>}
         <MenuItem onClick={() => {
           pinMessageById(_id, !pinned)
           handleClose(undefined)

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

@@ -272,7 +272,7 @@ const MessageRightReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessa
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Message')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
       setAnchorEl(null)
       setSelected(false)
@@ -312,7 +312,7 @@ const MessageRightReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessa
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('ReplyMessage')} text={`ReplyMessage: ${replyMessage} , ReplyCaption: ${replyCaption}`}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('Text')} text={`${replyMessage ? replyMessage : ''} ${replyCaption ? replyCaption : ''}`}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
@@ -329,7 +329,7 @@ const MessageRightReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessa
              {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
               ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
             </Typography>
-            <ListItemText primary={replyMessage} primaryTypographyProps={{ color: "#535353" }} />
+            <ListItemText primary={fullType === null?replyMessage:fullType} primaryTypographyProps={{ color: "#535353" }} />
             <ListItemText secondary={replyCaption} secondaryTypographyProps={{color: "#535353"}}/>
           </div>
         </div>
@@ -380,7 +380,7 @@ const MessageRightReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessa
             <EditIcon/>
             Edit
         </MenuItem>        
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -83,11 +83,6 @@ const useStyles = makeStyles({
     font: "400 .9em 'Open Sans', sans-serif",
   },
   wrapperInner: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-  },  
-  wrapperInnerMessage: {
     display: 'flex',
     alignItems: 'start',
     alignContent: 'start',
@@ -176,14 +171,6 @@ const useStyles = makeStyles({
     top: -10,
     pointerEvents: 'auto'
   },
-  folderIcon: {
-    marginRight: 7,
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },
  avatarIcon: {
     position: 'absolute',
     right: -54,
@@ -245,7 +232,7 @@ const MessageRightText = ({message,tongue,watched,edited,avatarUrl,color,name,la
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Message')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
       setAnchorEl(null)
       setSelected(false)
@@ -280,13 +267,8 @@ const MessageRightText = ({message,tongue,watched,edited,avatarUrl,color,name,la
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          <CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${message} , Caption: ${caption}`}>
-            <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
-          </CopyToClipboard>
-          <div className={classes.wrapperInnerMessage}>
-            <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
-        <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
-          </div>
+          <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+          <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         </div>
         <div className={classes.informationWrapper}>
            <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
@@ -333,7 +315,7 @@ const MessageRightText = ({message,tongue,watched,edited,avatarUrl,color,name,la
             <EditIcon/>
             Edit
         </MenuItem>        
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
+          <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -3,7 +3,6 @@ import { styled } from '@mui/material/styles';
 import { useState } from "react";
 import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
-import VideoFileIcon from '@mui/icons-material/VideoFile';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -81,13 +80,7 @@ const useStyles = makeStyles({
     width: 400,
     padding: 5,
     borderRadius: 7,
-  },
-  wrapperInner: {
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    width: '100%',
-  },  
+  }, 
   informationWrapper: {
     display: 'flex',
     alignItems: 'center',
@@ -102,9 +95,11 @@ const useStyles = makeStyles({
   },
   player: {
     backgroundColor: '#deffa9',
+    width: '100%',
   },
   playerActive: {
     backgroundColor: '#ced8d7',
+    width: '100%',
   },
   modalDelete: {
     background: '#ffffff',
@@ -177,14 +172,6 @@ const useStyles = makeStyles({
     top: -10,
     pointerEvents: 'auto'
   },
-  folderIcon: {
-    marginRight: 7,
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },
  avatarIcon: {
     position: 'absolute',
     right: -54,
@@ -249,7 +236,7 @@ const MessageRightVideo = ({ url,tongue,watched,edited,avatarUrl,color,name,last
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
   const handleClose = (type: string | undefined): void => {
-    if (type === 'copy') copied('Link')
+    if (type === 'copy') copied('Text')
     if (type === 'delete') setModal(true)
     setAnchorEl(null)
     setSelected(false)
@@ -279,15 +266,11 @@ const MessageRightVideo = ({ url,tongue,watched,edited,avatarUrl,color,name,last
     <div className={classes.container} style={{marginBottom:tongue?12:0}}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
        style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#26afee"}} variant="h6" align="right">
+        <Typography style={{color: "#26afee",marginBottom:10}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
-        <div className={classes.wrapperInner}>
-          <VideoFileIcon onClick={() => handleDownload(url, fullType)}
-            className={classes.folderIcon} fontSize='large' />
-          <Player className={selected?classes.playerActive:classes.player}  playsInline  src={url}/>
-        </div>
+        <Player className={selected?classes.playerActive:classes.player}  playsInline  src={url}/>
         <ListItemText style={{wordBreak:'break-word'}}  secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.informationWrapper}>
            <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
@@ -338,12 +321,12 @@ const MessageRightVideo = ({ url,tongue,watched,edited,avatarUrl,color,name,last
             <DownloadIcon/>
             Download
         </MenuItem>        
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={url}>
+        {caption&&<CopyToClipboard onCopy={() => handleClose('copy')} text={caption}>
           <MenuItem>
             <ContentCopyIcon />
-             Copy Link
+             Copy Text
           </MenuItem>
-        </CopyToClipboard>
+        </CopyToClipboard>}
         <MenuItem onClick={() => {
           pinMessageById(_id, !pinned)
           handleClose(undefined)

src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/ForwardList/index.tsx

@@ -1,6 +1,5 @@
 import List from '@mui/material/List';
 import { makeStyles } from '@material-ui/core'
-import { useMemo } from 'react';
 
 import AlertInfo from '../../../../../../reusableComponents/AlertInfo'
 import ForwardItem from './ForwardItem'
@@ -34,33 +33,26 @@ const useStyles = makeStyles({
 
 interface IForwardList {
   value: string,
-  chats:TChats,
-  total: string,
+  date:string,
+  filteredAndSorted:TChats,
   handleForwardTo: (companionId: string) => void,
 }
 
-const ForwardList = ({ value, chats, total,handleForwardTo }: IForwardList) => {
+const ForwardList = ({ value,date,filteredAndSorted,handleForwardTo }: IForwardList) => {
   const classes = useStyles()
   
-  const filteredChatsMemo = useMemo((): TChats => {
-    return chats.filter((el) => {
-      const credentials = el.name + ' ' + el.lastName
-      if (credentials.toLowerCase().includes(value.toLowerCase())) return el
-      return undefined
-    })
-  }, [chats, value])
 
-  return total !== '0' ? (<>
+  return <>
     <List className={classes.list} component="nav"
       aria-label="main mailbox folders">
-      {filteredChatsMemo.length > 0 ?
-        filteredChatsMemo.map(({ name, lastName, avatarUrl, color, online, companionId, number }) =>
-          <ForwardItem key={number} name={name} lastName={lastName}
-            avatarUrl={avatarUrl} color={color} online={online}
-            companionId={companionId} handleForwardTo={handleForwardTo} />) :
-        <AlertInfo name={`Can not find Chat by request: ${value}`} />}
+      {filteredAndSorted.map(({ name, lastName, avatarUrl, color, online, companionId, number }) =>
+        <ForwardItem key={number} name={name} lastName={lastName}
+          avatarUrl={avatarUrl} color={color} online={online}
+          companionId={companionId} handleForwardTo={handleForwardTo} />)}
+      {(value || date) && filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Chat by request: ${value}`} />}
+      {!value && !date && filteredAndSorted.length === 0 &&<AlertInfo name='You do not have any Chats yet!'/>}
     </List>
-  </>) : <AlertInfo name='You do not have other Chats yet!' />
+  </>
 }
 
 export default ForwardList

src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/ForwardSearch/StaticDatePicker/index.tsx

@@ -0,0 +1,35 @@
+import { DatePicker } from "@material-ui/pickers";
+import { makeStyles } from '@material-ui/core'
+
+const useStyles = makeStyles({
+  container: {
+    position: 'absolute',
+  },
+})
+
+interface IStaticDatePicker {
+  date: Date,
+  disabled: boolean,
+  changeDate: React.Dispatch<React.SetStateAction<any>>,
+  handleOnOpen: () => void,
+}
+
+const StaticDatePicker = ({ date,disabled, changeDate,handleOnOpen }: IStaticDatePicker) => {
+    const classes = useStyles()
+return (
+  <DatePicker
+    className={classes.container}
+    inputVariant='outlined'
+    orientation="portrait"
+    variant="dialog"
+    openTo="date"
+    autoOk
+    disabled={disabled}
+    value={date?date:new Date()}
+    onOpen={handleOnOpen}
+    onChange={changeDate}
+    />
+  );
+};
+
+export default StaticDatePicker;

src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/ForwardSearch/index.tsx

@@ -3,8 +3,15 @@ import Toolbar from '@mui/material/Toolbar'
 import SearchIcon from '@mui/icons-material/Search';
 import CloseIcon from '@mui/icons-material/Close';
 import IconButton from '@mui/material/IconButton';
+import Switch from '@mui/material/Switch';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
+import { useDispatch } from 'react-redux';
+
+import StaticDatePicker from "./StaticDatePicker";
+import { updateUser } from '../../../../../../../api-data';
+import { asyncCurrentUser } from '../../../../../../../redux/authorization/operations';
 
 const SearchBar = styled('div')(() => ({
   position: 'relative',
@@ -54,16 +61,28 @@ const useStyles = makeStyles({
   },  
 })
 
+const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
 interface IForwardSearch {
   handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void,
   value: string,
-  total: string
+  total: string,
+  sort: boolean,
+  setDate: React.Dispatch<any>,
+  date:any,
 }
 
-const ForwardSearch = ({handleSearch,value,total}:IForwardSearch) => {
+const ForwardSearch = ({handleSearch,value,total,sort,setDate,date}:IForwardSearch) => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   const disabled = total === '0' ? true : false
+  const handleSort = () => {
+    updateUser({ sort: !sort })
+    setTimeout(() => {
+      dispatch(asyncCurrentUser())
+    }, 1000);
+  }
+  const handleOnOpen = () => setDate('')
  
   return (
     <Toolbar className={classes.toolBar} >
@@ -81,7 +100,13 @@ const ForwardSearch = ({handleSearch,value,total}:IForwardSearch) => {
             value={value}
             inputProps={{ 'aria-label': 'search' }}
           />
-      </SearchBar>      
+      </SearchBar>
+      <IconButton aria-label="delete" size="medium" disabled={disabled}>
+        <StaticDatePicker date={date} disabled={disabled} 
+          changeDate={setDate} handleOnOpen={handleOnOpen} />        
+          <CalendarTodayIcon fontSize='medium' style={{color:date?'#2184f7':'#b1aeae'}}/>
+      </IconButton>
+      <Switch onClick={handleSort} checked={sort} {...label} disabled={disabled} />
     </Toolbar>
     )
 }

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

@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core'
-import { useState } from 'react'
+import { useState,useMemo } from 'react'
 import { useSelector,useDispatch } from 'react-redux'
 
 import ForwardSearch from './ForwardSearch'
@@ -7,7 +7,9 @@ import ForwardList from './ForwardList'
 import { asyncGetChatById } from '../../../../../../redux/chat/operations'
 import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../../../redux/control/action'
 import { getStateMemo } from '../../../../../../redux/chats/selector'
+import { getSort } from '../../../../../../redux/authorization/selector'
 import { TMessage } from '../../../../../../typescript/redux/messages/types'
+import { sortByRecent,timeStampFilter } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
   overlay: {
@@ -43,8 +45,10 @@ interface IForwardSearchList {
 const ForwardSearchList = ({setModalForward,setIsForward,companionId}:IForwardSearchList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
+  const sort = useSelector(getSort)
   const { total,chats } = useSelector(getStateMemo)
   const [value, setValue] = useState<string>('')
+  const [date, setDate] = useState<any>('');
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)
   const handleCloseForwardModal = (e: any) => {
     const id = e.target.id
@@ -63,11 +67,25 @@ const ForwardSearchList = ({setModalForward,setIsForward,companionId}:IForwardSe
     if (companionId !== newCompanionId) setTimeout(() => dispatch(actionScrollChat(true)), 500)
   }
 
+  const filteredAndSorted = useMemo(() => {
+      return sortByRecent(chats,sort).filter((el) => {
+      const credentials = el.name + ' ' + el.lastName
+      if (!date) {
+         return credentials.toLowerCase().includes(value.toLowerCase())
+      } else if (credentials.toLowerCase().includes(value.toLowerCase())
+        &&timeStampFilter(date) === timeStampFilter(el.lastMessageCreatedAt ?
+        el.lastMessageCreatedAt : el.createdAt)) {
+        return el
+      } else return undefined
+    })
+  }, [chats, date, value, sort])  
+
   return (
     <div onClick={handleCloseForwardModal} className={classes.overlay} id='overlay'>
       <div className={classes.container}>
-        <ForwardSearch handleSearch={handleSearch} value={value} total={total}/>
-        <ForwardList value={value} chats={chats} total={total} handleForwardTo={handleForwardTo}/>
+        <ForwardSearch handleSearch={handleSearch} value={value} total={total}
+          sort={sort} date={date} setDate={setDate}/>
+        <ForwardList value={value} date={date} filteredAndSorted={filteredAndSorted} handleForwardTo={handleForwardTo}/>
       </div>
     </div>
   )

src/components/HomePage/CentralBar/HeaderBar/PinnedBar/index.tsx

@@ -152,7 +152,7 @@ const PinnedBar = ({chatDivRef,handleOpenPinned}:IPinnedBar) => {
         </MenuItem>
       </ul>
       <ListItemAvatar style={{marginLeft:10}}>
-        {openedPin.type === 'text' &&<CopyToClipboard onCopy={() => copied('Message')} text={openedPin.message}>
+        {openedPin.type === 'text' &&<CopyToClipboard onCopy={() => copied('Text')} text={`${openedPin.message?openedPin.message:''} ${openedPin.caption?openedPin.caption:''}`}>
            <ContentCopyIcon className={classes.folderIcon} fontSize='large' />
         </CopyToClipboard>}
         {openedPin.type === 'audio' &&<LibraryMusicIcon onClick={() =>

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

@@ -42,9 +42,10 @@ const useStyles = makeStyles({
 
 interface IChatsList {
   sort: boolean,
+  setDisabled: React.Dispatch<boolean>,
 }
 
-const ChatsList = ({sort}:IChatsList) => {
+const ChatsList = ({sort,setDisabled}:IChatsList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const chatsRef = useRef<any>(null)
@@ -109,6 +110,10 @@ const ChatsList = ({sort}:IChatsList) => {
     chatsRef.current = sortedChats
   }, [chat,sortedChats,handleNotification,dispatch,silentMode])
 
+  useEffect(() => {
+    setDisabled(total === '0'?true:false)
+  }, [total, setDisabled])
+  
   return total !== '0' ? (
     <List className={classes.list} component="nav"
       aria-label="main mailbox folders">

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

@@ -1,4 +1,3 @@
-import Toolbar from '@mui/material/Toolbar'
 import IconButton from '@mui/material/IconButton'
 import MenuIcon from '@mui/icons-material/Menu';
 import SearchIcon from '@mui/icons-material/Search';
@@ -10,7 +9,6 @@ import StaticDatePicker from "./StaticDatePicker";
 import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
 import { useDispatch } from 'react-redux';
-import { useState } from 'react';
 import { updateUser } from '../../../../api-data';
 import { TLeftIsOpen } from '../../../../typescript/redux/control/types';
 import { asyncCurrentUser } from '../../../../redux/authorization/operations';
@@ -48,8 +46,13 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 
 const useStyles = makeStyles({
   toolBar: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems:'center',
     color: '#b1aeae',
     height: '7vh',
+    padding: 0,
+    margin:0,
   },
   activeSearch: {
         outline: '2px solid  #2184f7',
@@ -73,7 +76,7 @@ const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
 interface ISearchBar {
   handleClick:() => void,
-  handleOpenIsSearch:() => void,
+  handleOpenIsSearch:(e: any) => void,
   handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
   leftIsOpen: TLeftIsOpen,
   value: string,
@@ -96,16 +99,17 @@ const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, leftIsOpen,
   
   const classes = useStyles()
     return (
-      <Toolbar className={classes.toolBar}>
+      <div className={classes.toolBar}>
         <IconButton  onClick={handleClick}>
                 {leftIsOpen ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
         </IconButton>
         <div onFocus={handleOpenIsSearch} style={{display:'flex',width:'100%'}}>
-          <Search className={value?classes.activeSearch:undefined}>
-            <SearchIconWrapper>
-              <SearchIcon />
+          <Search id='search' className={value?classes.activeSearch:undefined}>
+            <SearchIconWrapper id='search'>
+              <SearchIcon id='search'/>
             </SearchIconWrapper>
             <StyledInputBase
+              id='search'
               value={value}
               onChange={handleSearch}
               placeholder={disabled?'Disabled':'Search'}
@@ -117,10 +121,10 @@ const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, leftIsOpen,
               changeDate={setDate} handleOnOpen={handleOnOpen} />        
               <CalendarTodayIcon fontSize='medium'
                 style={{color:date?'#2184f7':'#b1aeae'}}/>
-          </IconButton>
-          <Switch onClick={handleSort} checked={sort} {...label} disabled={disabled} />
+           </IconButton>
+          <Switch id='sort' onClick={handleSort} checked={sort} {...label} disabled={disabled} />
         </div>
-    </Toolbar>
+    </div>
     )
 }
 

src/components/HomePage/LeftBar/SearchLists/AudioList/index.tsx

@@ -2,13 +2,14 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 import { useEffect, useMemo } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
+import { timeStampEU,firstLetter,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -34,12 +35,9 @@ const useStyles = makeStyles({
     backgroundColor: "#959595",
     },
   },  
-    folderIcon: {
-      color: '#54b0fc',
-      cursor: 'pointer',
-      '&:hover': {
-        color: '#016cc3'
-      },
+  folderIcon: {
+    margin: 'auto 0px',
+    color: 'rgba(0, 0, 0, 0.5)',
   },
   listItem: {
     cursor:'pointer',
@@ -76,19 +74,21 @@ const AudioList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheM
     <>
       {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-        {filteredAndSorted.map(({ message, createdAt, fullType,_id,companionId }) =>
+        {filteredAndSorted.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
               alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
-                <LibraryMusicIcon onClick={() =>
-                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
-                  className={classes.folderIcon} fontSize='large' />
-              </ListItemAvatar>
+                <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+                  sx={{ background: color, width: 40, height: 40}}>
+                  {`${firstLetter(name)}${firstLetter(lastName)}`}
+                </Avatar>
+              </ListItemAvatar>              
               <ListItemText
                 primary={fullType}
                 secondary={timeStampEU(createdAt)}
                />
+               <LibraryMusicIcon className={classes.folderIcon} fontSize='large'/>            
             </ListItem>
             <Divider variant="inset"/>
         </div>)}

src/components/HomePage/LeftBar/SearchLists/FilesList/index.tsx

@@ -2,13 +2,17 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import FolderIcon from '@mui/icons-material/Folder';
+import ImageIcon from '@mui/icons-material/Image';
+import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 import { useEffect,useMemo } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
+import { timeStampEU,filteredMessages,handleSort,prodAwsS3,firstLetter } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -35,11 +39,8 @@ const useStyles = makeStyles({
     },
   }, 
   folderIcon: {
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
+    margin: 'auto 0px',
+    color: 'rgba(0, 0, 0, 0.5)',
   },
   listItem: {
     cursor:'pointer',
@@ -76,19 +77,24 @@ const FilesList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheM
     <>
       {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-        {filteredAndSorted.map(({ message, createdAt, fullType,_id,companionId }) =>
+        {filteredAndSorted.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
               alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
-                <FolderIcon onClick={() =>
-                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
-                  className={classes.folderIcon} fontSize='large' />
-              </ListItemAvatar>
+                <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+                  sx={{ background: color, width: 40, height: 40}}>
+                  {`${firstLetter(name)}${firstLetter(lastName)}`}
+                </Avatar>
+              </ListItemAvatar>               
               <ListItemText
                 primary={fullType}
                 secondary={timeStampEU(createdAt)}
               />
+              {fullType&&fullType.includes('audio') &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
+              {fullType&&fullType.includes('video') &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
+              {fullType&&fullType.includes('image') &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
+              {fullType && fullType.includes('application') && <FolderIcon className={classes.folderIcon} fontSize='large' />}            
             </ListItem>
             <Divider variant="inset"/>
         </div>)}

src/components/HomePage/LeftBar/SearchLists/TextList/index.tsx

@@ -5,12 +5,11 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Divider from '@mui/material/Divider';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 import { useEffect,useMemo } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,copied,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
+import { timeStampEU,firstLetter,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -42,13 +41,10 @@ const useStyles = makeStyles({
       backgroundColor: '#f0f0f0',
     }
   },
-  copyIcon: {
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },  
+  folderIcon: {
+    margin: 'auto 0px',
+    color: 'rgba(0, 0, 0, 0.5)',
+  },
 })
 
 interface ITextList {
@@ -84,16 +80,14 @@ const TextList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMe
              alignItems="flex-start" className={classes.listItem}>
             <ListItemAvatar>
               <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
-                  sx={{ background: color, width: 38, height: 38}}>
+                  sx={{ background: color, width: 40, height: 40}}>
                   {`${firstLetter(name)}${firstLetter(lastName)}`}
               </Avatar>
             </ListItemAvatar>
              <ListItemText style={{ wordBreak: 'break-word',marginRight:2 }} primary={message}
                secondary={timeStampEU(createdAt)} secondaryTypographyProps={{color: '#020202',paddingTop:0.5}}
              />
-            <CopyToClipboard onCopy={() => copied('Message')} text={message}>
-              <ContentCopyIcon className={classes.copyIcon} fontSize='large' />
-            </CopyToClipboard>             
+            <ContentCopyIcon className={classes.folderIcon} fontSize='large' />             
           </ListItem>
           <Divider variant="inset" />
       </div>)}

src/components/HomePage/LeftBar/SearchLists/VideoList/index.tsx

@@ -2,13 +2,14 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 import { useEffect,useMemo } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
+import { timeStampEU,filteredMessages,handleSort,prodAwsS3,firstLetter } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -34,12 +35,9 @@ const useStyles = makeStyles({
     backgroundColor: "#959595",
     },
   },   
-    folderIcon: {
-      color: '#54b0fc',
-      cursor: 'pointer',
-      '&:hover': {
-        color: '#016cc3'
-      },
+  folderIcon: {
+    margin: 'auto 0px',
+    color: 'rgba(0, 0, 0, 0.5)',
   },
   listItem: {
     cursor:'pointer',
@@ -76,19 +74,21 @@ const VideoList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheM
     <>
       {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-        {filteredAndSorted.map(({ message, createdAt, fullType,_id,companionId }) =>
+        {filteredAndSorted.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
               key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
-                <VideoLibraryIcon onClick={() =>
-                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
-                  className={classes.folderIcon} fontSize='large' />
-              </ListItemAvatar>
+                <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+                  sx={{ background: color, width: 40, height: 40}}>
+                  {`${firstLetter(name)}${firstLetter(lastName)}`}
+                </Avatar>
+              </ListItemAvatar>               
               <ListItemText
                 primary={fullType}
                 secondary={timeStampEU(createdAt)}
               />
+              <VideoLibraryIcon className={classes.folderIcon} fontSize='large'/>            
             </ListItem>
             <Divider variant="inset" />
           </div>)}

src/components/HomePage/LeftBar/index.tsx

@@ -22,12 +22,16 @@ const LeftBar = ({chatDivRef}:{chatDivRef: any | null}) => {
   const leftIsOpen = useSelector(getLeftIsOpen)
   const [modal, setModal] = useState<boolean>(false)
   const [popup, setPopup] = useState<boolean>(false);
-  const [disabled, setDisabled] = useState<boolean>(false)
+  const [disabled, setDisabled] = useState<boolean>(true)
   const [value, setValue] = useState<string>('')
   const [date, setDate] = useState<any>('');
   const modalRoot = useRef<HTMLDivElement | null>(null);
   
-  const handleOpenIsSearch = () => leftIsOpen===''&&dispatch(actionLeftIsOpen('searchChats'))
+  const handleOpenIsSearch = (e:any) => {
+    const id = e.target.id
+    if(leftIsOpen === '' && id === 'sort') return
+    leftIsOpen === '' && dispatch(actionLeftIsOpen('searchChats'))
+  }
   
   const handleClick = () => {
     dispatch(actionLeftIsOpen(''))
@@ -38,7 +42,7 @@ const LeftBar = ({chatDivRef}:{chatDivRef: any | null}) => {
   const handleEnterOpenMenuSm = () => !popup&&setPopup(true)
   
   const handleLeaveCloseMenuSm = () => popup&&setPopup(false)
-
+  
   useEffect(() => {
     setValue('')
     setDate('')    
@@ -78,7 +82,7 @@ const LeftBar = ({chatDivRef}:{chatDivRef: any | null}) => {
             date={date} disabled={disabled} />:null}
         {leftIsOpen === 'searchChats' || leftIsOpen === 'searchAllMessages' ?<SearchLists value={value} setValue={setValue}
           sort={sort} date={date} setDate={setDate} setDisabled={setDisabled} chatDivRef={chatDivRef}/>:null}
-        {leftIsOpen === ''&&<ChatsList sort={sort}/>}
+        {leftIsOpen === ''&&<ChatsList sort={sort} setDisabled={setDisabled}/>}
         {leftIsOpen === '' && popup && <SmallMenuBar setPopup={setPopup} />}
         {modal && modalRoot.current &&
           createPortal(<MenuBar nightMode={nightMode} silentMode={silentMode}/>, modalRoot.current)}

src/components/HomePage/RightBar/CredentialsList/ProfileLists/AudioList/index.tsx

@@ -2,21 +2,19 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodAwsS3 } from '../../../../../../helpers'
+import { timeStampEU,prodAwsS3,firstLetter } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
-    folderIcon: {
-      color: '#54b0fc',
-      cursor: 'pointer',
-      '&:hover': {
-        color: '#016cc3'
-      },
+  folderIcon: {
+    margin: 'auto 0px',
+    color: 'rgba(0, 0, 0, 0.5)',
   },
   listItem: {
     cursor:'pointer',
@@ -37,19 +35,21 @@ const AudioList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IA
   
     return filteredAndSorted.length > 0 ?(
       <List>
-        {filteredAndSorted.map(({ message, createdAt, fullType,_id }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id)}
               alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
-                <LibraryMusicIcon onClick={() =>
-                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
-                  className={classes.folderIcon} fontSize='large' />
+                <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+                  sx={{ background: color, width: 40, height: 40, marginRight:2 }}>
+                {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+                </Avatar>
               </ListItemAvatar>
               <ListItemText
                 primary={fullType}
                 secondary={timeStampEU(createdAt)}
-               />
+              />
+              <LibraryMusicIcon className={classes.folderIcon} fontSize='large'/>            
             </ListItem>
             <Divider variant="inset"/>
         </div>)}

src/components/HomePage/RightBar/CredentialsList/ProfileLists/FilesList/index.tsx

@@ -2,21 +2,22 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import FolderIcon from '@mui/icons-material/Folder';
+import ImageIcon from '@mui/icons-material/Image';
+import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodAwsS3 } from '../../../../../../helpers'
+import { timeStampEU,prodAwsS3,firstLetter } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
   folderIcon: {
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-        color: '#016cc3'
-      },
+    margin: 'auto 0px',
+    color: 'rgba(0, 0, 0, 0.5)',
   },
   listItem: {
     cursor:'pointer',
@@ -37,19 +38,24 @@ const FilesList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IF
   
     return filteredAndSorted.length > 0 ?(
       <List>
-        {filteredAndSorted.map(({ message, createdAt, fullType,_id }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id)}
               alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
-                <FolderIcon onClick={() =>
-                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
-                  className={classes.folderIcon} fontSize='large' />
+                <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+                  sx={{ background: color, width: 40, height: 40, marginRight:2 }}>
+                {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+                </Avatar>
               </ListItemAvatar>
               <ListItemText
                 primary={fullType}
                 secondary={timeStampEU(createdAt)}
               />
+              {fullType&&fullType.includes('audio') &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
+              {fullType&&fullType.includes('video') &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
+              {fullType&&fullType.includes('image') &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
+              {fullType && fullType.includes('application') && <FolderIcon className={classes.folderIcon} fontSize='large' />}            
             </ListItem>
             <Divider variant="inset"/>
         </div>)}

src/components/HomePage/RightBar/CredentialsList/ProfileLists/TextList/index.tsx

@@ -5,11 +5,10 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Divider from '@mui/material/Divider';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,copied,prodAwsS3 } from '../../../../../../helpers'
+import { timeStampEU,firstLetter,prodAwsS3 } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
@@ -19,13 +18,10 @@ const useStyles = makeStyles({
       backgroundColor: '#f0f0f0',
     }
   },
-  copyIcon: {
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
-  },  
+  folderIcon: {
+    margin: 'auto 0px',
+    color: 'rgba(0, 0, 0, 0.5)',
+  },
 })
 
 interface ITextList {
@@ -50,11 +46,8 @@ const TextList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: ITe
               </Avatar>
             </ListItemAvatar>
              <ListItemText style={{ wordBreak: 'break-word',marginRight:2 }} primary={message}
-               secondary={timeStampEU(createdAt)} secondaryTypographyProps={{color: '#020202',paddingTop:0.5}}
-             />
-            <CopyToClipboard onCopy={() => copied('Message')} text={message}>
-              <ContentCopyIcon className={classes.copyIcon} fontSize='large' />
-            </CopyToClipboard>             
+               secondary={timeStampEU(createdAt)} secondaryTypographyProps={{color: '#020202',paddingTop:0.5}}/>
+            <ContentCopyIcon className={classes.folderIcon} fontSize='large' />             
           </ListItem>
           <Divider variant="inset" />
       </div>)}

src/components/HomePage/RightBar/CredentialsList/ProfileLists/VideoList/index.tsx

@@ -2,21 +2,19 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodAwsS3 } from '../../../../../../helpers'
+import { timeStampEU,prodAwsS3,firstLetter } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
   folderIcon: {
-    color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
+    margin: 'auto 0px',
+    color: 'rgba(0, 0, 0, 0.5)',
   },
   listItem: {
     cursor:'pointer',
@@ -37,19 +35,21 @@ const VideoList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IV
 
     return filteredAndSorted.length > 0 ?(
       <List>
-        {filteredAndSorted.map(({ message, createdAt, fullType,_id }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id)}
               key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
-                <VideoLibraryIcon onClick={() =>
-                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
-                  className={classes.folderIcon} fontSize='large' />
+                <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+                  sx={{ background: color, width: 40, height: 40, marginRight:2 }}>
+                {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+                </Avatar>
               </ListItemAvatar>
               <ListItemText
                 primary={fullType}
                 secondary={timeStampEU(createdAt)}
                />
+              <VideoLibraryIcon className={classes.folderIcon} fontSize='large'/>            
             </ListItem>
             <Divider variant="inset"/>
         </div>)}

src/components/HomePage/RightBar/SearchList/index.tsx

@@ -8,6 +8,11 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
+import FolderIcon from '@mui/icons-material/Folder';
+import ImageIcon from '@mui/icons-material/Image';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import Search from './Search'
 import AlertInfo from "../../../reusableComponents/AlertInfo";
 import { getMessagesMemo } from '../../../../redux/messages/selector'
@@ -49,6 +54,10 @@ const useStyles = makeStyles({
       backgroundColor: '#f0f0f0',
     }
   },
+  folderIcon: {
+    margin: 'auto 0px',
+    color: 'rgba(0, 0, 0, 0.5)',
+  }
 })
 
 interface ISearchList {
@@ -96,13 +105,13 @@ return (
      <div className={messagesMemo.length > 0 ?classes.list:undefined}>
       {messagesMemo.length > 0 ? filteredAndSorted.length > 0 ?
         <List sx={{ width: '100%' }}>
-          {filteredAndSorted.map(({ name, lastName, avatarUrl, color, message, createdAt,_id }) =>
+          {filteredAndSorted.map(({ name, lastName, avatarUrl, color, message, createdAt,_id,fullType,type }) =>
           <div key={createdAt}>
               <ListItem onClick={() => handleScrollToTheMessage(_id)}
                 alignItems="flex-start" className={classes.listItem}>
                      <ListItemAvatar>
                         <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
-                          sx={{ background: color, width: 44, height: 44, marginRight:2 }}>
+                          sx={{ background: color, width: 40, height: 40, marginRight:2 }}>
                           {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
                         </Avatar>
                      </ListItemAvatar>
@@ -116,11 +125,16 @@ return (
                              variant="body2"
                              color="text.primary"
                            >
-                             {message}
+                             {type === 'text'? message : fullType}
                            </Typography>
                            {timeStampEU(createdAt)}
                          </>}
                      />
+                     {fullType === null &&<ContentCopyIcon className={classes.folderIcon} fontSize='large'/>}
+                     {fullType&&fullType.includes('audio') &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
+                     {fullType&&fullType.includes('video') &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
+                     {fullType&&fullType.includes('image') &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
+                     {fullType && fullType.includes('application') && <FolderIcon className={classes.folderIcon} fontSize='large' />}
                 </ListItem>
               <Divider variant="inset"/>
             </div>)}