fixed media item in few lists

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

@@ -14,10 +14,15 @@ import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Avatar from '@mui/material/Avatar';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import CloseIcon from '@mui/icons-material/Close';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr } from '../../../../../../helpers'
+import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -195,7 +200,7 @@ const useStyles = makeStyles({
     top: 0,
     left: 0,
     width: '100vw',
-    height: '100vh',
+    minHeight: '100vh',
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
@@ -205,17 +210,42 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center'
   },
-  wrapperOverlayImg: {
-    width: '30%',
-    maxHeight: '80%',
-    position: 'relative',
+  topBar: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    height: '7vh',
+    width: '100vw',
     display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: 'rgba(65, 65, 65, 0.9)',
+    zIndex: 10,
+    padding: '0px 20px'
   },
-  overlayDownloadIcon: {
-    position: 'absolute',
-    content: '',
-    right: 0,
-    top: -40,
+  wrapperCredentials: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+  },    
+  wrapperIcons: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+  },  
+  magnifying : {
+    marginLeft:5,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'scale(1.1)'
+    }
+  }, 
+  downloadIcon: {
+    marginLeft:5,
     cursor: 'pointer',
     color: '#e9e7e7',
     padding: 0,
@@ -225,16 +255,25 @@ const useStyles = makeStyles({
       color: '#b8b7b7',
     }
   },
-  overlayTime: {
-    position: 'absolute',
-    content: '',    
-    color: '#ffffff',
-    top: -30,
-    left: 0,
-    borderRadius: 10,
-    padding:'2px 6px 2px 6px',
-    backgroundColor:'#707070'
+  iconCloseOverlay: {
+    marginLeft:5,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
   },  
+  wrapperImage: {
+    display: 'flex',
+    overflow: 'auto',
+    maxWidth: '70%',
+    maxHeight:'80%',
+    height: 'auto',
+    borderRadius:5,
+  }, 
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -299,7 +338,7 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  }, 
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -316,19 +355,32 @@ interface IMessagesLeftImage {
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
-  _id:string
+  _id: string,
+  name: string,
+  lastName: string,
 }
 
-const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+   const [scale, setScale] = useState<number>(1)
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
+  const handleIncreaseScale = () => {
+    if(scale < 5) return setScale(scale+0.5)
+  }
+  const handleDecreaseScale = () => {
+    if(scale > 1) return setScale(scale-0.5)
+  }   
   const handleOpenWatch = () => !watch&&setWatch(true)
-  const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
+  const handleCloseWatch = (e: any) => {
+    const id = e.target.id
+    if(id === 'overlay') setWatch(false)
+    if(id === 'close') setWatch(false)
+  }
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
     if (type === 'delete') setModal(true)
@@ -358,12 +410,34 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
   
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
-      <div className={classes.wrapperOverlayImg}>
-        <span className={classes.overlayTime}>{timeStampEU(createdAt)}</span>
-        <DownloadForOfflineIcon className={classes.overlayDownloadIcon} fontSize='large'
-         onClick={() => handleDownload(url, fullType)}/>
-        <img width='100%' height='auto' alt='imageItem' src={url} />
-       </div>
+      <div className={classes.topBar}>
+        <div className={classes.wrapperCredentials}>
+          <ListItemIcon >
+            <Avatar alt={name} src={url?url:undefined}
+              sx={{ background: color, width: 44, height: 44 }}>
+              {!url&&`${firstLetter(name)}${firstLetter(lastName)}`}
+            </Avatar>
+          </ListItemIcon> 
+          <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+            primaryTypographyProps={{ color: '#ffffff' }}
+            secondary={timeStampEU(createdAt)} secondaryTypographyProps={{ color: '#ffffff' }} />
+        </div>
+        <div className={classes.wrapperIcons}>
+          <ZoomOutIcon onClick={handleDecreaseScale}
+            className={classes.magnifying} fontSize='large' />
+          <ZoomInIcon onClick={handleIncreaseScale}
+            className={classes.magnifying} fontSize='large' />
+          <DownloadForOfflineIcon onClick={() => handleDownload(url, fullType)}
+            className={classes.downloadIcon} fontSize='large' />
+          <CloseIcon id='close' onClick={handleCloseWatch}
+            className={classes.iconCloseOverlay} fontSize='large' />
+        </div>        
+      </div>
+      <div className={classes.wrapperImage}>
+         <img style={{ transform: `scale(${scale})`, cursor: scale > 1 ? 'grab' : 'auto' }}
+            width='100%' height='auto' alt='imageItem' src={url} />
+      </div>
     </div>  :
     <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
       {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}

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

@@ -14,10 +14,15 @@ import Divider from '@mui/material/Divider';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Avatar from '@mui/material/Avatar';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import CloseIcon from '@mui/icons-material/Close';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
-import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr } from '../../../../../../helpers'
+import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord } from '../../../../../../helpers'
 
 const StyledMenu = styled((props:any) => (
   <Menu
@@ -195,7 +200,7 @@ const useStyles = makeStyles({
     top: 0,
     left: 0,
     width: '100vw',
-    height: '100vh',
+    minHeight: '100vh',
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
@@ -205,17 +210,42 @@ const useStyles = makeStyles({
     alignContent: 'center',
     alignItems: 'center'
   },
-  wrapperOverlayImg: {
-    width: '30%',
-    maxHeight: '80%',
-    position: 'relative',
+  topBar: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    height: '7vh',
+    width: '100vw',
     display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: 'rgba(65, 65, 65, 0.9)',
+    zIndex: 10,
+    padding: '0px 20px'
   },
-  overlayDownloadIcon: {
-    position: 'absolute',
-    content: '',
-    right: 0,
-    top: -40,
+  wrapperCredentials: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+  },    
+  wrapperIcons: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+  },  
+  magnifying : {
+    marginLeft:5,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'scale(1.1)'
+    }
+  }, 
+  downloadIcon: {
+    marginLeft:5,
     cursor: 'pointer',
     color: '#e9e7e7',
     padding: 0,
@@ -225,16 +255,25 @@ const useStyles = makeStyles({
       color: '#b8b7b7',
     }
   },
-  overlayTime: {
-    position: 'absolute',
-    content: '',    
-    color: '#ffffff',
-    top: -30,
-    left: 0,
-    borderRadius: 10,
-    padding:'2px 6px 2px 6px',
-    backgroundColor:'#707070'
-  },  
+  iconCloseOverlay: {
+    marginLeft:5,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  wrapperImage: {
+    display: 'flex',
+    overflow: 'auto',
+    maxWidth: '70%',
+    maxHeight:'80%',
+    height: 'auto',
+    borderRadius:5,
+  },    
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -299,7 +338,7 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  },
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -316,19 +355,32 @@ interface IMessageRightImage {
   isSomeSelected: boolean,
   isSelected:(_id:string) => boolean,
   handleSelected: (_id:string) => void,  
-  _id:string
+  _id: string,
+  name: string,
+  lastName: string,
 }
 
-const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id}:IMessageRightImage) => {
+const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [modal,setModal] = useState<boolean>(false)
+  const [modal, setModal] = useState<boolean>(false)
+  const [scale, setScale] = useState<number>(1)
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
+  const handleIncreaseScale = () => {
+    if(scale < 5) return setScale(scale+0.5)
+  }
+  const handleDecreaseScale = () => {
+    if(scale > 1) return setScale(scale-0.5)
+  }  
   const handleOpenWatch = () => !watch&&setWatch(true)
-  const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
+    const handleCloseWatch = (e: any) => {
+    const id = e.target.id
+    if(id === 'overlay') setWatch(false)
+    if(id === 'close') setWatch(false)
+  }
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
     if (type === 'delete') setModal(true)
@@ -358,12 +410,34 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
 
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
-      <div className={classes.wrapperOverlayImg}>
-        <span className={classes.overlayTime}>{timeStampEU(createdAt)}</span>
-        <DownloadForOfflineIcon className={classes.overlayDownloadIcon} fontSize='large'
-         onClick={() => handleDownload(url, fullType)}/>
-        <img width='100%' height='auto' alt='imageItem' src={url} />
-       </div>
+      <div className={classes.topBar}>
+        <div className={classes.wrapperCredentials}>
+          <ListItemIcon >
+            <Avatar alt={name} src={url?url:undefined}
+              sx={{ background: color, width: 44, height: 44 }}>
+              {!url&&`${firstLetter(name)}${firstLetter(lastName)}`}
+            </Avatar>
+          </ListItemIcon> 
+          <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+            primaryTypographyProps={{ color: '#ffffff' }}
+            secondary={timeStampEU(createdAt)} secondaryTypographyProps={{ color: '#ffffff' }} />
+        </div>
+        <div className={classes.wrapperIcons}>
+          <ZoomOutIcon onClick={handleDecreaseScale}
+            className={classes.magnifying} fontSize='large' />
+          <ZoomInIcon onClick={handleIncreaseScale}
+            className={classes.magnifying} fontSize='large' />
+          <DownloadForOfflineIcon onClick={() => handleDownload(url, fullType)}
+            className={classes.downloadIcon} fontSize='large' />
+          <CloseIcon id='close' onClick={handleCloseWatch}
+            className={classes.iconCloseOverlay} fontSize='large' />
+        </div>        
+      </div>
+      <div className={classes.wrapperImage}>
+        <img style={{ transform: `scale(${scale})`, cursor: scale > 1 ? 'grab' : 'auto' }}
+          width='100%' height='auto' alt='imageItem' src={url} />
+      </div>
     </div>  :
     <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>
       <div onContextMenu={(e) => handleContextMenu(e)}

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

@@ -205,6 +205,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 isSelected={isSelected}
                 handleSelected={handleSelected}                
                 _id={_id}
+                name={name}
+                lastName={lastName}                
                   /></div>)
             if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
@@ -283,6 +285,8 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 isSelected={isSelected}
                 handleSelected={handleSelected}
                 _id={_id}
+                name={name}
+                lastName={lastName}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt} id={_id} style={{borderRadius: 7}}>
               {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}

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

@@ -138,8 +138,7 @@ const PinnedBar = ({chatDivRef,handleOpenPinned}:IPinnedBar) => {
   return openedPin ?
     <Stack className={classes.container} direction="row">
       <ul className={classes.listWrapperDashes}>
-        {pinnedMessagesMemo.length > 1 &&
-          pinnedMessagesMemo.map(({ _id }) =>
+        {pinnedMessagesMemo.map(({ _id }) =>
           <li key={_id} style={{backgroundColor:openedPin._id === _id? "#00aeff":"#addbf0",
             height: `${heightOfDash}%`}}></li>)}
       </ul>      

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

@@ -153,7 +153,7 @@ const useStyles = makeStyles({
   },
   pinnedIcon: {
     transform: 'rotate(45deg)',
-    color: '#a7aaa7',
+    color: '#959595',
   },
   listIconsRightContainer: {
     marginLeft: 'auto',

src/components/HomePage/LeftBar/ContactsList/ContactItem/index.tsx

@@ -98,7 +98,7 @@ const useStyles = makeStyles({
   pinnedIcon: {
     marginLeft: 'auto',
     transform: 'rotate(45deg)',
-    color: '#a7aaa7',
+    color: '#959595',
   },  
 })
 interface IContactItem {

src/components/HomePage/RightBar/CredentialsList/ProfileLists/MediaList/MediaListItem/index.tsx

@@ -1,9 +1,15 @@
 
 import { makeStyles } from '@material-ui/core'
 import { useState } from 'react';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Avatar from '@mui/material/Avatar';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import CloseIcon from '@mui/icons-material/Close';
 import ImageListItem from '@mui/material/ImageListItem';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import { handleDownload,timeStampEU,prodAwsS3 } from '../../../../../../../helpers'
+import { handleDownload, timeStampEU, prodAwsS3, firstLetter, slicedWord } from '../../../../../../../helpers'
 
 const useStyles = makeStyles({ 
   overlay: {
@@ -11,27 +17,52 @@ const useStyles = makeStyles({
     top: 0,
     left: 0,
     width: '100vw',
-    height: '100vh',
+    minHeight: '100vh',
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
-    overflowY: 'hidden',
     boxSizing: 'border-box',
     display: 'flex',
     justifyContent: 'center',
     alignContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    overflowY: 'hidden',
   },
-  wrapper: {
-    width: '30%',
-    maxHeight: '80%',
-    position: 'relative',
+  topBar: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    height: '7vh',
+    width: '100vw',
     display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: 'rgba(65, 65, 65, 0.9)',
+    zIndex: 10,
+    padding: '0px 20px'
   },
+  wrapperCredentials: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+  },    
+  wrapperIcons: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+  },  
+  magnifying : {
+    marginLeft:5,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'scale(1.1)'
+    }
+  }, 
   downloadIcon: {
-    position: 'absolute',
-    content: '',
-    right: 0,
-    top: -40,
+    marginLeft:5,
     cursor: 'pointer',
     color: '#e9e7e7',
     padding: 0,
@@ -41,22 +72,31 @@ const useStyles = makeStyles({
       color: '#b8b7b7',
     }
   },
+  iconClose: {
+    marginLeft:5,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },  
+  wrapperImage: {
+    display: 'flex',
+    overflow: 'auto',
+    maxWidth: '70%',
+    maxHeight:'80%',
+    height: 'auto',
+    borderRadius:5,
+  },   
   img: {
     cursor:'pointer',
     '&:hover': {
       scale:0.98
     }
   },
-  time: {
-    position: 'absolute',
-    content: '',    
-    color: '#ffffff',
-    top: -30,
-    left: 0,
-    borderRadius: 10,
-    padding:'2px 6px 2px 6px',
-    backgroundColor:'#707070'
-  }
 });
 
 interface IMediaListItem {
@@ -65,27 +105,65 @@ interface IMediaListItem {
   updatedAt: string,
   handleScrollToTheMessage: (_id: string) => void,
   id: string,
+  name: string,
+  lastName: string,
+  avatarUrl: string,
+  color: string,
 }
 
-const MediaListItem = ({ message,fullType,updatedAt,handleScrollToTheMessage,id }:IMediaListItem) => {
+const MediaListItem = ({ message, fullType, updatedAt, handleScrollToTheMessage,
+  id, name, lastName, avatarUrl,color }: IMediaListItem) => {
   const classes = useStyles();
+  const url = `${prodAwsS3}/${message}`
   const [watch, setWatch] = useState<boolean>(false)
+  const [scale, setScale] = useState<number>(1)
+  const handleIncreaseScale = () => {
+    if(scale < 5) return setScale(scale+0.5)
+  }
+  const handleDecreaseScale = () => {
+    if(scale > 1) return setScale(scale-0.5)
+  }
   const handleOpenWatch = () => !watch && setWatch(true)
-  const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
-  
-  const url = `${prodAwsS3}/${message}`
+  const handleCloseWatch = (e: any) => {
+    const id = e.target.id
+    if(id === 'overlay') setWatch(false)
+    if(id === 'close') setWatch(false)
+  }
+
   
-  return (watch ?
-    <div onClick={(e) => {
+  return (watch?
+    <div id='overlay' onClick={(e) => {
       handleCloseWatch(e)
       handleScrollToTheMessage(id)
-    }} id='overlay' className={classes.overlay}>
-      <div className={classes.wrapper}>
-        <span className={classes.time}>{timeStampEU(updatedAt)}</span>
-        <DownloadForOfflineIcon className={classes.downloadIcon} fontSize='large'
-         onClick={() => handleDownload(url, fullType)}/>
-        <img width='100%' height='auto' alt='imageItem' src={url} />
-       </div>
+    }} className={classes.overlay}>
+      <div className={classes.topBar}>
+        <div className={classes.wrapperCredentials}>
+          <ListItemIcon >
+            <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 44, height: 44 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+            </Avatar>
+          </ListItemIcon> 
+          <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+            primaryTypographyProps={{ color: '#ffffff' }}
+            secondary={timeStampEU(updatedAt)} secondaryTypographyProps={{ color: '#ffffff' }} />
+        </div>
+        <div className={classes.wrapperIcons}>
+          <ZoomOutIcon onClick={handleDecreaseScale}
+            className={classes.magnifying} fontSize='large' />
+          <ZoomInIcon onClick={handleIncreaseScale}
+            className={classes.magnifying} fontSize='large' />
+          <DownloadForOfflineIcon onClick={() => handleDownload(url, fullType)}
+            className={classes.downloadIcon} fontSize='large' />
+          <CloseIcon id='close' onClick={handleCloseWatch}
+            className={classes.iconClose} fontSize='large' />
+        </div>        
+      </div>
+      <div className={classes.wrapperImage}>
+        <img style={{ transform: `scale(${scale})`, cursor: scale > 1 ? 'grab' : 'auto' }}
+          width='100%' height='auto' alt='imageItem' src={url} />
+      </div>
     </div> :
     <ImageListItem>
       <img onClick={handleOpenWatch} className={classes.img}

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

@@ -14,9 +14,10 @@ const MediaList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IM
   
   return filteredAndSorted.length > 0 ?(
       <ImageList sx={{ width: '100%', height: 'auto',overflow:'hidden' }} cols={3} rowHeight={164}>
-        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id}) => 
+        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id,name,lastName,avatarUrl,color}) => 
           <MediaListItem key={createdAt} message={message} fullType={fullType}
-            updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id} />)}
+            updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id}
+            name={name} lastName={lastName} avatarUrl={avatarUrl} color={color}/>)}
       </ImageList>
    ): <AlertInfo name={`You do not have ${openPinned&&'Pinned'} Media yet!`}/>  
 }