fixed grids in all app

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

@@ -48,9 +48,13 @@ const DeleteModal = ({setModal,chat}:IDeleteModal) => {
 
   const handleDeleteModal = (e: any) => {
     const id = e.target.id
-    if (id === 'overlay' || id === 'cancel')  return setModal(false)
-    removeChatForBoth(companionId)
-  }  
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      removeChatForBoth(companionId)
+      setModal(false)
+    }
+  }
+  
   return (
     <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalDelete}>
@@ -64,7 +68,7 @@ const DeleteModal = ({setModal,chat}:IDeleteModal) => {
          <p style={{color: '#050505'}}>{`Are you sure you want to delete the
           chat with ${`${firstLetter(name)}${slicedWord(name, 15, 1)} 
             ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}</p>
-          <Button  variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
             DELETE CHAT
           </Button>         
           <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>

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

@@ -18,7 +18,7 @@ import { TChats } from '../../../../typescript/redux/chats/types';
 const useStyles = makeStyles({
   list: {
     width: '100%',
-    maxHeight: '92vh',
+    maxHeight: '93vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'

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

@@ -16,7 +16,7 @@ import { TContacts } from '../../../../typescript/redux/contacts/types';
 const useStyles = makeStyles({
   list: {
     width: '100%',
-    maxHeight: '92vh',
+    maxHeight: '93vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'

src/components/HomePage/LeftBar/EditBar/SubmitBtn/index.tsx

@@ -6,7 +6,7 @@ const useStyles = makeStyles({
   container: {
     position: 'absolute',
     content: '',
-    bottom: 20,
+    top: '92vh',
     right:20,
   },
   avatarArrow: {

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

@@ -60,7 +60,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 const useStyles = makeStyles({
   toolBar: {
     color: '#b1aeae',
-    height:'8vh'
+    height:'7vh'
   },
   iconBtn: {
     '&:hover': {

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

@@ -13,7 +13,7 @@ import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxHeight: '85vh',
+    maxHeight: '86vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'

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

@@ -15,7 +15,7 @@ const useStyles = makeStyles({
   },
   container: {
     width: '100%',
-    maxHeight: '85vh',
+    maxHeight: '86vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'

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

@@ -13,7 +13,7 @@ import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxHeight: '85vh',
+    maxHeight: '86vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'

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

@@ -8,7 +8,7 @@ import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxHeight: '85vh',
+    maxHeight: '86vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'

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

@@ -15,7 +15,7 @@ import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxHeight: '85vh',
+    maxHeight: '86vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'

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

@@ -13,7 +13,7 @@ import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxHeight: '85vh',
+    maxHeight: '86vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'

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

@@ -24,7 +24,7 @@ import { TChats } from '../../../../typescript/redux/chats/types';
 
 const useStyles = makeStyles({
   bottomNavigation: {
-    boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
+    borderBottom:'solid 2px #dddddd',
     height:'7vh'
  },
  icon: {

src/components/HomePage/LeftBar/SettingsBar/SettingsPicture/index.tsx

@@ -7,6 +7,7 @@ const useStyles = makeStyles({
   container: {
     width: '100%',
     backgroundColor: '#ffffff',
+    position:'relative',
   },
   imgContainer: {
     position:'relative',
@@ -29,7 +30,7 @@ const useStyles = makeStyles({
     fontSize: 24,
     zIndex:10,
     top: 395,
-    left:35
+    left:20
   },
   timeTile: {
     position:'absolute',
@@ -40,7 +41,7 @@ const useStyles = makeStyles({
     fontSize: 19,
     fontWeight:600,
     top: 430,
-    left:35
+    left:20
   },    
 })
 

src/components/HomePage/LeftBar/SettingsBar/ToolBar/index.tsx

@@ -8,6 +8,7 @@ import { makeStyles, Typography } from '@material-ui/core'
 const useStyles = makeStyles({
   container: {
     width: '100%',
+    height: '7vh',
     padding:10,
     display: 'flex',
     alignContent: 'center',

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

@@ -49,10 +49,9 @@ const useStyles = makeStyles({
     container: {
         position: 'absolute',
         maxWidth: '100%',
-        bottom: 20,
+        top: '92vh',
         right: 20,
         zIndex: 10,
-        visibility: 'visible',
         cursor:'pointer'
   },
 })

src/components/HomePage/LeftBar/index.tsx

@@ -67,7 +67,7 @@ const LeftBar = () => {
   }, [])
 
     return (
-      <Grid item lg={3} style={{position:'relative'}}
+      <Grid item lg={3} style={{ position: 'relative', backgroundColor:'#ffffff'}}
         onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
         {selectedIndex !== 2 && selectedIndex !== 4 &&
           <SearchBar handleClick={handleClick} handleFocus={handleFocus} sort={sort}

src/components/HomePage/RightBar/ChatBar/ArrowBack/index.tsx

@@ -0,0 +1,62 @@
+import { makeStyles } from "@material-ui/core/styles";
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import Avatar from '@mui/material/Avatar';
+
+const useStyles = makeStyles({   
+    avatarArrowWrapper: {
+        position:'absolute',
+        right: 20,
+        top: '70vh',
+        width: 56,
+        zIndex:200
+    },    
+    avatarArrow: {
+        cursor:'pointer',
+        '&:hover': {
+            backgroundColor: 'rgb(41, 139, 231)',
+            color: '#ffffff',
+        }
+    },
+    listSeenIcon: {
+        position: 'absolute',
+        top: -8,
+        left: 16,
+        borderRadius: '50%',
+        color: '#ffffff',
+        border: 'none',
+        height: 24,
+        width: 24,
+        textAlign: 'center',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignContent: 'center',
+        fontSize: 12,
+        zIndex: 10,
+        cursor:'pointer',
+    },      
+});
+
+interface IArrowBack {
+    isArrow: boolean,
+    isNew: {new:number,mute:boolean},
+    handleScrollTo:() => void
+}
+
+const ArrowBack = ({ isArrow, handleScrollTo, isNew }: IArrowBack) => {
+    const classes = useStyles()
+
+return (
+    <div className={classes.avatarArrowWrapper} style={{display: isArrow ? 'block' : 'none'}}>
+        <button onClick={handleScrollTo} style={{display: isNew.new ? 'block' : 'none',
+          background: isNew.mute ? '#a7aaa7' : '#0ac40a'}}
+          className={classes.listSeenIcon}>{isNew.new}</button>
+        <Avatar onClick={handleScrollTo} className={classes.avatarArrow}
+          sx={{backgroundColor: '#ffffff', width: 56, height: 56,color: '#6b6b6b'}}>
+          <ArrowDownwardIcon fontSize="medium" />  
+        </Avatar>                    
+    </div>          
+    )
+}
+
+export default ArrowBack

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

@@ -10,8 +10,6 @@ const useStyles = makeStyles({
   container: {
       display: "flex",
       justifyContent: "flex-start",
-      width:'auto',
-      maxWidth: '80%',
       marginBottom:15
   },
   wrapper: {

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

@@ -11,8 +11,6 @@ const useStyles = makeStyles({
   container: {
       display: "flex",
       justifyContent: "flex-start",
-      width:'auto',
-      maxWidth: '80%',
       marginBottom:15
   },
   wrapper: {

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

@@ -10,8 +10,6 @@ const useStyles = makeStyles({
     container: {
       display: "flex",
       justifyContent: "flex-start",
-      width:'auto',
-      maxWidth: '80%',
       marginBottom:15
   },
   wrapper: {

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

@@ -8,9 +8,7 @@ const useStyles = makeStyles({
     container: {
       display: "flex",
       justifyContent: "flex-start",
-      width:'auto',
-      maxWidth: '80%',
-      marginBottom:10
+      marginBottom:15
     },
     wrapper: {
       position: 'relative',

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

@@ -9,8 +9,6 @@ const useStyles = makeStyles({
   container: {
       display: "flex",
       justifyContent: "flex-start",
-      width:'auto',
-      maxWidth: '80%',
       marginBottom:15
   },
   wrapper: {

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

@@ -10,8 +10,6 @@ const useStyles = makeStyles({
   container: {
       display: "flex",
       justifyContent: "flex-end",
-      width:'auto',
-      maxWidth: '80%',
       marginBottom:15
   },
   wrapper: {

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

@@ -12,8 +12,6 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "flex-end",
-    width:'auto',
-    maxWidth: '80%',
     marginBottom:15
   },
   wrapper: {

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

@@ -11,8 +11,6 @@ const useStyles = makeStyles({
   container: {
     display: "flex",
     justifyContent: "flex-end",
-    width:'auto',
-    maxWidth: '80%',
     marginBottom:15
   },
   wrapper: {

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

@@ -8,9 +8,7 @@ const useStyles = makeStyles({
     container: {
       display: "flex",
       justifyContent: "flex-end",
-      width:'auto',
-      maxWidth: '80%',
-      marginBottom:10
+      marginBottom:15
     },
     wrapper: {
       position: 'relative',

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

@@ -10,8 +10,6 @@ const useStyles = makeStyles({
   container: {
       display: "flex",
       justifyContent: "flex-end",
-      width:'auto',
-      maxWidth: '80%',
       marginBottom:15
   },
   wrapper: {

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

@@ -4,9 +4,7 @@ const useStyles = makeStyles({
   container: {
       display: "flex",
       justifyContent: "center",
-      width:'auto',
-      maxWidth: '80%',
-      marginBottom:10
+      marginBottom:15
   },
   wrapper: {
     textAlign: 'center',

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

@@ -4,8 +4,6 @@ import MicNoneIcon from '@mui/icons-material/MicNone';
 import VideocamIcon from '@mui/icons-material/Videocam';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import Avatar from '@mui/material/Avatar';
 import CloseIcon from '@mui/icons-material/Close';
 import { useReactMediaRecorder } from "react-media-recorder";
 import { useState } from "react";
@@ -24,29 +22,18 @@ import { typingChat } from "../../../../../api-data";
 
 const useStyles = makeStyles({   
     container: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignContent: 'flex-end',
-        alignItems:'flex-end',
-        width: 700,
+        width: 634,
+        height:'6vh',
         position: 'fixed',
-        bottom: 20,
-        paddingTop:10,
-    },
-    inputContainer: {
-        position:'relative',
-        minWidth: 634,
-        maxWidth: 634,
-        maxHeight:56,
+        bottom: '2vh',
+        borderRadius: 8,
+        padding: 10,
         display: 'flex',
         flexWrap: 'nowrap',
         alignContent: 'center',
         alignItems: 'center',
         color: '#6b6b6b',
-        backgroundColor: '#ffffff',
-        borderRadius: 8,
-        padding: 10,
-        marginRight: 15,       
+        backgroundColor: '#ffffff',        
     },
     textarea: {
         minWidth: 550,
@@ -67,13 +54,21 @@ const useStyles = makeStyles({
     attachIcon: {
         transform:'rotate(30deg)',  
     },
+    borderTop: {
+        position: 'absolute',
+        left: 0,
+        top: '-2vh',
+        width: '100%',
+        height: 1,
+        background:'#ffffff',
+    },      
     filesMenu: {
       background: '#fdfdfd',
       position: 'absolute',
       width: 300,
       maxWidth: '100%',
       left: '61%',
-      bottom:90,
+      bottom:'10vh',
       zIndex: 10,
       visibility: 'visible',
       borderRadius: 10,
@@ -84,7 +79,8 @@ const useStyles = makeStyles({
       position: 'absolute',
       width: 350,
       height:350,
-      bottom:90,
+      left: '44%',
+      bottom:'10vh',
       zIndex: 10,
       visibility: 'visible',
       borderRadius: 10,
@@ -104,12 +100,6 @@ const useStyles = makeStyles({
             color: '#ffffff',
         }
     },    
-    avatar: {
-        '&:hover': {
-            backgroundColor: 'rgb(41, 139, 231)',
-            color: '#ffffff',
-        }
-    },
     avatarCamera: {
         position: 'absolute',
         left: -72,
@@ -123,38 +113,21 @@ const useStyles = makeStyles({
             border:'solid 14px rgb(41, 139, 231)',
             color: '#ffffff',
         }
-    },  
-    avatarArrowWrapper: {
-        position:'absolute',
-        right: -140,
-        bottom: 200,
-        width: 56,
-    },    
-    avatarArrow: {
-        cursor:'pointer',
-        '&:hover': {
-            backgroundColor: 'rgb(41, 139, 231)',
-            color: '#ffffff',
-        }
     },
-    listSeenIcon: {
+    avatarRight: {
         position: 'absolute',
-        top: -8,
-        left: 16,
-        borderRadius: '50%',
-        color: '#ffffff',
-        border: 'none',
-        height: 24,
-        width: 24,
-        textAlign: 'center',
+        right: -72,
+        bottom:-1,
         display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        alignContent: 'center',
-        fontSize: 12,
+        borderRadius: '50%',
         zIndex: 10,
-        cursor:'pointer',
-    },   
+        border: 'solid 14px #ffffff',
+        '&:hover': {
+            backgroundColor: 'rgb(41, 139, 231)',
+            border:'solid 14px rgb(41, 139, 231)',
+            color: '#ffffff'
+        }
+    },     
     overlay: {
       position: 'fixed',
       top: 0,
@@ -167,11 +140,10 @@ const useStyles = makeStyles({
 
 interface ISendMessage{
     isArrow: boolean,
-    isNew: {new:number,mute:boolean},
     handleScrollTo:() => void
 }
 
-const SendMessage = ({isArrow,isNew,handleScrollTo}:ISendMessage) => {
+const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
     const isOpen = useSelector(getIsOpen)
@@ -280,26 +252,34 @@ const SendMessage = ({isArrow,isNew,handleScrollTo}:ISendMessage) => {
         if (isFilming) return _stopRecording()
         _startRecording()
         setType('filming')
-        setIsFilming(true)
-        
+        setIsFilming(true) 
     }
 
     return (
-        <div className={classes.container} style={{borderTop:isArrow?'solid 1px #ffffff':'none'}} >            
-            <div className={classes.inputContainer}>
+        <div className={classes.container}>
+                {isArrow&&<div className={classes.borderTop}></div>}    
                 <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
                     sx={{width: 56, height: 56, display: file || value || status === 'stopped'
                     || _status === 'stopped' ? 'inline-block' : 'none'}} />
                 <VideocamIcon onClick={handleFilming} className={classes.avatarCamera}
                     sx={{backgroundColor: '#ffffff', color: '#7c7c7c', width: 56, height: 56}}
                     style={{display: status !== 'idle' || _status === 'stopped' || file || value ? 'none' : 'block',
-                    animation:isFilming ? 'ripple 1.2s infinite ease-in-out': 'none'}} />
+                        animation: isFilming ? 'ripple 1.2s infinite ease-in-out' : 'none'
+                    }} />
+                <SendIcon onClick={sentMessage} className={classes.avatarRight} 
+                    sx={{backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}
+                    style={{display: value || file || status === 'stopped'  || _status === 'stopped' ? 'block':'none' }}/>                
+                <MicNoneIcon onClick={handleRecording} className={classes.avatarRight} 
+                    sx={{backgroundColor: isRecording ? 'rgb(41, 139, 231)' : '#ffffff',
+                    color: isRecording ? '#ffffff' : '#6b6b6b', width: 56, height: 56}}
+                    style={{display: !value && !file && status !== 'stopped' && _status === 'idle' ? 'block' : 'none',
+                    animation:isRecording ? 'ripple 1.2s infinite ease-in-out': 'none'}}/>
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji}
                     fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                     '&:hover': { color: 'rgb(41, 139, 231)'}}}/>
                 <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                   style={{ display: isOpenEmoji ? 'block':'none'}}>
-                   <div className={classes.emoji} style={{left: isOpen&&isOpen !== 'menu'?'31%':'44%'}}>
+                   <div className={classes.emoji} style={{left: isOpen&&isOpen !== 'menu'?'33.5%':'46%'}}>
                       <NotDone name='Emoji Bar'/>
                    </div>  
                 </div>
@@ -315,31 +295,10 @@ const SendMessage = ({isArrow,isNew,handleScrollTo}:ISendMessage) => {
                     }} />
                 <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
                     style={{ display: isOpenMenu ? 'block':'none'}}>
-                    <div className={classes.filesMenu} style={{left: isOpen&&isOpen !== 'menu'?'48%':'61%'}}>
+                    <div className={classes.filesMenu} style={{left: isOpen&&isOpen !== 'menu'?'51%':'63.5%'}}>
                       <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
                     </div>
-                </div>
-                <div className={classes.avatarArrowWrapper} style={{display: isArrow ? 'block' : 'none'}}>
-                    <button onClick={handleScrollTo} style={{display: isNew.new ? 'block' : 'none',
-                     background: isNew.mute ? '#a7aaa7' : '#0ac40a'}}
-                     className={classes.listSeenIcon}>{isNew.new}</button>
-                   <Avatar onClick={handleScrollTo} className={classes.avatarArrow}
-                       sx={{backgroundColor: '#ffffff', width: 56, height: 56,color: '#6b6b6b'}}>
-                     <ArrowDownwardIcon fontSize="medium" />  
-                   </Avatar>                    
-                </div>
-            </div>  
-            {value || file || status === 'stopped'  || _status === 'stopped' ?
-             <Avatar onClick={sentMessage} className={classes.avatar} sx={{
-                backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}>
-             <SendIcon fontSize="medium" />
-                </Avatar> : null}
-            {!value && !file && status !== 'stopped' && _status === 'idle' ? <Avatar onClick={handleRecording}
-                className={classes.avatar} style={{animation:isRecording ? 'ripple 1.2s infinite ease-in-out': 'none'}}
-                sx={{backgroundColor: isRecording ? 'rgb(41, 139, 231)' : '#ffffff',
-                color: isRecording ? '#ffffff' : '#6b6b6b', width: 56, height: 56}}>
-                <MicNoneIcon fontSize="medium" />
-            </Avatar>:null}            
+                </div>         
         </div>            
     )
 }

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

@@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useSelector,useDispatch } from "react-redux";
 
+import ArrowBack from "./ArrowBack";
 import SendMessage from "./SendMessage";
 import MessageLeftText from './Messages/MessageLeftText'
 import MessageLeftImage from './Messages/MessageLeftImage'
@@ -27,22 +28,25 @@ const debounce = require('lodash.debounce');
 
 const useStyles = makeStyles({   
     container: {
+      height: '93vh',
       width: "100%",
-      height: "100%",
-      maxWidth: "100%",
-      maxHeight: "100%",
       display: "flex",
       alignItems: "center",
       alignContent:"center",
       flexDirection: "column",
       position: "relative",
-      overflowY: "scroll",
-      paddingTop: 60,
     },
+  messagesScroll: {
+      paddingTop: 30,
+      overflowY: "scroll",
+      maxHeight: '83vh',
+      width: "100%",
+      display: "flex",
+      justifyContent: 'center',
+  },
     messagesBody: {
       width: "60%",
-      height: "80%",
-    },   
+  },  
 });
 
 const ChatBar = () => {
@@ -68,7 +72,7 @@ const ChatBar = () => {
     isScroll&&setIsScroll(false)
     const different = target.scrollHeight - target.scrollTop
     if (different < 900) seenChat(companionId)
-    setIsArrow(different < 1500 ? false : true)
+    setIsArrow(different < 1300 ? false : true)
   }, [isScroll, companionId])
   
   const debouncedHandleScroll = debounce(handleScroll, 300)
@@ -98,8 +102,10 @@ const ChatBar = () => {
   }, [isScroll, companionId, total]);
 
   return (
-      <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
-        <div  className={classes.messagesBody}>
+    <div className={classes.container} >
+      <ArrowBack isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo}/>
+      <div ref={divRef} className={classes.messagesScroll} onScroll={debouncedHandleScroll}>
+        <div className={classes.messagesBody}>
         {messages.length > 0 ? messages.map(({ message, name, lastName, color,
           updatedAt, createdAt,number, type,fullType }) => {
           let isTime
@@ -193,8 +199,9 @@ const ChatBar = () => {
                    /></div>)            
           }
         }) : <AlertInfo name='You do not have messages yet!' />}
-      </div>         
-    <SendMessage  isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo}/>   
+        </div>
+      </div>  
+    <SendMessage isArrow={isArrow} handleScrollTo={handleScrollTo}/>   
     </div>
   );
 }

src/components/HomePage/RightBar/HeaderBar/Buttons/DeleteModal/index.tsx

@@ -46,8 +46,12 @@ const DeleteModal = ({setModal}:{setModal:any}) => {
   const handleDeleteModal = (e: any) => {
     const id = e.target.id
     if (id === 'overlay' || id === 'cancel')  return setModal(false)
-    removeChatForBoth(companionId)
-  }  
+    if (id === 'delete') {
+      removeChatForBoth(companionId)
+      setModal(false)
+    }
+  }
+
   return (
     <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
       <div className={classes.modalDelete}>
@@ -61,7 +65,7 @@ const DeleteModal = ({setModal}:{setModal:any}) => {
          <p style={{color: '#050505'}}>{`Are you sure you want to delete the
           chat with ${`${firstLetter(name)}${slicedWord(name, 15, 1)} 
             ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}</p>
-          <Button  variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+          <Button id='delete'  variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
             DELETE CHAT
           </Button>         
           <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>

src/components/HomePage/RightBar/HeaderBar/Buttons/index.tsx

@@ -21,7 +21,7 @@ const Buttons = () => {
   const [modal,setModal] = useState<boolean>(false)
 
   return (
-    <Stack className={classes.container} direction="row" spacing={1}>
+    <Stack className={classes.container} direction="row">
       <IconButton onClick={() => dispatch(actionIsOpen('search'))} aria-label="delete" size="medium">
         <SearchIcon fontSize='medium'/>
       </IconButton>

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

@@ -15,6 +15,9 @@ import { getChat } from '../../../../../../redux/chat/selector'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
+container: {
+  borderBottom:'solid 2px #dddddd',
+},
 icon: {
   fontSize: 17,
   lineHeight: 0,
@@ -42,6 +45,7 @@ const ProfileLists = () => {
         showLabels
         value={isActive}
         onChange={handleIsActive}
+        className={classes.container}
         >
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />   
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileMenu/index.tsx

@@ -61,7 +61,7 @@ const ProfileMenu = () => {
         </MenuItem>
         <Divider variant="inset"/>        
         <CopyToClipboard onCopy={() => copied('Username')} text={credentials}>
-          <MenuItem style={{cursor:'default'}}>
+          <MenuItem style={{cursor:'pointer'}}>
             <ListItemIcon className={classes.listIcon}>
                <AlternateEmailIcon fontSize="medium" />
             </ListItemIcon>

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfilePicture/index.tsx

@@ -5,7 +5,7 @@ import { getChat } from '../../../../../../redux/chat/selector'
 
 const useStyles = makeStyles({
   container: {
-    width:'100%'
+    position:'relative'
   },
   imgContainer: {
     position:'relative',
@@ -28,7 +28,7 @@ const useStyles = makeStyles({
     fontSize: 24,
     zIndex:10,
     top: 395,
-    left:35
+    left:20
   },
   timeTile: {
     position:'absolute',
@@ -39,7 +39,7 @@ const useStyles = makeStyles({
     fontSize: 19,
     fontWeight:600,
     top: 430,
-    left:35
+    left:20
   },    
 })
 

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ToolBar/index.tsx

@@ -13,7 +13,6 @@ import { asyncGetContacts,asyncAddContact } from '../../../../../../redux/contac
 
 const useStyles = makeStyles({
   container: {
-    width: '100%',
     display: 'flex',
     alignContent: 'center',
     alignItems: 'center',

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/index.tsx

@@ -1,18 +1,32 @@
+import { makeStyles } from '@material-ui/core'
 import ToolBar from './ToolBar'
 import ProfilePicture from './ProfilePicture'
 import ProfileMenu from './ProfileMenu'
 import ProfileLists from './ProfileLists'
 
-const CredentialsList= () => {
+const useStyles = makeStyles({
+  container: {
+    backgroundColor: '#ffffff',
+    height: '100%',
+    position:'relative'
+  },
+  scrollContainer: {
+    overflowY: 'scroll',
+    maxHeight: '93vh'
+  },
+})
+
+const CredentialsList = () => {
+  const classes = useStyles()
     return (
-    <>
+    <div className={classes.container}>
       <ToolBar />
-        <div style={{ overflowY: 'scroll', maxHeight:'93vh' }}>
+        <div className={classes.scrollContainer}>
         <ProfilePicture />
         <ProfileMenu />
         <ProfileLists />
       </div>
-    </>
+    </div>
   )
 }
 

src/components/HomePage/RightBar/RightListsAndBars/EditBar/Delete/index.tsx

@@ -1,12 +1,14 @@
 import { makeStyles } from '@material-ui/core'
 import Button from '@mui/material/Button';
+import Avatar from '@mui/material/Avatar';
 import MenuItem from '@mui/material/MenuItem';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { actionIsOpen } from '../../../../../../redux/control/action'
 import { removeContact } from '../../../../../../api-data';
-
+import { TContact } from '../../../../../../typescript/redux/contacts/types';
+import { slicedWord,firstLetter } from '../../../../../../helpers';
 const useStyles = makeStyles({
   container: {
     width: '100%',
@@ -18,7 +20,7 @@ const useStyles = makeStyles({
     position: 'absolute',
     content:'',
     width: '20%',
-    height:'17%',
+    height:'auto',
     left: '40%',
     bottom: '48.5%',
     borderRadius: 10,
@@ -35,20 +37,28 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     overflowY: 'hidden',
-  },  
+  },
+  titleWrapper: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignContent: 'center',
+    alignItems:'center'
+  },
 })
-const Delete = ({_id}:{_id:string}) => {
+const Delete = ({isContact}:{isContact:TContact}) => {
   const classes = useStyles()
   const dispatch = useDispatch()
+  const {_id,avatarUrl,color,name,lastName} = isContact
   const [modal,setModal] = useState<boolean>(false)
   const handleDeleteModal = (e: any) => {
     const id = e.target.id
-    if (id === 'overlay' || id === 'cancel')  return setModal(false)
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
       dispatch(actionIsOpen('credentials'))
       removeContact(_id)
+      setModal(false)
     }
-  }
+  }  
   const handleOpenModal = () => setModal(true)
   return (
     <>
@@ -59,17 +69,26 @@ const Delete = ({_id}:{_id:string}) => {
           </MenuItem>        
         </ul>
         {modal&&<div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
-          <div className={classes.modalDelete}>
-            <p style={{color:'#020202'}}>Are you sure you want to delete this contact?</p>
-            <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:18}}>
-              DELETE CONTACT
-            </Button>          
-            <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:18}}>
-              CANCEL
-            </Button>
-          </div>
-        </div>}
-    </>
+      <div className={classes.modalDelete}>
+        <div className={classes.titleWrapper}>
+          <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+            sx={{ background: color, width: 38, height: 38,marginRight:2}}>
+            {`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+          <h3 style={{color: '#2c2c2c'}}>Delete contact</h3>
+         </div>
+          <p style={{ color: '#050505' }}>{`Are you sure you want to delete contact
+            ${`${firstLetter(name)}${slicedWord(name, 15, 1)}
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE CONTACT
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+    </div>}
+  </>
   );
 }
 

src/components/HomePage/RightBar/RightListsAndBars/EditBar/SubmitBtn/index.tsx

@@ -3,14 +3,13 @@ import Avatar from '@mui/material/Avatar';
 import DoneIcon from '@mui/icons-material/Done';
 
 const useStyles = makeStyles({
+  container: {
+    position: 'absolute',
+    top: '92vh',
+    left: 20,
+  },  
   avatarArrow: {
     cursor: 'pointer',
-    marginLeft: 'auto',
-    marginRight: 20,
-    position: 'absolute',
-    content: '',
-    right: 10,
-    bottom:10,
     '&:hover': {
       backgroundColor: 'rgb(62, 149, 231)'
     }
@@ -21,10 +20,12 @@ const SubmitBtn = ({handleSubmit}:{handleSubmit:() => void}) => {
   const classes = useStyles()  
 
   return (
-    <Avatar onClick={handleSubmit} className={classes.avatarArrow}
-      sx={{width: 56, height: 56,backgroundColor: 'rgb(41, 139, 231)',color: '#ffffff'}}>
-      <DoneIcon fontSize="medium" />  
-    </Avatar>        
+    <div className={classes.container}>
+      <Avatar onClick={handleSubmit} className={classes.avatarArrow}
+        sx={{width: 56, height: 56,backgroundColor: 'rgb(41, 139, 231)',color: '#ffffff'}}>
+        <DoneIcon fontSize="medium" />  
+      </Avatar>
+    </div>  
   )
 };
 

src/components/HomePage/RightBar/RightListsAndBars/EditBar/index.tsx

@@ -12,6 +12,8 @@ import { muteChat,updateContact } from '../../../../../api-data';
 const useStyles = makeStyles({
   editBar: {
     backgroundColor: '#f3f2f2',
+    height: '100%',
+    position:'relative'
   }
 })
 
@@ -48,16 +50,14 @@ const EditBar= () => {
   }, [Name, LastName, Mute])  
 
     return (
-   <>
+   <div className={classes.editBar}>
       {openBtn&&<SubmitBtn handleSubmit={handleSubmit}/>}
       <ToolBar />
-      <div className={classes.editBar}>
-          <EditList chat={chat} name={name} setName={setName} lastName={lastName}
-            setLastName={setLastName} mute={mute} setMute={setMute}
-            openBtn={openBtn} setOpenBtn={setOpenBtn} />
-          <Delete _id={isContact._id} />
-      </div>
-   </>
+      <EditList chat={chat} name={name} setName={setName} lastName={lastName}
+        setLastName={setLastName} mute={mute} setMute={setMute}
+        openBtn={openBtn} setOpenBtn={setOpenBtn} />
+      <Delete isContact={isContact} />
+   </div>
   )
 }
 

src/components/HomePage/RightBar/RightListsAndBars/SearchList/Search/StaticDatePicker/index.tsx

@@ -9,13 +9,9 @@ interface IStaticDatePicker {
 }
 
 const useStyles = makeStyles({
-    container: {
-        position: 'absolute',
-        left: 1369,
-        top:1,
-        width: 30,
-        cursor: 'pointer',
-    }
+container: {
+  position: 'absolute',
+  }
 })
 
 const StaticDatePicker = ({ disabled, date, changeDate,handleOnOpen }: IStaticDatePicker) => {
@@ -29,7 +25,7 @@ return (
         variant="dialog"
         openTo="date"
         autoOk
-        value={date}
+        value={date?date:new Date()}
         onOpen={handleOnOpen}
         onChange={changeDate}
         />

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

@@ -1,5 +1,5 @@
 import InputBase from '@mui/material/InputBase';
-import Stack from '@mui/material/Stack';
+import Toolbar from '@mui/material/Toolbar'
 import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
 import CloseIcon from '@mui/icons-material/Close';
@@ -54,16 +54,16 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 }));
 
 const useStyles = makeStyles({
-  container: {
-    paddingLeft: 10,
-    paddingBottom:3
+  toolBar: {
+    color: '#b1aeae',
+    height:'7vh'
   },
   searchBar: {
   '&:hover': {
     backgroundColor: '#f5f5f5',
     color:'#2184f7',
-  },    
-  }
+   },    
+  },
 })
 
 interface ISearch {
@@ -81,7 +81,7 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
   const handleOnOpen = () => setDate('')
 
   return (
-    <Stack className={classes.container} direction="row" spacing={1.5}>
+    <Toolbar className={classes.toolBar} >
       <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon fontSize='medium'/>
       </IconButton>
@@ -97,12 +97,12 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
             inputProps={{ 'aria-label': 'search' }}
           />
       </SearchBar>      
-      <IconButton  aria-label="delete" size="medium">
-        <CalendarTodayIcon fontSize='medium'/>
+      <IconButton aria-label="delete" size="medium">
+        <StaticDatePicker disabled={disabled} date={date}
+        changeDate={setDate} handleOnOpen={handleOnOpen} />        
+        <CalendarTodayIcon fontSize='medium' />
       </IconButton>
-      <StaticDatePicker disabled={disabled} date={date}
-        changeDate={setDate} handleOnOpen={handleOnOpen} />
-    </Stack>
+    </Toolbar>
     )
 }
 

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

@@ -14,16 +14,14 @@ import { getMessages } from '../../../../../redux/messages/selector'
 import { timeStamp,timeStampFilter,firstLetter,slicedWord } from '../../../../../helpers'
 
 const useStyles = makeStyles({
-  containerAbsolute: {
-    position: 'absolute',
-    top: 58,
-    width: 506,
-    maxHeight: '905px',
-    minHeight: '905px',
-    overflowY: 'scroll',
-    overflowX: 'hidden',
+  container: {
+    height: '100%',
     backgroundColor: '#ffffff'
   },
+  list: {
+    maxHeight: '93vh',
+    overflowY: 'scroll',
+  },
   listItem: {
     '&:hover': {
       backgroundColor: '#f0f0f0',
@@ -48,10 +46,10 @@ const SearchList= () => {
     })
   const arr = filteredMessages()
 return (
-   <div>
+   <div className={classes.container}>
     <Search handleSearch={handleSearch} value={value}
       setDate={setDate} date={date} />
-     <div className={classes.containerAbsolute}>
+     <div className={classes.list}>
       {messages.length > 0 ? arr.length > 0 ?
         <List sx={{ width: '100%' }}>
           {arr.map(({ name, lastName, avatarUrl, color, message, createdAt }) =>

src/components/HomePage/RightBar/index.tsx

@@ -12,32 +12,18 @@ import RightListsAndBars from './RightListsAndBars'
 const useStyles = makeStyles({
   chatBar: {
     background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
-    paddingBottom: 158,
   },
-  rightListsAndBars: {
-    position: 'relative',
-    backgroundColor:'#ffffff'
-  },
-  containerBtn: {
-    minHeight: '100vh',
-    maxHeight: '100vh',
-    background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
-    display: 'flex',
-    msFlexDirection: 'column',
-    alignContent: 'center',
-    alignItems: 'center',
-    justifyContent:'center'
-  }
 })
 
 const RightBar = () => {
   const classes = useStyles()
   const isOpen = useSelector(getIsOpen)
   const { _id } = useSelector(getChatMemo)
+  const handleIsOpen = isOpen&&isOpen !== 'menu'
 
     return _id?
       <Grid item lg={9} style={{display:'flex'}}>
-        <Grid item lg={isOpen&&isOpen !== 'menu'?8:12}>
+        <Grid item lg={handleIsOpen?8:12}>
           <Grid item lg={12} >
             <HeaderBar/>
           </Grid>          
@@ -45,7 +31,7 @@ const RightBar = () => {
             <ChatBar />
           </Grid>
         </Grid>
-        <Grid item lg={isOpen&&isOpen !== 'menu'?4:0} className={classes.rightListsAndBars} >
+        <Grid item lg={handleIsOpen?4:0}>
           <RightListsAndBars/>
         </Grid>          
       </Grid>