fix visuality chat

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

@@ -65,79 +65,32 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 0px 10px 22px'
   }, 
   wrapper: {
     position: 'relative',
     display: 'flex',
-    flexWrap:'wrap',
-    padding: '12px 5px 18px 5px',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    padding: 5,
     width:350,
-    backgroundColor: "#ffffff",
     borderRadius: 7,
   },
   wrapperInner: {
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
     alignItems: 'center',
-    width:'100%'
-  },
-    message: {
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
+    alignContent: 'center',
+    width: '100%',
+    cursor: 'pointer',
+    padding:'10px 0px',
   },
-    messageActive: {
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #babdbc",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #babdbc",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },      
+  time: {
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
+  },  
   folderIcon: {
     color: '#54b0fc',
     cursor: 'pointer',
@@ -149,16 +102,6 @@ const useStyles = makeStyles({
     margin: '0px 5px 0px 0px',
     borderRadius: 7,
   },
-  time: {
-    position: "absolute",
-    fontSize: ".65em",
-    fontWeight:600,
-    bottom: 0,
-    right: 6,
-    color: '#414141',
-    padding: 3,
-    borderRadius: 5,
-  },
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -291,10 +234,8 @@ const MessageLeftAudio = ({ url,name,lastName,createdAt,fullType,caption,emoji,e
   return (
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)}
-        className={classes.wrapper} style={{
-          backgroundColor: selected ? '#babdbc' : undefined,
-          pointerEvents: isSomeSelected ? 'none' : 'auto'}}>
-         <Typography style={{color: "#42aee0",marginBottom:4}} variant="h6" align="right">
+        className={classes.wrapper} style={{backgroundColor: selected ? '#babdbc' : "#ffffff",pointerEvents: isSomeSelected ? 'none' : 'auto'}}>
+         <Typography style={{color: "#00b333"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
@@ -303,9 +244,7 @@ const MessageLeftAudio = ({ url,name,lastName,createdAt,fullType,caption,emoji,e
             className={classes.folderIcon} fontSize='large' />
           <ReactAudioPlayer className={classes.player} src={url} controls />
         </div>
-        {caption && <ListItemText className={selected?classes.messageActive:classes.message}
-           primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
-           secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
+        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}

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

@@ -19,7 +19,7 @@ import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
+import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter,handleDownload } from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
@@ -66,96 +66,36 @@ const useStyles = makeStyles({
     alignContent: 'flex-start',
     flexDirection:'column',
     borderRadius: 7,
-    marginBottom: 5,
     padding:'10px 0px 10px 22px'
   }, 
   wrapper: {
     position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     maxWidth: 450,
     minWidth:200,
-    padding: '5px 5px 22px 5px',
-    backgroundColor: '#ffffff',
+    padding: 5,
     borderRadius: 7, 
   },
   wrapperInner: {
-    position:'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
     width: '100%',
     cursor: 'pointer',
+    padding:'10px 10px 10px 0px',
     '&:hover': {
       backgroundColor: 'rgba(104, 105, 104, 0.2)'
     }
-  },   
+  },  
   time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 0,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
-  },
-    message: {
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },
-    messageActive: {
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #babdbc",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #babdbc",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },   
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
+  }, 
   overlay: {
     position: 'absolute',
     top: 0,
@@ -327,9 +267,10 @@ const MessageLeftFile = ({ url,name,lastName,createdAt,type,caption,emoji,emojiC
       setScale(scale-0.25)
     }
   }   
-  const handleOpenRead = (e: any) => {
-    const id = e.target.id
-    if(id === 'read') !read&&setRead(true)
+  const handleOpenRead = () => !read&&setRead(true)
+  const handleDownloadFile = (e: any) => {
+    e.stopPropagation()
+    handleDownload(url, type)
   }
   const handleCloseRead = (e:any) => {
     const id = e.target.id
@@ -384,20 +325,16 @@ const MessageLeftFile = ({ url,name,lastName,createdAt,type,caption,emoji,emojiC
         </div>
       </div>}
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#babdbc':"#ffffff",pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#00b333"}} 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}>
-          <a href={url} target="_blank" rel="noreferrer" download>
-           <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />
-          </a>
-          {!read && <span id='read'>Read File</span>} 
+          <InsertDriveFileIcon onClick={handleDownloadFile} className={classes.folderIcon} fontSize='large' />
+          {!read &&<ListItemText primary='Press to read the File'/>} 
         </div>
-        {caption && <ListItemText className={selected ? classes.messageActive : classes.message}
-          primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
-          secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
+        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}

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

@@ -66,111 +66,46 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 0px 10px 22px'
   }, 
   wrapper: {
     position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap:'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     maxWidth: 450,
     minWidth:200,
-    padding: "10px",
-    paddingBottom:18,
-    backgroundColor: "#ffffff",
-    border: "1px solid #f0f0f0",
+    padding: 5,
     borderRadius: 7,
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
   },
   wrapperInner: {
+    position: 'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    width:'100%'
-  },    
-  message: {
-      display: 'flex',
-      alignItems: 'center',
-      alignContent: 'center',
-      flexWrap: 'wrap',    
-      marginLeft:20,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "-1px",
-        left: "-17px"
-      }      
-  },
-  messageActive: {
-      display: 'flex',
-      alignItems: 'center',
-      alignContent: 'center',
-      flexWrap: 'wrap',    
-      marginLeft:20,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #babdbc",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #babdbc",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },    
-  copyIcon: {
-    color: '#b56ff7',
+    width: '100%',
     cursor: 'pointer',
-    marginRight: 7,
     '&:hover': {
-      color: '#9c3bf8',
-    },
+      backgroundColor: 'rgba(104, 105, 104, 0.2)'
+    }
+  },
+  wrapperInnerMessage: {
+    display: 'flex',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    marginLeft:20,
   },  
   time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 6,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
-  },
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
+  },      
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -243,20 +178,20 @@ const useStyles = makeStyles({
     pointerEvents: 'auto'
   },
   folderIcon: {
-    color: '#00b333',
+    color: '#26afee',
     cursor: 'pointer',
     '&:hover': {
-      color: '#00e040'
+      color: '#49c1f8'
     },
   },
-  forwardColumn: {
+  column: {
     position: 'absolute',
     content: '',
     width: 2,
-    left:53,
+    left:43,
     top:'10%',
     height:'80%',
-    backgroundColor: '#00b333',
+    backgroundColor: '#26afee',
   },    
 });
 
@@ -328,14 +263,13 @@ const MessageLeftForward = ({url,message,name,lastName,forwardName,forwardLastNa
   return (
     <div className={classes.container}>
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#babdbc':undefined,
-        border:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{marginLeft:55,color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#00b333"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={message}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${message} , Caption: ${caption}`}>
           <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
@@ -346,16 +280,21 @@ const MessageLeftForward = ({url,message,name,lastName,forwardName,forwardLastNa
            className={classes.folderIcon} fontSize='large' />}
           {fullType && fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-          <div className={classes.forwardColumn}></div>
-          <div className={selected?classes.messageActive:classes.message}>
-            <ListItemText style={{width:'100%'}}   primary={`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)} 
-             ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
-             primaryTypographyProps={{color: "#00b333"}}
-             secondary={message} secondaryTypographyProps={{ color: "#0e0d0d" }}/>
-            {caption&&<ListItemText style={{width:'100%'}} primary='Caption' primaryTypographyProps={{color: "#00b333"}}
-             secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }} />}
+          <div className={classes.column}></div>
+          <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheChat('oldId')}>
+            <Typography style={{color: "#26afee"}} variant="h6" align="right">
+             {`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)}
+              ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
+            </Typography>
+            <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }}
+              secondary={caption} secondaryTypographyProps={{color: "#7a7a7a"}}/>
+            {/* <ListItemText primary={caption} primaryTypographyProps={{color: "#7a7a7a"}}/> */}
           </div>
-        </div>        
+        </div>
+        <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }}
+          secondary={caption} secondaryTypographyProps={{color: "#7a7a7a"}}/>
+        {/* <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+        <ListItemText primary={caption} primaryTypographyProps={{color: "#7a7a7a"}}/> */}
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -382,7 +321,7 @@ const MessageLeftForward = ({url,message,name,lastName,forwardName,forwardLastNa
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -3,9 +3,7 @@ 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 { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -70,43 +68,36 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 0px 10px 22px'
   },
   wrapper: {
-    width: 400,
     position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    width: 400,
     borderRadius: 7,
-    padding: '12px 5px 18px 5px',
-    backgroundColor: '#ffffff',   
+    padding: 5,
   },
   wrapperInner: {
-    position:'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    width: '100%',
+  },
+  time: {
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
   },  
   image: {
     borderRadius: 7,
-    width: 300,
-    maxHeight: 400,
+    width: 348,
+    maxHeight: 'auto',
     cursor: 'pointer',
-  },  
-    time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 0,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
-  },     
+    padding: '10px 0px 10px 0px',
+  },    
   bntDownload: {
     backgroundColor: 'inherit',
     color: '#54b0fc',
@@ -394,8 +385,8 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
     </div>  :
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#ced8d7':"#ffffff",pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#00b333"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
@@ -405,8 +396,7 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
           <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
             style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
         </div>
-        {caption&&<ListItemText style={{wordBreak:'break-word'}}  primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
-          secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}       
+        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}

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

@@ -66,97 +66,46 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 0px 10px 22px'
   }, 
   wrapper: {
     position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     maxWidth: 450,
     minWidth:200,
-    padding: "10px",
-    paddingBottom:18,
-    backgroundColor: "#ffffff",
+    padding: 5,
     borderRadius: 7,
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
   },
   wrapperInner: {
-    position:'relative',
+    position: 'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
     width: '100%',
     cursor: 'pointer',
-     '&:hover': {
+    '&:hover': {
       backgroundColor: 'rgba(104, 105, 104, 0.2)'
     }
   },
   wrapperInnerMessage: {
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     marginLeft:20,
-    wordBreak:'break-word',
-    textAlign: "left",
-    font: "400 .9em 'Open Sans', sans-serif",
-  },  
-    message: {
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
   },
-    messageActive: {
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #babdbc",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #babdbc",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },    
+  time: {
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
+  },  
   copyIcon: {
     color: '#b56ff7',
     cursor: 'pointer',
@@ -165,16 +114,6 @@ const useStyles = makeStyles({
       color: '#9c3bf8',
     },
   },  
-  time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 6,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
-  },
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -241,10 +180,10 @@ const useStyles = makeStyles({
     }
   },
   folderIcon: {
-    color: '#00b333',
+    color: '#26afee',
     cursor: 'pointer',
     '&:hover': {
-      color: '#00e040'
+      color: '#49c1f8'
     },
   },
   replyListItem: {
@@ -260,14 +199,14 @@ const useStyles = makeStyles({
     bottom: -10,
     pointerEvents: 'auto'
   },
-  replyColumn: {
+  column: {
     position: 'absolute',
     content: '',
     width: 2,
     left:43,
     top:'10%',
     height:'80%',
-    backgroundColor: '#00b333',
+    backgroundColor: '#26afee',
   },  
 });
 
@@ -342,8 +281,8 @@ const MessageLeftReply = ({url,replyMessage,message,name,lastName,replyName,repl
   return (
     <div className={classes.container}>
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-        style={{backgroundColor:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+        style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#00b333"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
@@ -359,26 +298,18 @@ const MessageLeftReply = ({url,replyMessage,message,name,lastName,replyName,repl
             className={classes.folderIcon} fontSize='large' />}
           {fullType&&fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-          <div className={classes.replyColumn}></div>
-          <div className={classes.wrapperInnerMessage}>
-            <Typography style={{color: "#00b333"}} variant="h6" align="right">
+          <div className={classes.column}></div>
+          <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheMessage(oldId)}>
+            <Typography style={{color: "#26afee"}} variant="h6" align="right">
              {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
               ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
             </Typography>
-            <ListItemText style={{width:'100%'}} onClick={() => handleScrollToTheMessage(oldId)}
-              primary='Message' primaryTypographyProps={{color: "#00b333"}}
-              secondary={replyMessage} secondaryTypographyProps={{ color: "#626262" }} />
-              {replyCaption&&<ListItemText style={{width:'100%'}} onClick={() => handleScrollToTheMessage(oldId)}
-               primary='Caption' primaryTypographyProps={{color: "#00b333"}}
-               secondary={replyCaption} secondaryTypographyProps={{ color: "#626262" }}/>}
+            <ListItemText primary={replyMessage} primaryTypographyProps={{ color: "#000000" }} />
+            <ListItemText primary={replyCaption} primaryTypographyProps={{color: "#000000"}}/>
           </div>
         </div>        
-        <div className={selected?classes.messageActive:classes.message}>
-          <ListItemText primary='Message' primaryTypographyProps={{ color: "#42aee0" }}
-            secondary={message} secondaryTypographyProps={{ color: "#2f2f2f" }} />
-          {caption && <ListItemText primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
-           secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
-        </div>        
+        <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+        <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}

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

@@ -62,92 +62,39 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 0px 10px 22px'
   }, 
   wrapper: {
     position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap:'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     maxWidth: 450,
     minWidth:200,
-    padding: "10px",
-    paddingBottom:18,
-    backgroundColor: "#ffffff",
+    padding: 5,
     borderRadius: 7,
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
   },
   wrapperInner: {
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    width:'100%'
-  },   
-    message: {
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ffffff",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ffffff",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },
-    messageActive: {
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #babdbc",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: '0px',
-        left: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #babdbc",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        left: "-17px"
-      }      
-  },     
-  time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 6,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
   },  
+  wrapperInnerMessage: {
+    display: 'flex',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+  },  
+  time: {
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
+  },      
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -287,8 +234,8 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
   return (
     <div className={classes.container}>
      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#babdbc':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#babdbc':"#ffffff",pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#00b333"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
@@ -296,12 +243,9 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
           <CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${message} , Caption: ${caption}`}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>
-          <div className={selected?classes.messageActive:classes.message}>
-            <ListItemText primary='Message' primaryTypographyProps={{color: "#42aee0"}}
-              secondary={message} secondaryTypographyProps={{ color: "#0e0d0d" }} />
-              {caption&&<ListItemText className={selected?classes.messageActive:classes.message}
-               primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
-               secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}
+          <div className={classes.wrapperInnerMessage}>
+            <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+            <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
           </div>
         </div>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>

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

@@ -64,27 +64,30 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 0px 10px 22px'
   }, 
   wrapper: {
     position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     width: 400,
-    padding: '12px 5px 18px 5px',
-    backgroundColor: '#ffffff',
+    padding: 5,
     borderRadius: 7,
   },
   wrapperInner: {
-    position:'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
     width: '100%',
   },  
+  time: {
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
+  },
   bntDownload: {
     backgroundColor: 'inherit',
     color: '#54b0fc',
@@ -96,16 +99,6 @@ const useStyles = makeStyles({
       color:'#ffffff'
     }
   },
-  time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 0,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
-  },
   player: {
     backgroundColor: '#ffffff',
   },
@@ -251,18 +244,17 @@ const MessageLeftVideo = ({ url,name,lastName,createdAt,fullType,caption,emoji,e
   return (
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#00b333"}} 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}/>
+          <Player className={selected?classes.playerActive:classes.player} playsInline  src={url}/>
         </div>
-        {caption&&<ListItemText style={{wordBreak:'break-word'}}  primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
-          secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}
+        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}

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

@@ -64,79 +64,32 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 0px 10px 22px'
   },
   wrapper: {
     position: 'relative',
     display: 'flex',
-    flexWrap:'wrap',
-    padding: '12px 5px 18px 5px',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    padding: 5,
     width:350,
-    backgroundColor: '#deffa9',
     borderRadius: 7,
   },
   wrapperInner: {
     display: 'flex',
-    justifyContent: 'space-between',
-    alignContent: 'center',
     alignItems: 'center',
-    width:'100%'
+    alignContent: 'center',
+    width: '100%',
+    cursor: 'pointer',
+    padding:'10px 0px',
   },
-  message: {
-    wordBreak:'break-word',
-    textAlign: "left",
-    font: "400 .9em 'Open Sans', sans-serif",
-    "&:after": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "15px solid #deffa9",
-      borderLeft: "15px solid transparent",
-      borderRight: "15px solid transparent",
-      bottom: "0px",
-      right: "-15px"
-    },
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "17px solid #deffa9",
-      borderLeft: "16px solid transparent",
-      borderRight: "16px solid transparent",
-      bottom: "0px",
-      right: "-17px"
-    },
+  time: {
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
   },
-  messageActive: {
-    wordBreak:'break-word',
-    textAlign: "left",
-    font: "400 .9em 'Open Sans', sans-serif",
-    "&:after": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "15px solid #ced8d7",
-      borderLeft: "15px solid transparent",
-      borderRight: "15px solid transparent",
-      bottom: "0",
-      right: "-15px"
-    },
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "17px solid #ced8d7",
-      borderLeft: "16px solid transparent",
-      borderRight: "16px solid transparent",
-      bottom: "0px",
-      right: "-17px"
-    }
-  },  
   folderIcon: {
     color: '#54b0fc',
     cursor: 'pointer',
@@ -148,16 +101,6 @@ const useStyles = makeStyles({
     margin: '0px 5px 0px 0px',
     borderRadius: 7,
   },
-  time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 2,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
-  },
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -289,8 +232,8 @@ const MessageRightAudio = ({ url,name,lastName,createdAt,fullType,caption,_id,em
   return (
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-        style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents: isSomeSelected ? 'none' : 'auto' }}>
-        <Typography style={{color: "#42aee0",marginBottom:4}} variant="h6" align="right">
+        style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents: isSomeSelected ? 'none' : 'auto' }}>
+        <Typography style={{color: "#26afee"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
@@ -299,9 +242,7 @@ const MessageRightAudio = ({ url,name,lastName,createdAt,fullType,caption,_id,em
             className={classes.folderIcon} fontSize='large' />
           <ReactAudioPlayer className={classes.player} src={url} controls />
         </div>
-        {caption && <ListItemText className={selected?classes.messageActive:classes.message}
-           primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
-           secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
+        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}

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

@@ -19,7 +19,7 @@ import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ReplyIcon from '@mui/icons-material/Reply';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'
+import { timeStampMessage,copied,emojisArr,slicedWord,firstLetter,handleDownload} from '../../../../../../helpers'
 
 const FileViewer =  require('react-file-viewer')
 
@@ -66,95 +66,35 @@ const useStyles = makeStyles({
     alignContent: 'flex-end',
     flexDirection:'column',
     borderRadius: 7,
-    marginBottom: 5,
     padding:'10px 22px 10px 0px'
   },
   wrapper: {
     position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     maxWidth: 450,
     minWidth:200,
-    padding: '5px 5px 22px 5px',
-    backgroundColor: '#deffa9',
+    padding: 5,
     borderRadius: 7,
   },
   wrapperInner: {
-    position:'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
     width: '100%',
     cursor: 'pointer',
+    padding:'10px 10px 10px 0px',
     '&:hover': {
       backgroundColor: 'rgba(104, 105, 104, 0.2)'
     }
   },  
-  message: {
-    wordBreak:'break-word',
-    textAlign: "left",
-    font: "400 .9em 'Open Sans', sans-serif",
-    "&:after": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "15px solid #deffa9",
-      borderLeft: "15px solid transparent",
-      borderRight: "15px solid transparent",
-      bottom: "0px",
-      right: "-15px"
-    },
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "17px solid #deffa9",
-      borderLeft: "16px solid transparent",
-      borderRight: "16px solid transparent",
-      bottom: "0px",
-      right: "-17px"
-    },
-  },
-  messageActive: {
-    wordBreak:'break-word',
-    textAlign: "left",
-    font: "400 .9em 'Open Sans', sans-serif",
-    "&:after": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "15px solid #ced8d7",
-      borderLeft: "15px solid transparent",
-      borderRight: "15px solid transparent",
-      bottom: "0",
-      right: "-15px"
-    },
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "17px solid #ced8d7",
-      borderLeft: "16px solid transparent",
-      borderRight: "16px solid transparent",
-      bottom: "0px",
-      right: "-17px"
-    }
-  },   
   time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 0,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
   },
   overlay: {
     position: 'absolute',
@@ -327,9 +267,10 @@ const MessageRightFile = ({ url,name,lastName,createdAt,type,caption,emoji,emoji
       setScale(scale-0.25)
     }
   }    
-  const handleOpenRead = (e: any) => {
-    const id = e.target.id
-    if(id === 'read') !read&&setRead(true)
+  const handleOpenRead = () => !read&&setRead(true)
+  const handleDownloadFile = (e: any) => {
+    e.stopPropagation()
+    handleDownload(url, type)
   }
   const handleCloseRead = (e:any) => {
     const id = e.target.id
@@ -384,20 +325,16 @@ const MessageRightFile = ({ url,name,lastName,createdAt,type,caption,emoji,emoji
         </div>
       </div>}
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#ced8d7':"#deffa9",pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#26afee"}} 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}>
-          <a href={url} target="_blank" rel="noreferrer" download>
-           <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />
-          </a>
-          {!read && <span id='read'>Read File</span>} 
+          <InsertDriveFileIcon onClick={handleDownloadFile} className={classes.folderIcon} fontSize='large' />
+          {!read &&<ListItemText primary='Press to read the File'/>} 
         </div>
-        {caption && <ListItemText className={selected ? classes.messageActive : classes.message}
-          primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
-          secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
+        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}

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

@@ -66,111 +66,46 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 22px 10px 0px'
   },
   wrapper: {
     position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap:'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     maxWidth: 450,
     minWidth:200,
-    padding: "10px",
-    paddingBottom:18,
-    backgroundColor: "#deffa9",
-    border: "1px solid #d5ff91",
+    padding: 5,
     borderRadius: 7,
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
   },
   wrapperInner: {
+    position: 'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    width:'100%'
-  },
-  message: {
-      display: 'flex',
-      alignItems: 'center',
-      alignContent: 'center',
-      flexWrap: 'wrap',
-      marginLeft:20,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "-1px",
-        right: "-17px"
-      }
-  },
-  messageActive: {
-      display: 'flex',
-      alignItems: 'center',
-      alignContent: 'center',
-      flexWrap: 'wrap',
-      marginLeft:20,
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ced8d7",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ced8d7",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }
-  },    
-  copyIcon: {
-    color: '#b56ff7',
+    width: '100%',
     cursor: 'pointer',
-    marginRight: 7,
     '&:hover': {
-      color: '#9c3bf8',
-    },
+      backgroundColor: 'rgba(104, 105, 104, 0.2)'
+    }
   },
+  wrapperInnerMessage: {
+    display: 'flex',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    marginLeft:20,
+  },  
   time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 6,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
-  },
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
+  }, 
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -249,15 +184,15 @@ const useStyles = makeStyles({
       color: '#00e040'
     },
   },
-  forwardColumn: {
+  column: {
     position: 'absolute',
     content: '',
     width: 2,
-    left:53,
+    left:43,
     top:'10%',
     height:'80%',
     backgroundColor: '#00b333',
-  },   
+  },  
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -327,14 +262,13 @@ const MessageRightForward = ({url,message,name,lastName,forwardName,forwardLastN
   return (
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-        style={{backgroundColor:selected?'#ced8d7':undefined,
-        border: selected ? '#ced8d7' : undefined, pointerEvents: isSomeSelected ? 'none' : 'auto'}}>
-        <Typography style={{marginLeft:55,color: "#42aee0"}} variant="h6" align="right">
+        style={{backgroundColor:selected?'#ced8d7':'#deffa9', pointerEvents: isSomeSelected ? 'none' : 'auto'}}>
+        <Typography style={{color: "#26afee"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
         <div className={classes.wrapperInner}>
-          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={message}>
+          {fullType === null &&<CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${message} , Caption: ${caption}`}>
            <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>}
           {fullType&&fullType.includes('audio') &&<LibraryMusicIcon onClick={handleClickIcon}
@@ -345,16 +279,18 @@ const MessageRightForward = ({url,message,name,lastName,forwardName,forwardLastN
             className={classes.folderIcon} fontSize='large' />}
           {fullType && fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
            className={classes.folderIcon} fontSize='large' />}
-          <div className={classes.forwardColumn}></div>
-          <div className={selected?classes.messageActive:classes.message}>
-            <ListItemText style={{width:'100%'}}   primary={`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)} 
-             ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
-             primaryTypographyProps={{color: "#00b333"}}
-             secondary={message} secondaryTypographyProps={{ color: "#0e0d0d" }}/>
-            {caption&&<ListItemText style={{width:'100%'}} primary='Caption' primaryTypographyProps={{color: "#00b333"}}
-             secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }} />}
+          <div className={classes.column}></div>
+          <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheChat('oldId')}>
+            <Typography style={{color: "#00b333"}} variant="h6" align="right">
+             {`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)}
+              ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}
+            </Typography>
+            <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+            <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
           </div>
         </div>
+        <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+        <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
@@ -381,7 +317,7 @@ const MessageRightForward = ({url,message,name,lastName,forwardName,forwardLastN
             <ReplyIcon style={{transform :'rotateY(180deg)'}} />
             Forward
         </MenuItem>           
-        <CopyToClipboard onCopy={() => handleClose('copy')} text={message}>
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}>
           <MenuItem>
             <ContentCopyIcon />
              Copy Text

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

@@ -68,97 +68,36 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 22px 10px 0px'
   },
   wrapper: {
-    position:'relative',
-    width: 400,
+    position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    width: 400,
     borderRadius: 7,
-    padding: '12px 5px 18px 5px',
-    backgroundColor: '#deffa9',
+    padding: 5,
   },
   wrapperInner: {
-    position:'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    width: '100%',
-  },
-  message: {
-    wordBreak:'break-word',
-    textAlign: "left",
-    font: "400 .9em 'Open Sans', sans-serif",
-    "&:after": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "15px solid #deffa9",
-      borderLeft: "15px solid transparent",
-      borderRight: "15px solid transparent",
-      bottom: "0px",
-      right: "-15px"
-    },
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "17px solid #deffa9",
-      borderLeft: "16px solid transparent",
-      borderRight: "16px solid transparent",
-      bottom: "0px",
-      right: "-17px"
-    },
   },
-  messageActive: {
-    wordBreak:'break-word',
-    textAlign: "left",
-    font: "400 .9em 'Open Sans', sans-serif",
-    "&:after": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "15px solid #ced8d7",
-      borderLeft: "15px solid transparent",
-      borderRight: "15px solid transparent",
-      bottom: "0",
-      right: "-15px"
-    },
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "17px solid #ced8d7",
-      borderLeft: "16px solid transparent",
-      borderRight: "16px solid transparent",
-      bottom: "0px",
-      right: "-17px"
-    }
-  },  
-    image: {
-      borderRadius: 7,
-      width: 300,
-      maxHeight: 400,
-      cursor:'pointer',
-    },  
-    time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 0,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
+  time: {
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
   },  
+  image: {
+    borderRadius: 7,
+    width: 348,
+    maxHeight: 'auto',
+    cursor: 'pointer',
+    padding: '10px 0px 10px 0px'
+  },   
   overlay: {
     position: 'fixed',
     top: 0,
@@ -436,8 +375,8 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
     </div>  :
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#26afee"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
@@ -447,8 +386,7 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
           <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
             style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
         </div>
-        {caption&&<ListItemText style={{wordBreak:'break-word'}}  primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
-          secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}
+        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}

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

@@ -66,24 +66,24 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 22px 10px 0px'
   },
   wrapper: {
     position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     maxWidth: 450,
     minWidth:200,
-    padding: "10px",
-    paddingBottom:18,
-    backgroundColor: "#deffa9",
+    padding: 5,
     borderRadius: 7,
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
   },
   wrapperInner: {
-    position:'relative',
+    position: 'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
@@ -95,77 +95,16 @@ const useStyles = makeStyles({
   },
   wrapperInnerMessage: {
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     marginLeft:20,
-    wordBreak:'break-word',
-    textAlign: "left",
-    font: "400 .9em 'Open Sans', sans-serif",
   },  
-  message: {
-    wordBreak:'break-word',
-    textAlign: "left",
-    font: "400 .9em 'Open Sans', sans-serif",
-    "&:after": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "15px solid #deffa9",
-      borderLeft: "15px solid transparent",
-      borderRight: "15px solid transparent",
-      bottom: "0px",
-      right: "-15px"
-    },
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "17px solid #deffa9",
-      borderLeft: "16px solid transparent",
-      borderRight: "16px solid transparent",
-      bottom: "0px",
-      right: "-17px"
-    },
-  },
-  messageActive: {
-    wordBreak:'break-word',
-    textAlign: "left",
-    font: "400 .9em 'Open Sans', sans-serif",
-    "&:after": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "15px solid #ced8d7",
-      borderLeft: "15px solid transparent",
-      borderRight: "15px solid transparent",
-      bottom: "0",
-      right: "-15px"
-    },
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      width: "0",
-      height: "0",
-      borderBottom: "17px solid #ced8d7",
-      borderLeft: "16px solid transparent",
-      borderRight: "16px solid transparent",
-      bottom: "0px",
-      right: "-17px"
-    }
-  },    
   time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 6,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
   },    
   modalDelete: {
     background: '#ffffff',
@@ -245,7 +184,7 @@ const useStyles = makeStyles({
     bottom: -10,
     pointerEvents: 'auto'
   },
-  replyColumn: {
+  column: {
     position: 'absolute',
     content: '',
     width: 2,
@@ -254,9 +193,6 @@ const useStyles = makeStyles({
     height:'80%',
     backgroundColor: '#00b333',
   },
-  tittle: {
-    margin:0,
-  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -329,8 +265,8 @@ const MessageRightReply = ({url,replyMessage,message,name,lastName,replyName,rep
   return (
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#26afee"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
@@ -346,26 +282,18 @@ const MessageRightReply = ({url,replyMessage,message,name,lastName,replyName,rep
             className={classes.folderIcon} fontSize='large' />}
           {fullType&&fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-          <div className={classes.replyColumn}></div>
-          <div className={classes.wrapperInnerMessage}>
+          <div className={classes.column}></div>
+          <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheMessage(oldId)}>
             <Typography style={{color: "#00b333"}} variant="h6" align="right">
              {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}
               ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
             </Typography>
-            <ListItemText style={{width:'100%'}} onClick={() => handleScrollToTheMessage(oldId)}
-              primary='Message' primaryTypographyProps={{color: "#00b333"}}
-              secondary={replyMessage} secondaryTypographyProps={{ color: "#626262" }} />
-              {replyCaption&&<ListItemText style={{width:'100%'}} onClick={() => handleScrollToTheMessage(oldId)}
-               primary='Caption' primaryTypographyProps={{color: "#00b333"}}
-               secondary={replyCaption} secondaryTypographyProps={{ color: "#626262" }}/>}
+            <ListItemText primary={replyMessage} primaryTypographyProps={{ color: "#000000" }} />
+            <ListItemText primary={replyCaption} primaryTypographyProps={{color: "#000000"}}/>
           </div>
         </div>
-        <div className={selected?classes.messageActive:classes.message}>
-          <ListItemText primary='Message' primaryTypographyProps={{ color: "#42aee0" }}
-            secondary={message} secondaryTypographyProps={{ color: "#2f2f2f" }} />
-          {caption && <ListItemText primary='Caption' primaryTypographyProps={{ color: "#42aee0" }}
-           secondary={caption} secondaryTypographyProps={{ color: "#2f2f2f" }}/>}
-        </div>
+        <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+        <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}

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

@@ -62,91 +62,38 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
     padding:'10px 22px 10px 0px'
   },
-    wrapper: {
-      position: 'relative',
-      display: 'flex',
-      alignItems: 'center',
-      alignContent: 'center',
-      flexWrap:'wrap',
-      maxWidth: 450,
-      minWidth:200,
-      padding: "10px",
-      paddingBottom:18,
-      backgroundColor: "#deffa9",
-      borderRadius: 7,
+  wrapper: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    maxWidth: 450,
+    minWidth:200,
+    padding: 5,
+    borderRadius: 7,
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
   },
   wrapperInner: {
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    width:'100%'
   },  
-    message: {
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #deffa9",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #deffa9",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }
-  },
-    messageActive: {
-      wordBreak:'break-word',
-      textAlign: "left",
-      font: "400 .9em 'Open Sans', sans-serif",
-      "&:after": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "15px solid #ced8d7",
-        borderLeft: "15px solid transparent",
-        borderRight: "15px solid transparent",
-        bottom: "0px",
-        right: "-15px"
-      },
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        width: "0",
-        height: "0",
-        borderBottom: "17px solid #ced8d7",
-        borderLeft: "16px solid transparent",
-        borderRight: "16px solid transparent",
-        bottom: "0px",
-        right: "-17px"
-      }
-  },    
+  wrapperInnerMessage: {
+    display: 'flex',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+  },  
   time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 6,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
   },
   modalDelete: {
     background: '#ffffff',
@@ -286,8 +233,8 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
   return (
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#ced8d7':"#deffa9",pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#26afee"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
@@ -295,11 +242,9 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
           <CopyToClipboard onCopy={() => copied('Message')} text={`Message: ${message} , Caption: ${caption}`}>
             <ContentCopyIcon className={classes.folderIcon} fontSize='large'/>
           </CopyToClipboard>
-          <div className={selected?classes.messageActive:classes.message}>
-            <ListItemText primary='Message' primaryTypographyProps={{color: "#42aee0"}}
-              secondary={message} secondaryTypographyProps={{ color: "#0e0d0d" }} />
-              {caption&&<ListItemText  primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
-               secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}
+          <div className={classes.wrapperInnerMessage}>
+            <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+            <ListItemText primary={caption} primaryTypographyProps={{color: "#000000"}}/>
           </div>
         </div>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>

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

@@ -65,36 +65,30 @@ const useStyles = makeStyles({
     flexDirection:'column',
     borderRadius: 7,
     position: 'relative',
-    marginBottom: 5,
+
     padding:'10px 22px 10px 0px'
   },
   wrapper: {
     position: 'relative',
     display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
     width: 400,
-    padding: '12px 5px 18px 5px',
-    backgroundColor: '#deffa9',
+    padding: 5,
     borderRadius: 7,
   },
   wrapperInner: {
-    position:'relative',
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
     width: '100%',
   },  
   time: {
-      position: "absolute",
-      fontSize: ".65em",
-      fontWeight:600,
-      bottom: 0,
-      right: 6,
-      color: '#414141',
-      padding: 3,
-      borderRadius: 5,
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+    marginLeft:'auto',
   },
   player: {
     backgroundColor: '#deffa9',
@@ -241,8 +235,8 @@ const MessageRightVideo = ({ url,name,lastName,createdAt,fullType,caption,emoji,
   return (
     <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
-       style={{backgroundColor:selected?'#ced8d7':undefined,pointerEvents:isSomeSelected?'none':'auto'}}>
-        <Typography style={{color: "#42aee0"}} variant="h6" align="right">
+       style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#26afee"}} variant="h6" align="right">
           {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
         </Typography>
@@ -251,8 +245,7 @@ const MessageRightVideo = ({ url,name,lastName,createdAt,fullType,caption,emoji,
             className={classes.folderIcon} fontSize='large' />
           <Player className={selected?classes.playerActive:classes.player}  playsInline  src={url}/>
         </div>
-        {caption&&<ListItemText style={{wordBreak:'break-word'}}  primary='Caption' primaryTypographyProps={{color: "#42aee0"}}
-          secondary={caption} secondaryTypographyProps={{ color: "#0e0d0d" }}/>}
+        <ListItemText style={{wordBreak:'break-word'}}  primary={caption} primaryTypographyProps={{color: "#000000"}}/>
         <div className={classes.time}>{timeStampMessage(createdAt)}</div>
         {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
         {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}

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

@@ -4,7 +4,6 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "center",
-    marginBottom:5
   },
   wrapper: {
     textAlign: 'center',