work on deleted

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

@@ -4,6 +4,7 @@ import { useState } from "react";
 import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
 import Button from '@mui/material/Button';
+import DownloadIcon from '@mui/icons-material/Download';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import ImageIcon from '@mui/icons-material/Image';
@@ -188,10 +189,6 @@ const useStyles = makeStyles({
   },
   folderIcon: {
     color: '#26afee',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#49c1f8'
-    },
   },
   column: {
     position: 'absolute',
@@ -298,10 +295,7 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watche
     } else updateMessageById(_id,idEmoji)
   }
 
-  const handleClickIcon = (e: any) => {
-    e.stopPropagation()
-    handleDownload(url, fullType)
-  }  
+  const handleClickIcon = () => handleDownload(url, fullType)  
   
   return (
     <div className={classes.container} style={{marginBottom:tongue?12:0}}>
@@ -312,17 +306,11 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watche
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {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}
-           className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('video') &&<VideoLibraryIcon onClick={handleClickIcon}
-           className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
-           className={classes.folderIcon} fontSize='large' />}
-          {fullType && fullType.includes('application') && <InsertDriveFileIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
+          {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') && <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
           <div className={classes.column}></div>
           <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheChat(companionIdForwardToAndFrom,oldId)}>
             <Typography style={{color: "#26afee"}} variant="h6" align="right">
@@ -371,8 +359,12 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watche
         }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
-        </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message ? message : ''} ${caption ? caption : ''}`}>
+        </MenuItem> 
+        <MenuItem onClick={handleClickIcon}>
+            <DownloadIcon/>
+            Download
+        </MenuItem>                   
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`${forwardMessage&&fullType === null ? forwardMessage : fullType} ${forwardCaption ? forwardCaption : ''} ${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -13,6 +13,7 @@ import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
+import DownloadIcon from '@mui/icons-material/Download';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import ImageIcon from '@mui/icons-material/Image';
@@ -190,10 +191,6 @@ const useStyles = makeStyles({
   },
   folderIcon: {
     color: '#26afee',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#49c1f8'
-    },
   },
   replyListItem: {
     display: 'flex',
@@ -312,10 +309,7 @@ const MessageLeftReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessag
     } else updateMessageById(_id,idEmoji)
   }
   
-  const handleClickIcon = (e: any) => {
-    e.stopPropagation()
-    handleDownload(url, fullType)
-  }  
+  const handleClickIcon = () => handleDownload(url, fullType)    
   
   return (
     <div className={classes.container} style={{marginBottom:tongue?12:0}}>
@@ -326,17 +320,11 @@ 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('Text')} text={`${replyMessage ? replyMessage : ''} ${replyCaption ? replyCaption : ''}`}>
-            <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
-          </CopyToClipboard>}
-          {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('video') &&<VideoLibraryIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('application') && <InsertDriveFileIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
+          {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') && <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
           <div className={classes.column}></div>
           <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheMessage(oldId)}>
             <Typography style={{color: "#26afee"}} variant="h6" align="right">
@@ -385,8 +373,12 @@ const MessageLeftReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessag
         }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
+        </MenuItem>
+        <MenuItem onClick={handleClickIcon}>
+            <DownloadIcon/>
+            Download
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message ? message : ''} ${caption ? caption : ''}`}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`${replyMessage&&fullType === null ? replyMessage : fullType} ${replyCaption ? replyCaption : ''} ${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -21,6 +21,7 @@ import ReplyIcon from '@mui/icons-material/Reply';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import DoneIcon from '@mui/icons-material/Done';
 import EditIcon from '@mui/icons-material/Edit';
+import DownloadIcon from '@mui/icons-material/Download';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'
@@ -189,10 +190,6 @@ const useStyles = makeStyles({
   },
   folderIcon: {
     color: '#00b333',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#00e040'
-    },
   },
   column: {
     position: 'absolute',
@@ -299,10 +296,7 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
     } else updateMessageById(_id,idEmoji)
   }
   
-  const handleClickIcon = (e: any) => {
-    e.stopPropagation()
-    handleDownload(url, fullType)
-  }  
+  const handleClickIcon = () => handleDownload(url, fullType)    
 
   return (
     <div className={classes.container} style={{marginBottom:tongue?12:0}}>
@@ -313,17 +307,11 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {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}
-            className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('video') &&<VideoLibraryIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
-          {fullType && fullType.includes('application') && <InsertDriveFileIcon onClick={handleClickIcon}
-           className={classes.folderIcon} fontSize='large' />}
+          {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') && <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
           <div className={classes.column}></div>
           <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheChat(companionIdForwardToAndFrom,oldId)}>
             <Typography style={{color: "#00b333"}} variant="h6" align="right">
@@ -373,7 +361,11 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
         }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
-        </MenuItem>           
+        </MenuItem>
+        <MenuItem onClick={handleClickIcon}>
+            <DownloadIcon/>
+            Download
+        </MenuItem>                   
         <MenuItem onClick={() => {
             handleEdit(_id)
             handleClose(undefined)
@@ -381,7 +373,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={`${forwardMessage&&fullType === null ? forwardMessage : fullType} ${forwardCaption ? forwardCaption : ''} ${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -21,6 +21,7 @@ import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import DoneIcon from '@mui/icons-material/Done';
 import EditIcon from '@mui/icons-material/Edit';
+import DownloadIcon from '@mui/icons-material/Download';
 import Avatar from '@mui/material/Avatar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'
@@ -183,10 +184,6 @@ const useStyles = makeStyles({
   },
   folderIcon: {
     color: '#00b333',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#00e040'
-    },
   },
   checkboxSelect: {
     position: 'absolute',
@@ -298,10 +295,7 @@ const MessageRightReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessa
     } else updateMessageById(_id,idEmoji)
   }
   
-  const handleClickIcon = (e: any) => {
-    e.stopPropagation()
-    handleDownload(url, fullType)
-  }
+  const handleClickIcon = () => handleDownload(url, fullType)  
 
   return (
     <div className={classes.container} style={{marginBottom:tongue?12:0}}>
@@ -312,17 +306,11 @@ 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('Text')} text={`${replyMessage ? replyMessage : ''} ${replyCaption ? replyCaption : ''}`}>
-            <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
-          </CopyToClipboard>}
-          {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('video') &&<VideoLibraryIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('application') && <InsertDriveFileIcon onClick={handleClickIcon}
-            className={classes.folderIcon} fontSize='large' />}
+          {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') && <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
           <div className={classes.column}></div>
           <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheMessage(oldId)}>
             <Typography style={{color: "#00b333"}} variant="h6" align="right">
@@ -372,7 +360,11 @@ const MessageRightReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessa
         }}>
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
-        </MenuItem>           
+        </MenuItem>
+        <MenuItem onClick={handleClickIcon}>
+            <DownloadIcon/>
+            Download
+        </MenuItem>                    
         <MenuItem onClick={() => {
             handleEdit(_id)
             handleClose(undefined)
@@ -380,7 +372,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={`${replyMessage&&fullType === null ? replyMessage : fullType} ${replyCaption ? replyCaption : ''} ${message ? message : ''} ${caption ? caption : ''}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -4,6 +4,11 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemText from '@mui/material/ListItemText';
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import ImageIcon from '@mui/icons-material/Image';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 
 import { firstLetter,slicedWord } from "../../../../../../helpers";
 import { TMessage } from "../../../../../../typescript/redux/messages/types";
@@ -46,7 +51,10 @@ const useStyles = makeStyles({
     width: 2,
     backgroundColor: 'rgb(41, 139, 231)',
     marginRight:10
-  }, 
+  },
+  folderIcon: {
+    color: '#54b0fc',
+  },  
 });
 
 interface IForwardBar {
@@ -81,7 +89,13 @@ const ForwardBar = ({ companionId,isForward, handleCloseForward,handleScrollToTh
               ${firstLetter(isForward.lastName)}${slicedWord(isForward.lastName, 15, 1)}`}
               primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
               secondary={`Type : ${isForward.type.toUpperCase()}`}
-              secondaryTypographyProps={{ fontSize:16 }}/>          
+              secondaryTypographyProps={{ fontSize:16 }}/>    
+            {isForward.type === 'text' &&<ContentCopyIcon className={classes.folderIcon} fontSize='large' />}
+            {isForward.type === 'audio' &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
+            {isForward.type === 'video' &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
+            {isForward.type === 'image' &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
+            {isForward.type === 'pdf'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}         
+            {isForward.type === 'docx'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}      
           </MenuItem>
         </ul>
         <CloseIcon onClick={handleCloseForward} className={classes.forwardIconClose} />

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

@@ -3,6 +3,11 @@ import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemText from '@mui/material/ListItemText';
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import ImageIcon from '@mui/icons-material/Image';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 
 import { firstLetter,slicedWord } from "../../../../../../helpers";
 import { TMessage } from "../../../../../../typescript/redux/messages/types";
@@ -43,7 +48,10 @@ const useStyles = makeStyles({
     width: 2,
     backgroundColor: 'rgb(41, 139, 231)',
     marginRight:10
-  }, 
+  },
+  folderIcon: {
+    color: '#54b0fc',
+  },  
 });
 
 interface IReplyBar {
@@ -66,7 +74,13 @@ const ReplyBar = ({ isReply, handleCloseReply,handleScrollToTheMessage }: IReply
               ${firstLetter(isReply.lastName)}${slicedWord(isReply.lastName, 15, 1)}`}
               primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
               secondary={`Type : ${isReply.type.toUpperCase()}`}
-              secondaryTypographyProps={{ fontSize:16 }}/>          
+              secondaryTypographyProps={{ fontSize: 16 }} />
+            {isReply.type === 'text' &&<ContentCopyIcon className={classes.folderIcon} fontSize='large' />}
+            {isReply.type === 'audio' &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
+            {isReply.type === 'video' &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
+            {isReply.type === 'image' &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
+            {isReply.type === 'pdf'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}         
+            {isReply.type === 'docx'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
           </MenuItem>
         </ul>
         <CloseIcon onClick={handleCloseReply} className={classes.replyIconClose} />

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

@@ -237,6 +237,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
           let isTime
           let isTongue = false
           const nextTongue = renderArr[i + 1]
+          const prevTongue = renderArr[i - 1]
           if (!unread && chatNumber === number&& seen - (i + 1) < 0) {
             isUnread = true
             unread = true

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

@@ -10,15 +10,12 @@ import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import ImageIcon from '@mui/icons-material/Image';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 import { useSelector } from 'react-redux';
 import { useState,useEffect} from 'react';
 
 import { TMessage } from '../../../../../typescript/redux/messages/types';
 import { getPinnedMessagesMemo } from '../../../../../redux/pinnedMessages/selector';
-import { prodAwsS3,copied,handleDownload } from '../../../../../helpers';
 import { pinMessageById } from '../../../../../api-data';
 
 const useStyles = makeStyles({
@@ -75,10 +72,6 @@ const useStyles = makeStyles({
   },
   folderIcon: {
     color: '#54b0fc',
-    cursor: 'pointer',
-    '&:hover': {
-      color: '#016cc3'
-    },
   },
 })
 
@@ -144,33 +137,19 @@ const PinnedBar = ({chatDivRef,handleOpenPinned}:IPinnedBar) => {
       </ul>      
       <ul className={classes.listWrapper}>
         <MenuItem onClick={handleActivePin}>
-          <ListItemText style={{marginLeft:20}}
+          <ListItemText style={{margin:'0px 10px 0px 20px'}}
             primary={`Pinned Message ${openedIndex + 1} of ${pinnedMessagesMemo.length}`}
             primaryTypographyProps={{ color: "#0379af",fontSize:16 }}
             secondary={`Type : ${openedPin.type.toUpperCase()}`}
-            secondaryTypographyProps={{ fontSize:16 }}/>          
-        </MenuItem>
+            secondaryTypographyProps={{ fontSize:16 }}/> 
+          {openedPin.type === 'text' &&<ContentCopyIcon className={classes.folderIcon} fontSize='large' />}
+          {openedPin.type === 'audio' &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
+          {openedPin.type === 'video' &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
+          {openedPin.type === 'image' &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
+          {openedPin.type === 'pdf'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}         
+          {openedPin.type === 'docx'&&<InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}           
+        </MenuItem>      
       </ul>
-      <ListItemAvatar style={{marginLeft:10}}>
-        {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={() =>
-          handleDownload(`${prodAwsS3}/${openedPin.message}`, openedPin.fullType)}
-          className={classes.folderIcon} fontSize='large' />}
-        {openedPin.type === 'video' &&<VideoLibraryIcon onClick={() =>
-          handleDownload(`${prodAwsS3}/${openedPin.message}`, openedPin.fullType)}
-          className={classes.folderIcon} fontSize='large' />}
-        {openedPin.type === 'image' &&<ImageIcon onClick={() =>
-          handleDownload(`${prodAwsS3}/${openedPin.message}`, openedPin.fullType)}
-          className={classes.folderIcon} fontSize='large' />}
-        {openedPin.type === 'pdf' ?<InsertDriveFileIcon onClick={() =>
-          handleDownload(`${prodAwsS3}/${openedPin.message}`, openedPin.fullType)}
-          className={classes.folderIcon} fontSize='large' />:null}         
-        {openedPin.type === 'docx' ?<InsertDriveFileIcon onClick={() =>
-          handleDownload(`${prodAwsS3}/${openedPin.message}`, openedPin.fullType)}
-          className={classes.folderIcon} fontSize='large' />:null}        
-      </ListItemAvatar>
       <IconButton onClick={() => setModal(true)} aria-label="delete" size="medium">
         <CloseIcon className={classes.iconClose} fontSize='medium'/>
       </IconButton>

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

@@ -249,7 +249,7 @@ const  ChatItem = ({chat,handleListItemClick,handleNewMsgs,id,pinned,selectedCom
             className={classes.listItem_typing}>
             typing<span style={{color:openedChat?'#ffffff':'#1b1b1b'}}
             className={classes.listItem_dots}>...</span></span> :
-            lastMessage ? slicedWord(lastMessage, 35) :
+            lastMessage ? slicedWord(lastMessage, 28) :
             `${firstLetter(name)}${slicedWord(name, 15, 1)} joined Telegram`}
             secondaryTypographyProps={{color:openedChat?'#ffffff':'#000000'}}/>
           <ListItemIcon className={classes.listItem_iconRight}>

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

@@ -40,7 +40,7 @@ const useStyles = makeStyles({
   },  
   folderIcon: {
     margin: 'auto 0px',
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: '#54b0fc',
   },
   listItem: {
     cursor:'pointer',

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

@@ -40,7 +40,7 @@ const useStyles = makeStyles({
   }, 
   folderIcon: {
     margin: 'auto 0px',
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: '#54b0fc',
   },
   listItem: {
     cursor:'pointer',

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

@@ -46,7 +46,7 @@ const useStyles = makeStyles({
   },
   folderIcon: {
     margin: 'auto 0px',
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: '#54b0fc',
   },
   '@keyframes moveElement': {
    '0%': { left: '-100%'},

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

@@ -40,7 +40,7 @@ const useStyles = makeStyles({
   },   
   folderIcon: {
     margin: 'auto 0px',
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: '#54b0fc',
   },
   listItem: {
     cursor:'pointer',

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

@@ -20,7 +20,7 @@ const useStyles = makeStyles({
   },
   folderIcon: {
     margin: 'auto 0px',
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: '#54b0fc',
   },
   listItem: {
     cursor:'pointer',

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

@@ -20,7 +20,7 @@ const useStyles = makeStyles({
   },  
   folderIcon: {
     margin: 'auto 0px',
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: '#54b0fc',
   },
   listItem: {
     cursor:'pointer',

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

@@ -26,7 +26,7 @@ const useStyles = makeStyles({
   },
   folderIcon: {
     margin: 'auto 0px',
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: '#54b0fc',
   },
   '@keyframes moveElement': {
    '0%': { left: '100%'},

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

@@ -20,7 +20,7 @@ const useStyles = makeStyles({
   },  
   folderIcon: {
     margin: 'auto 0px',
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: '#54b0fc',
   },
   listItem: {
     cursor:'pointer',

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

@@ -56,7 +56,7 @@ const useStyles = makeStyles({
   },
   folderIcon: {
     margin: 'auto 0px',
-    color: 'rgba(0, 0, 0, 0.5)',
+    color: '#54b0fc',
   }
 })
 

src/typescript/redux/allMessages/types.ts

@@ -23,6 +23,7 @@ export type TMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
+  deleted: boolean,
   edited: boolean,
   idTime: string,
   oldId: string,

src/typescript/redux/messages/types.ts

@@ -20,6 +20,7 @@ export type TMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
+  deleted: boolean,
   edited: boolean,
   idTime: string,
   oldId: string,

src/typescript/redux/pinnedMessages/types.ts

@@ -20,6 +20,7 @@ export type TPinnedMessage = {
   emoji: string,
   emojiCompanion: string,
   pinned: boolean,
+  deleted: boolean,
   edited: boolean,
   idTime: string,
   oldId: string,