make visual fix with caption and select

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

@@ -60,9 +60,14 @@ const StyledMenu = styled((props:any) => (
 const useStyles = makeStyles({
   container: {
     display: "flex",
-    justifyContent: "flex-start",
+    alignItems: 'flex-start',
+    alignContent: 'flex-start',
+    flexDirection:'column',
     borderRadius: 7,
-  },
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 0px 10px 22px'
+  }, 
   wrapper: {
     position: 'relative',
     display: 'flex',
@@ -152,14 +157,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#414141',
-      maxWidth:'80%',
+      maxWidth: 410,
       fontWeight:600,
-      bottom: -27,
-      left: 12,
       borderRadius: 5,
+      marginLeft:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -173,7 +177,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #deffa9",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: '0px',
+        bottom: "0px",
         left: "-15px"
       },
       "&:before": {
@@ -184,7 +188,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #deffa9",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         left: "-17px"
       }      
   },  
@@ -215,14 +219,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       right: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       right: -40,
   },  
   emoji: {
@@ -252,7 +256,13 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    left: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -309,8 +319,7 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
   } 
 
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
+    <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{ pointerEvents: isSomeSelected ? 'none' : 'auto' }}>
@@ -324,7 +333,8 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
         anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -384,6 +394,7 @@ const MessageLeftAudio = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
         </div>  
       </div>}         
       </div>
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>    
 )};
 

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

@@ -62,9 +62,13 @@ const StyledMenu = styled((props:any) => (
 const useStyles = makeStyles({
   container: {
     display: "flex",
-    justifyContent: "flex-start",
+    alignItems: 'flex-start',
+    alignContent: 'flex-start',
+    flexDirection:'column',
     borderRadius: 7,
-  },
+    marginBottom: 5,
+    padding:'10px 0px 10px 22px'
+  }, 
   wrapper: {
     position: 'relative',
     display: 'flex',
@@ -160,14 +164,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#414141',
-      maxWidth:'76%',
+      maxWidth: 230,
       fontWeight:600,
-      bottom: -28,
-      left: 12,
       borderRadius: 5,
+      marginLeft:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -181,7 +184,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #deffa9",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: '0px',
+        bottom: "0px",
         left: "-15px"
       },
       "&:before": {
@@ -192,7 +195,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #deffa9",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         left: "-17px"
       }      
   }, 
@@ -268,14 +271,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       right: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       right: -40,
   },  
   emoji: {
@@ -305,7 +308,13 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    left: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -386,8 +395,7 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
   }   
 
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 43 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
+    <div className={classes.container}>
       {read && <div className={classes.wrapperIcons}>
         <ZoomOutIcon onClick={handleDecreaseScale} className={classes.magnifying} fontSize='large' />
         <ZoomInIcon onClick={handleIncreaseScale} className={classes.magnifying} fontSize='large' />
@@ -417,7 +425,8 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -477,6 +486,7 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
         </div>  
       </div>}         
       </div>
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>        
 )};
 

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

@@ -64,8 +64,13 @@ const StyledMenu = styled((props:any) => (
 const useStyles = makeStyles({
   container: {
     display: "flex",
-    justifyContent: "flex-start",
+    alignItems: 'flex-start',
+    alignContent: 'flex-start',
+    flexDirection:'column',
     borderRadius: 7,
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 0px 10px 22px'
   },
   wrapper: {
     width: 400,
@@ -150,14 +155,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#414141',
-      maxWidth:'76%',
+      maxWidth: 430,
       fontWeight:600,
-      bottom: -25,
-      left: 12,
       borderRadius: 5,
+      marginLeft:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -171,7 +175,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #deffa9",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: '0px',
+        bottom: "0px",
         left: "-15px"
       },
       "&:before": {
@@ -182,7 +186,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #deffa9",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         left: "-17px"
       }      
   },     
@@ -304,14 +308,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       right: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       right: -40,
   },  
   emoji: {
@@ -341,7 +345,13 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  }, 
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    left: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -456,8 +466,7 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
           width='100%' height='auto' alt='imageItem' src={url} />
       </div>
     </div>  :
-    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
+    <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -470,7 +479,8 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -530,6 +540,7 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         </div>  
       </div>}        
       </div>
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>)
 };
 

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

@@ -58,11 +58,16 @@ const StyledMenu = styled((props:any) => (
 }));
 
 const useStyles = makeStyles({
-    container: {
-      display: "flex",
-      justifyContent: "flex-start",
-      borderRadius: 7,
-    },
+  container: {
+    display: "flex",
+    alignItems: 'flex-start',
+    alignContent: 'flex-start',
+    flexDirection:'column',
+    borderRadius: 7,
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 0px 10px 22px'
+  }, 
   wrapper: {
     position: 'relative',
     display: 'flex',
@@ -150,14 +155,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#414141',
-      maxWidth:'80%',
+      maxWidth: 474,
       fontWeight:600,
-      bottom: -30,
-      left: 6,
       borderRadius: 5,
+      marginLeft:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -171,7 +175,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #deffa9",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: '0px',
+        bottom: "0px",
         left: "-15px"
       },
       "&:before": {
@@ -213,14 +217,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       right: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       right: -40,
   },  
   emoji: {
@@ -270,12 +274,18 @@ const useStyles = makeStyles({
     flexWrap: 'nowrap',
     alignContent: 'center',
     alignItems: 'center',
-  },  
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    left: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
-interface IMessageReplyLeft {
+interface IMessageLeftReply {
   url:string,
   replyMessage: string,
   message:string,
@@ -297,7 +307,7 @@ interface IMessageReplyLeft {
   oldId: string
 }
 
-const MessageReplyLeft = ({url,replyMessage,message,replyName,replyLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,fullType,handleScrollToTheMessage,oldId}:IMessageReplyLeft) => {
+const MessageLeftReply = ({url,replyMessage,message,replyName,replyLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,fullType,handleScrollToTheMessage,oldId}:IMessageLeftReply) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -338,8 +348,7 @@ const MessageReplyLeft = ({url,replyMessage,message,replyName,replyLastName,crea
   }  
   
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 45 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
+    <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'}}>
@@ -366,12 +375,13 @@ const MessageReplyLeft = ({url,replyMessage,message,replyName,replyLastName,crea
           </MenuItem>
         </ul>
         <ListItemText className={selected?classes.messageActive:classes.message}  
-          primary={slicedWord(message, 40, 0)}
-          primaryTypographyProps={{color: "#0e0d0d"}}/>        
+          primary={message}
+          primaryTypographyProps={{color: "#626262"}}/>        
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -431,7 +441,8 @@ const MessageReplyLeft = ({url,replyMessage,message,replyName,replyLastName,crea
         </div>  
       </div>}         
       </div>
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
   </div>    
 )};  
 
-export default MessageReplyLeft
+export default MessageLeftReply

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

@@ -54,11 +54,16 @@ const StyledMenu = styled((props:any) => (
 }));
 
 const useStyles = makeStyles({
-    container: {
-      display: "flex",
-      justifyContent: "flex-start",
-      borderRadius: 7,
-    },
+  container: {
+    display: "flex",
+    alignItems: 'flex-start',
+    alignContent: 'flex-start',
+    flexDirection:'column',
+    borderRadius: 7,
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 0px 10px 22px'
+  }, 
     wrapper: {
       position: 'relative',
       display: 'flex',
@@ -145,14 +150,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#414141',
-      maxWidth:'80%',
+      maxWidth: 474,
       fontWeight:600,
-      bottom: -30,
-      left: 6,
       borderRadius: 5,
+      marginLeft:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -166,7 +170,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #deffa9",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: '0px',
+        bottom: "0px",
         left: "-15px"
       },
       "&:before": {
@@ -208,14 +212,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       right: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       right: -40,
   },  
   emoji: {
@@ -245,7 +249,13 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    left: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -303,8 +313,7 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
   } 
   
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 45 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
+    <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'}}>
@@ -320,7 +329,8 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -380,6 +390,7 @@ const MessageLeftText = ({message,name,lastName,createdAt,caption,emoji,emojiCom
         </div>  
       </div>}         
       </div>
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
   </div>    
 )};  
 

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

@@ -59,9 +59,14 @@ const StyledMenu = styled((props:any) => (
 const useStyles = makeStyles({
   container: {
     display: "flex",
-    justifyContent: "flex-start",
+    alignItems: 'flex-start',
+    alignContent: 'flex-start',
+    flexDirection:'column',
     borderRadius: 7,
-  },
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 0px 10px 22px'
+  }, 
   wrapper: {
     position: 'relative',
     display: 'flex',
@@ -150,14 +155,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#414141',
-      maxWidth:'76%',
+      maxWidth: 430,
       fontWeight:600,
-      bottom: -25,
-      left: 12,
       borderRadius: 5,
+      marginLeft:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -171,7 +175,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #deffa9",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: '0px',
+        bottom: "0px",
         left: "-15px"
       },
       "&:before": {
@@ -182,7 +186,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #deffa9",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         left: "-17px"
       }      
   },  
@@ -219,14 +223,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       right: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       right: -40,
   },  
   emoji: {
@@ -256,7 +260,13 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    left: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -312,8 +322,7 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
   } 
 
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
+    <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -325,7 +334,8 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -385,6 +395,7 @@ const MessageLeftVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion,
         </div>  
       </div>}         
       </div>
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>    
 )};
 

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

@@ -59,8 +59,13 @@ const StyledMenu = styled((props:any) => (
 const useStyles = makeStyles({
   container: {
     display: "flex",
-    justifyContent: "flex-end",
+    alignItems: 'flex-end',
+    alignContent: 'flex-end',
+    flexDirection:'column',
     borderRadius: 7,
+    position: 'relative',
+    marginBottom: 5,
+    padding: '10px 22px 10px 0px',
   },
   wrapper: {
     position: 'relative',
@@ -151,14 +156,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#414141',
-      maxWidth:'80%',
+      maxWidth: 410,
       fontWeight:600,
-      bottom: -27,
-      right: 40,
       borderRadius: 5,
+      marginRight:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -172,7 +176,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #ffffff",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: "0",
+        bottom: "0px",
         right: "-15px"
       },
       "&:before": {
@@ -183,7 +187,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         right: "-17px"
       }     
   },  
@@ -214,14 +218,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       left: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       left: -40,
   },   
   emoji: {
@@ -251,7 +255,13 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    right: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -307,7 +317,7 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
   } 
 
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
+    <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -322,7 +332,8 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -382,7 +393,7 @@ const MessageRightAudio = ({ url,createdAt,fullType,caption,_id,emoji,emojiCompa
         </div>  
       </div>}          
       </div>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>    
 )};
 

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

@@ -62,8 +62,12 @@ const StyledMenu = styled((props:any) => (
 const useStyles = makeStyles({
   container: {
     display: "flex",
-    justifyContent: "flex-end",
+    alignItems: 'flex-end',
+    alignContent: 'flex-end',
+    flexDirection:'column',
     borderRadius: 7,
+    marginBottom: 5,
+    padding:'10px 22px 10px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -160,14 +164,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#626262',
-      maxWidth:'76%',
+      maxWidth: 230,
       fontWeight:600,
-      bottom: -28,
-      right: 40,
       borderRadius: 5,
+      marginRight:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -181,7 +184,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #ffffff",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: "0",
+        bottom: "0px",
         right: "-15px"
       },
       "&:before": {
@@ -192,7 +195,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         right: "-17px"
       }     
   },  
@@ -268,14 +271,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       left: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       left: -40,
   },   
   emoji: {
@@ -305,7 +308,13 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  }, 
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    right: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -386,7 +395,7 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
   } 
 
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 43 : 15 }}>
+    <div className={classes.container}>
       {read && <div className={classes.wrapperIcons}>
         <ZoomOutIcon onClick={handleDecreaseScale} className={classes.magnifying} fontSize='large' />
         <ZoomInIcon onClick={handleIncreaseScale} className={classes.magnifying} fontSize='large' />
@@ -416,7 +425,8 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -475,8 +485,8 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
           </Button>
         </div>  
       </div>}         
-     </div>
-     {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}      
+      </div>
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>    
 )};
 

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

@@ -64,8 +64,13 @@ const StyledMenu = styled((props:any) => (
 const useStyles = makeStyles({
   container: {
     display: "flex",
-    justifyContent: "flex-end",
+    alignItems: 'flex-end',
+    alignContent: 'flex-end',
+    flexDirection:'column',
     borderRadius: 7,
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 22px 10px 0px'
   },
   wrapper: {
     width: 400,
@@ -150,14 +155,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#626262',
-      maxWidth:'76%',
+      maxWidth: 430,
       fontWeight:600,
-      bottom: -25,
-      right: 40,
       borderRadius: 5,
+      marginRight:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -171,7 +175,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #ffffff",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: "0",
+        bottom: "0px",
         right: "-15px"
       },
       "&:before": {
@@ -182,7 +186,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         right: "-17px"
       }     
   },   
@@ -304,14 +308,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       left: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       left: -40,
   },   
   emoji: {
@@ -342,6 +346,12 @@ const useStyles = makeStyles({
       transition: 'all 250ms ease-out ',
     }
   },
+  checkboxSelect: {
+    position: 'absolute',
+    right: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -394,6 +404,7 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
     const id = e.target.id
     if (id === 'overlay' || id === 'close') {
       setWatch(false)
+      refView.current.style.transform = 'scale(1)'
       setScale(1)
     }
   }  
@@ -455,7 +466,7 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
           width='100%' height='auto' alt='imageItem' src={url} />
       </div>
     </div>  :
-    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
+    <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -468,7 +479,8 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -528,7 +540,7 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
         </div>  
       </div>}         
       </div>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>   
 )};
 

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

@@ -60,8 +60,13 @@ const StyledMenu = styled((props:any) => (
 const useStyles = makeStyles({
   container: {
     display: "flex",
-    justifyContent: "flex-end",
+    alignItems: 'flex-end',
+    alignContent: 'flex-end',
+    flexDirection:'column',
     borderRadius: 7,
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 22px 10px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -142,14 +147,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#626262',
-      maxWidth:'76%',
+      maxWidth: 474,
       fontWeight:600,
-      bottom: -30,
-      right: 40,
       borderRadius: 5,
+      marginRight:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -163,7 +167,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #ffffff",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: "0",
+        bottom: "0px",
         right: "-15px"
       },
       "&:before": {
@@ -205,14 +209,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       left: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       left: -40,
   },   
   emoji: {
@@ -263,11 +267,17 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center',
   },
+  checkboxSelect: {
+    position: 'absolute',
+    right: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
-interface IMessageReplyRight {
+interface IMessageRightReply {
   url:string,
   replyMessage: string,
   message:string,
@@ -289,7 +299,7 @@ interface IMessageReplyRight {
   oldId: string
 }
 
-const MessageReplyRight = ({url,replyMessage,message,replyName,replyLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,fullType,handleScrollToTheMessage,oldId}:IMessageReplyRight) => {
+const MessageRightReply = ({url,replyMessage,message,replyName,replyLastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,fullType,handleScrollToTheMessage,oldId}:IMessageRightReply) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -329,7 +339,7 @@ const MessageReplyRight = ({url,replyMessage,message,replyName,replyLastName,cre
   }
 
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 45 : 15}}>
+    <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'}}>
@@ -356,12 +366,13 @@ const MessageReplyRight = ({url,replyMessage,message,replyName,replyLastName,cre
           </MenuItem>
         </ul>
         <ListItemText className={selected?classes.messageActive:classes.message}  
-          primary={slicedWord(message, 40, 0)}
-          primaryTypographyProps={{color: "#0e0d0d"}}/>         
+          primary={message}
+          primaryTypographyProps={{color: "#2f2f2f"}}/>         
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -421,8 +432,8 @@ const MessageReplyRight = ({url,replyMessage,message,replyName,replyLastName,cre
         </div>  
       </div>}        
       </div>
-   {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}      
+     {caption&&<div className={classes.captionWrapper}>{caption}</div>}     
    </div>    
 )};
 
-export  default  MessageReplyRight
+export  default  MessageRightReply

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

@@ -54,11 +54,16 @@ const StyledMenu = styled((props:any) => (
 }));
 
 const useStyles = makeStyles({
-    container: {
-      display: "flex",
-      justifyContent: "flex-end",
-      borderRadius: 7,
-    },
+  container: {
+    display: "flex",
+    alignItems: 'flex-end',
+    alignContent: 'flex-end',
+    flexDirection:'column',
+    borderRadius: 7,
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 22px 10px 0px'
+  },
     wrapper: {
       position: 'relative',
       display: 'flex',
@@ -145,14 +150,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#626262',
-      maxWidth:'76%',
+      maxWidth: 474,
       fontWeight:600,
-      bottom: -30,
-      right: 40,
       borderRadius: 5,
+      marginRight:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -166,7 +170,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #ffffff",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: "0",
+        bottom: "0px",
         right: "-15px"
       },
       "&:before": {
@@ -208,14 +212,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       left: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       left: -40,
   },   
   emoji: {
@@ -245,7 +249,13 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    right: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -302,7 +312,7 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
   }  
 
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 45 : 15}}>
+    <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'}}>
@@ -318,7 +328,8 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -378,7 +389,7 @@ const MessageRightText = ({message,name,lastName,createdAt,caption,emoji,emojiCo
         </div>  
       </div>}        
       </div>
-{isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}      
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
    </div>    
 )};
 

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

@@ -60,8 +60,13 @@ const StyledMenu = styled((props:any) => (
 const useStyles = makeStyles({
   container: {
     display: "flex",
-    justifyContent: "flex-end",
+    alignItems: 'flex-end',
+    alignContent: 'flex-end',
+    flexDirection:'column',
     borderRadius: 7,
+    position: 'relative',
+    marginBottom: 5,
+    padding:'10px 22px 10px 0px'
   },
   wrapper: {
     position: 'relative',
@@ -151,14 +156,13 @@ const useStyles = makeStyles({
       borderRadius: 5,
   },
   captionWrapper: {
-      position: "absolute",
+      position: 'relative',
       fontSize: ".85em",
       color: '#626262',
-      maxWidth:'76%',
+      maxWidth: 430,
       fontWeight:600,
-      bottom: -25,
-      right: 40,
       borderRadius: 5,
+      marginRight:10,
       wordBreak:'break-word',
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
@@ -172,7 +176,7 @@ const useStyles = makeStyles({
         borderBottom: "15px solid #ffffff",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: "0",
+        bottom: "0px",
         right: "-15px"
       },
       "&:before": {
@@ -183,7 +187,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         right: "-17px"
       }     
   },  
@@ -220,14 +224,14 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: 0,
+      bottom: '0.2rem',
       left: -40,
   },
   emojiCompanionTitle: {
       position: "absolute",
       fontSize: "1.7em",
       fontWeight:600,
-      bottom: '2rem',
+      bottom: '2.2rem',
       left: -40,
   },   
   emoji: {
@@ -257,7 +261,13 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    right: -80,
+    top: '50%',
+    pointerEvents: 'auto'
+  }
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -313,7 +323,7 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
   } 
  
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
+    <div className={classes.container}>
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}
         style={{pointerEvents:isSomeSelected?'none':'auto'}}>
@@ -325,7 +335,8 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
         <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>}
-        {caption&&<div className={classes.captionWrapper}>{slicedWord(caption, 20, 0)}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
       <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
           anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
@@ -385,7 +396,7 @@ const MessageRightVideo = ({ url,createdAt,fullType,caption,emoji,emojiCompanion
         </div>  
       </div>}          
       </div>
-      {isSomeSelected&&<Checkbox {...label} checked={checked} sx={{color:nightMode?'#ffffff':'#00ff48','&.Mui-checked': {color: nightMode?'#ffffff':'#00ff48'}}} onClick={() => handleSelected(_id)}/>}
+      {caption&&<div className={classes.captionWrapper}>{caption}</div>}
     </div>    
 )};
 

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

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

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

@@ -570,7 +570,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
                 <div onClick={handleCloseCaption} className={classes.overlay} id='overlay'
                   style={{ display: isOpenCaption ? 'block' : 'none' }}>
                    {isOpenCaptionEmoji && <div className={classes.emoji}
-                      style={{ left: rightIsOpen ? '32.5vw' : '45vw',bottom:'23vh' }}>
+                      style={{ left: rightIsOpen ? '32.5vw' : '45vw',bottom:isReply?'23vh':'16vh' }}>
                       <Picker onEmojiClick={(e,obj) => onEmojiClick(e,obj,'caption')} />
                    </div>}          
                    <TextField className={classes.captionTextField} onChange={handleTextareaCaption}

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

@@ -6,13 +6,13 @@ import ArrowBack from "./ArrowBack";
 import SendMessage from "./SendMessage";
 import UnpinBar from "./UnpinBar";
 import MessageLeftText from './Messages/MessageLeftText'
-import MessageReplyLeft from "./Messages/MessageReplyLeft";
+import MessageLeftReply from "./Messages/MessageLeftReply";
 import MessageLeftImage from './Messages/MessageLeftImage'
 import MessageLeftAudio from './Messages/MessageLeftAudio'
 import MessageLeftVideo from './Messages/MessageLeftVideo'
 import MessageLeftFile from "./Messages/MessageLeftFile";
 import MessageRightText from './Messages/MessageRightText'
-import MessageReplyRight from "./Messages/MessageReplyRight";
+import MessageRightReply from "./Messages/MessageRightReply";
 import MessageRightImage from './Messages/MessageRightImage'
 import MessageRightAudio from './Messages/MessageRightAudio'
 import MessageRightVideo from './Messages/MessageRightVideo'
@@ -224,7 +224,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                /></div>)
             if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}> 
               {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
-               <MessageReplyLeft
+               <MessageLeftReply
                 url={urlReply}
                 replyMessage={replyMessage}
                 message={message}
@@ -337,7 +337,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 /></div>)
             if (type === 'text' && oldId) return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
-              <MessageReplyRight
+              <MessageRightReply
                 url={urlReply}
                 replyMessage={replyMessage}
                 message={message}