rewrite grids

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: '890px',
+    maxHeight: '92vh',
     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: '890px',
+    maxHeight: '92vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'

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

@@ -2,7 +2,7 @@ import { makeStyles, TextField } from '@material-ui/core'
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
-import { useEffect} from 'react';
+import { useEffect } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { format,firstLetter } from '../../../../../helpers'
 import { IAuthorizationState } from '../../../../../typescript/redux/authorization/interfaces'
@@ -14,7 +14,6 @@ const useStyles = makeStyles({
     alignContent:'center',
     flexDirection: 'column',
     width: '100%',
-    margin: '0 auto',
     padding: 20,
     paddingTop:0,
     position: 'relative',

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

@@ -3,24 +3,30 @@ import Avatar from '@mui/material/Avatar';
 import DoneIcon from '@mui/icons-material/Done';
 
 const useStyles = makeStyles({
+  container: {
+    position: 'absolute',
+    content: '',
+    bottom: 20,
+    right:20,
+  },
   avatarArrow: {
     cursor: 'pointer',
-    marginLeft: 'auto',
-    marginRight: 20,
     '&:hover': {
       backgroundColor: 'rgb(62, 149, 231)'
     }
-  }
+  },
 })
 
 const SubmitBtn = ({handleSubmit}:{handleSubmit:() => void}) => {
   const classes = useStyles()  
 
   return (
+  <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>        
+    </Avatar>
+  </div>  
   )
 };
 

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

@@ -7,10 +7,11 @@ const useStyles = makeStyles({
   container: {
     paddingLeft: 10,
     paddingBottom: 3,
-    width: 482,
+    width: '100%',
     display: 'flex',
     alignContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#ffffff',
   },
   iconArrow: {
     '&:hover': {

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

@@ -9,15 +9,12 @@ import { asyncCurrentUser } from '../../../../redux/authorization/operations';
 import { updateCredentials,updateUserAvatar } from '../../../../api-data';
 
 const useStyles = makeStyles({
-    containerAbsolute: {
-        position: 'absolute',
-        top: 58,
-        width: 506,
-        maxHeight: '905px',
-        minHeight: '905px',
-        overflow: 'hidden',
-        backgroundColor: '#f3f2f2',
-    }
+  container: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#f3f2f2',
+    position:'relative'
+  }
 })
 
 interface IEditBar {
@@ -54,16 +51,14 @@ const EditBar= ({setSelectedIndex}:IEditBar) => {
   }, [Name, LastName])  
 
     return (
-    <div>
+    <div className={classes.container}>
+      {openBtn&&<SubmitBtn handleSubmit={handleSubmit}/>}
       <ToolBar setSelectedIndex={setSelectedIndex}/>
-      <div className={classes.containerAbsolute}>
-          <EditList user={user} name={name} setName={setName}
-            lastName={lastName} setLastName={setLastName} 
-            openBtn={openBtn} setOpenBtn={setOpenBtn}
-            file={file} setFile={setFile}/>
-          {openBtn&&<SubmitBtn handleSubmit={handleSubmit}/>}
-      </div>
-   </div>
+      <EditList user={user} name={name} setName={setName}
+        lastName={lastName} setLastName={setLastName} 
+        openBtn={openBtn} setOpenBtn={setOpenBtn}
+        file={file} setFile={setFile}/>
+    </div>
   )
 }
 

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

@@ -60,6 +60,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 const useStyles = makeStyles({
   toolBar: {
     color: '#b1aeae',
+    height:'8vh'
   },
   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: '840px',
+    maxHeight: '85vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'
@@ -51,7 +51,8 @@ const AudioList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
     const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'audio')
   return(
     <>
-      <List className={classes.container}>
+      {filteredMessagesMemo.length > 0 &&
+        <List className={classes.container}>
         {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
           <div key={createdAt}>
             <ListItem alignItems="flex-start" className={classes.listItem}>
@@ -67,7 +68,7 @@ const AudioList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
             </ListItem>
             <Divider variant="inset"/>
         </div>)}
-      </List>
+      </List>}
       {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Audio by request: ${value}`} />}
       {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Audio yet!'/>}
    </>)

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

@@ -15,7 +15,7 @@ const useStyles = makeStyles({
   },
   container: {
     width: '100%',
-    maxHeight: '840px',
+    maxHeight: '85vh',
     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: '840px',
+    maxHeight: '85vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'
@@ -52,7 +52,8 @@ const FilesList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
     const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type !== 'text')
   return (
     <>
-      <List className={classes.container}>
+      {filteredMessagesMemo.length > 0 &&
+        <List className={classes.container}>
         {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
           <div key={createdAt}>
             <ListItem alignItems="flex-start" className={classes.listItem}>
@@ -68,7 +69,7 @@ const FilesList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
             </ListItem>
             <Divider variant="inset"/>
         </div>)}
-      </List>
+      </List>}
       {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Files by request: ${value}`} />}
       {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Files yet!'/>}
     </>

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: '840px',
+    maxHeight: '85vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'
@@ -35,10 +35,11 @@ const MediaList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
   const filteredMessagesMemo =  allMessagesMemo.filter(({ type }) => type === 'image')
   return (
     <>
-      <ImageList className={classes.container} cols={3} rowHeight={164}>
+      {filteredMessagesMemo.length > 0 &&
+        <ImageList className={classes.container} cols={3} rowHeight={164}>
         {filteredMessagesMemo.map(({message,createdAt,fullType,updatedAt}) => 
           <MediaListItem key={createdAt} message={message} fullType={fullType} updatedAt={updatedAt}/>)}
-      </ImageList>
+      </ImageList>}
       {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Media by request: ${value}`} />}
       {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Media yet!'/>}
      </>

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: '840px',
+    maxHeight: '85vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'
@@ -54,7 +54,8 @@ const TextList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,val
   const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'text')
   return (
   <>
-    <List className={classes.container}>
+      {filteredMessagesMemo.length > 0 &&
+        <List className={classes.container}>
        {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
       <div key={createdAt}>
           <ListItem alignItems="flex-start" className={classes.listItem}>
@@ -73,7 +74,7 @@ const TextList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,val
           </ListItem>
           <Divider variant="inset" />
       </div>)}
-    </List>
+    </List>}
     {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Text by request: ${value}`} />}
     {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Text yet!'/>} 
   </>

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: '840px',
+    maxHeight: '85vh',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'
@@ -51,7 +51,8 @@ const VideoList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
     const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'video')
   return (
     <>
-      <List className={classes.container}>
+      {filteredMessagesMemo.length > 0 &&
+        <List className={classes.container}>
         {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
           <div key={createdAt}>
             <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
@@ -63,11 +64,11 @@ const VideoList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
               <ListItemText
                 primary={fullType}
                 secondary={timeStampEU(createdAt)}
-               />
+              />
             </ListItem>
-            <Divider variant="inset"/>
-        </div>)}
-      </List>
+            <Divider variant="inset" />
+          </div>)}
+      </List>}
       {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Video by request: ${value}`} />}
       {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Video yet!'/>}
     </>

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

@@ -25,6 +25,7 @@ import { TChats } from '../../../../typescript/redux/chats/types';
 const useStyles = makeStyles({
   bottomNavigation: {
     boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
+    height:'7vh'
  },
  icon: {
   fontSize: 17,

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

@@ -14,9 +14,7 @@ import { copied} from '../../../../../helpers';
 const useStyles = makeStyles({
     container: {
     width: '100%',
-    },
-    list: {
-      background:'#fdfdfd'
+    backgroundColor: '#ffffff',  
     },
 })
 
@@ -27,7 +25,7 @@ const SettingsMenu = () => {
 
   return (
     <Paper className={classes.container}>
-      <MenuList className={classes.list}>
+      <MenuList>
         <CopyToClipboard onCopy={() => copied('Number')} text={number}>
            <MenuItem>
               <ListItemIcon style={{marginRight:15}}>

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

@@ -5,7 +5,8 @@ import { getState } from '../../../../../redux/authorization/selector'
 
 const useStyles = makeStyles({
   container: {
-    width:'100%'
+    width: '100%',
+    backgroundColor: '#ffffff',
   },
   imgContainer: {
     position:'relative',

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

@@ -8,11 +8,11 @@ import { makeStyles, Typography } from '@material-ui/core'
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxWidth: '100%',
     padding:10,
     display: 'flex',
     alignContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#ffffff',
   },
   iconArrow: {
     '&:hover': {

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

@@ -9,7 +9,7 @@ interface ISettingsBar {
 
 const SettingsBar = ({setSelectedIndex,handleClick}:ISettingsBar) => {
   return (
-    <div style={{backgroundColor: '#f3f2f2',height:'100%'}}>
+    <div style={{backgroundColor: '#f3f2f2',height:'100%',width:'100%'}}>
       <ToolBar setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>
       <SettingsPicture />
       <SettingsMenu/>

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

@@ -49,8 +49,8 @@ const useStyles = makeStyles({
     container: {
         position: 'absolute',
         maxWidth: '100%',
-        top: 895,
-        left: 390,
+        bottom: 20,
+        right: 20,
         zIndex: 10,
         visibility: 'visible',
         cursor:'pointer'

src/components/HomePage/LeftBar/index.tsx

@@ -33,8 +33,8 @@ const LeftBar = () => {
   const handleEnterOpenMenuSm = (): void => {
     if(!isMenuSm) setIsMenuSm(true)
   }
-  const handleLeaveCloseMenuSm = (e: any): void => {
-    if(isMenuSm&&e.pageX > 480) setIsMenuSm(false)
+  const handleLeaveCloseMenuSm = (): void => {
+    if(isMenuSm) setIsMenuSm(false)
   }
   const handleSelectedMenu = (i: number) => {
     setIsSearch(true)
@@ -67,7 +67,8 @@ const LeftBar = () => {
   }, [])
 
     return (
-      <Grid item lg={3} onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
+      <Grid item lg={3} style={{position:'relative'}}
+        onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
         {selectedIndex !== 2 && selectedIndex !== 4 &&
           <SearchBar handleClick={handleClick} handleFocus={handleFocus} sort={sort}
           handleSearch={handleSearch} isSearch={isSearch} selectedIndex={selectedIndex} value={value}/>}

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

@@ -195,7 +195,7 @@ const ChatBar = () => {
         }) : <AlertInfo name='You do not have messages yet!' />}
       </div>         
     <SendMessage  isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo}/>   
-      </div>
+    </div>
   );
 }
 

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

@@ -11,7 +11,7 @@ import { actionIsOpen } from '../../../../../redux/control/action'
 
 const useStyles = makeStyles({
   container: {
-    marginLeft:20
+    marginLeft: 20,
   }, 
 })
 

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

@@ -1,34 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import ToolBar from './ToolBar'
-import ProfilePicture from './ProfilePicture'
-import ProfileMenu from './ProfileMenu'
-import ProfileLists from './ProfileLists'
-
-const useStyles = makeStyles({
-    containerAbsolute: {
-        position: 'absolute',
-        top: 58,
-        width: 506,
-        maxHeight: '905px',
-        minHeight: '905px',
-        overflowY: 'scroll',
-        overflowX: 'hidden',
-        backgroundColor:'#ffffff'
-    }
-})
-
-const CredentialsList= () => {
-  const classes = useStyles()
-    return (
-    <div>
-        <ToolBar />
-        <div className={classes.containerAbsolute}>
-          <ProfilePicture />
-          <ProfileMenu />
-          <ProfileLists />
-     </div>
-   </div>
-  )
-}
-
-export default CredentialsList

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

@@ -2,7 +2,6 @@ import Toolbar from '@mui/material/Toolbar'
 import AppBar from '@mui/material/AppBar';
 import { makeStyles } from '@material-ui/core'
 
-import RightListsAndBars from './RightListsAndBars'
 import Credentials from './Credentials'
 import Buttons from './Buttons'
 
@@ -12,6 +11,7 @@ const useStyles = makeStyles({
     display: 'flex',
     justifyContent: 'space-between',
     backgroundColor: '#ffffff',
+    height:'7vh'
   },
 })
 
@@ -19,10 +19,9 @@ const HeaderBar = () => {
   const classes = useStyles()
     return (
       <AppBar position="static">
-        <Toolbar  className={classes.toolBar}>
+        <Toolbar className={classes.toolBar}>
           <Credentials/>
           <Buttons/>
-          <RightListsAndBars/>
         </Toolbar>
       </AppBar>        
     )

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

@@ -6,9 +6,9 @@ import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
-import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload } from '../../../../../../../../helpers'
-import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
+import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload } from '../../../../../../../helpers'
+import { TMessages } from '../../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
     folderIcon: {

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

@@ -6,9 +6,9 @@ import FolderIcon from '@mui/icons-material/Folder';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
-import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload } from '../../../../../../../../helpers'
-import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
+import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload } from '../../../../../../../helpers'
+import { TMessages } from '../../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
     folderIcon: {

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

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core'
 import { useState } from 'react';
 import ImageListItem from '@mui/material/ImageListItem';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import { handleDownload,timeStampEU } from '../../../../../../../../../helpers'
+import { handleDownload,timeStampEU } from '../../../../../../../../helpers'
 
 const useStyles = makeStyles({ 
   overlay: {

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

@@ -1,8 +1,8 @@
 import ImageList from '@mui/material/ImageList';
 import MediaListItem from './MediaListItem';
 
-import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
-import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
+import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
+import { TMessages } from '../../../../../../../typescript/redux/messages/types'
 
 const MediaList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
   const filteredMessagesMemo =  messagesMemo.filter(({ type }) => type === 'image')

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

@@ -8,9 +8,9 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
-import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,copied } from '../../../../../../../../helpers'
-import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
+import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,firstLetter,copied } from '../../../../../../../helpers'
+import { TMessages } from '../../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
   listItem: {

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

@@ -6,9 +6,9 @@ import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
-import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload } from '../../../../../../../../helpers'
-import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
+import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload } from '../../../../../../../helpers'
+import { TMessages } from '../../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
     folderIcon: {

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

@@ -9,25 +9,22 @@ import MediaList from './MediaList';
 import FilesList from './FilesList';
 import TextList from './TextList';
 import VideoList from './VideoList'
-import { getMessagesMemo } from '../../../../../../../redux/messages/selector'
-import { handleSort } from '../../../../../../../helpers';
-import { getChat } from '../../../../../../../redux/chat/selector'
-import { TMessages } from '../../../../../../../typescript/redux/messages/types'
+import { getMessagesMemo } from '../../../../../../redux/messages/selector'
+import { handleSort } from '../../../../../../helpers';
+import { getChat } from '../../../../../../redux/chat/selector'
+import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
-    bottomNavigation: {
-        boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
-    },
-    icon: {
-        fontSize: 17,
-        lineHeight: 0,
-        marginBottom: 0,
-        fontWeight:600
-    },
-    underline: {
-        fontSize: 45,
-        lineHeight: 0,
-    },
+icon: {
+  fontSize: 17,
+  lineHeight: 0,
+  marginBottom: 0,
+  fontWeight:600
+ },
+underline: {
+  fontSize: 45,
+  lineHeight: 0,
+  },
 })
 
 const ProfileLists = () => {
@@ -45,7 +42,6 @@ const ProfileLists = () => {
         showLabels
         value={isActive}
         onChange={handleIsActive}
-        className={classes.bottomNavigation}
         >
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />   
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />

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

@@ -13,17 +13,11 @@ import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
-import { getChat } from '../../../../../../../redux/chat/selector'
-import { muteChat,sortChat } from '../../../../../../../api-data'
-import { copied,firstLetter,slicedWord } from '../../../../../../../helpers';
+import { getChat } from '../../../../../../redux/chat/selector'
+import { muteChat,sortChat } from '../../../../../../api-data'
+import { copied,firstLetter,slicedWord } from '../../../../../../helpers';
 
 const useStyles = makeStyles({
-    container: {
-    width: '100%',
-    },
-    list: {
-      background:'#fdfdfd'
-    },
     listIcon: {
         marginRight: 15,
     },
@@ -39,8 +33,8 @@ const ProfileMenu = () => {
   const credentials = `${firstLetter(originalName)}${slicedWord(originalName, 15, 1)}
         ${firstLetter(originalLastName)}${slicedWord(originalLastName, 15, 1)}`
   return (
-    <Paper className={classes.container}>
-      <MenuList className={classes.list}>
+    <Paper>
+      <MenuList>
         <CopyToClipboard onCopy={() => copied('Number')} text={number}>
            <MenuItem>
               <ListItemIcon className={classes.listIcon}>

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

@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core'
-import { firstLetter,slicedWord,timeStampEU } from '../../../../../../../helpers'
+import { firstLetter,slicedWord,timeStampEU } from '../../../../../../helpers'
 import { useSelector } from 'react-redux';
-import { getChat } from '../../../../../../../redux/chat/selector'
+import { getChat } from '../../../../../../redux/chat/selector'
 
 const useStyles = makeStyles({
   container: {

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

@@ -6,19 +6,18 @@ import CloseIcon from '@mui/icons-material/Close';
 import { makeStyles, Typography } from '@material-ui/core'
 import { useDispatch, useSelector } from 'react-redux';
 import { useState,useEffect } from 'react';
-import { actionIsOpen } from '../../../../../../../redux/control/action'
-import { getContactsMemo } from '../../../../../../../redux/contacts/selector'
-import { getChat } from '../../../../../../../redux/chat/selector'
-import { asyncGetContacts,asyncAddContact } from '../../../../../../../redux/contacts/operations';
+import { actionIsOpen } from '../../../../../../redux/control/action'
+import { getContactsMemo } from '../../../../../../redux/contacts/selector'
+import { getChat } from '../../../../../../redux/chat/selector'
+import { asyncGetContacts,asyncAddContact } from '../../../../../../redux/contacts/operations';
 
 const useStyles = makeStyles({
   container: {
-    paddingLeft: 10,
-    paddingBottom: 3,
-    width: 482,
+    width: '100%',
     display: 'flex',
     alignContent: 'center',
-    alignItems: 'center',    
+    alignItems: 'center',
+    height:'7vh'
   },
   iconClose: {
     '&:hover': {
@@ -52,7 +51,7 @@ const ToolBar = () => {
   }, [contactsMemo,number])
   
   return (
-    <Stack className={classes.container} direction="row" spacing={40}>
+    <Stack className={classes.container} direction="row" spacing={38}>
       <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon className={classes.iconClose} fontSize='medium'/>
       </IconButton>

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

@@ -0,0 +1,19 @@
+import ToolBar from './ToolBar'
+import ProfilePicture from './ProfilePicture'
+import ProfileMenu from './ProfileMenu'
+import ProfileLists from './ProfileLists'
+
+const CredentialsList= () => {
+    return (
+    <>
+      <ToolBar />
+        <div style={{ overflowY: 'scroll', maxHeight:'93vh' }}>
+        <ProfilePicture />
+        <ProfileMenu />
+        <ProfileLists />
+      </div>
+    </>
+  )
+}
+
+export default CredentialsList

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

@@ -4,15 +4,14 @@ 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 { actionIsOpen } from '../../../../../../redux/control/action'
+import { removeContact } from '../../../../../../api-data';
 
 const useStyles = makeStyles({
   container: {
     width: '100%',
     padding: '20px 10px 20px 10px',
     backgroundColor: '#ffffff',
-    marginBottom: '280px',
   },
   modalDelete: {
     background: '#ffffff',
@@ -53,11 +52,11 @@ const Delete = ({_id}:{_id:string}) => {
   const handleOpenModal = () => setModal(true)
   return (
     <>
-      <ul className={classes.container}>
-        <MenuItem onClick={handleOpenModal} style={{fontSize:19,color:'#f02a2a'}} >
-          <DeleteOutlineIcon fontSize='medium' style={{marginRight:27}}/>
-           Delete contact
-        </MenuItem>        
+        <ul className={classes.container}>
+          <MenuItem onClick={handleOpenModal} style={{fontSize:19,color:'#f02a2a'}} >
+            <DeleteOutlineIcon fontSize='medium' style={{marginRight:27}}/>
+             Delete contact
+          </MenuItem>        
         </ul>
         {modal&&<div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
           <div className={classes.modalDelete}>

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

@@ -3,8 +3,8 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Checkbox from '@mui/material/Checkbox';
 import ListItemText from '@mui/material/ListItemText';
-import { format,firstLetter,slicedWord } from '../../../../../../../helpers'
-import { TChat } from '../../../../../../../typescript/redux/chat/types'
+import { format,firstLetter,slicedWord } from '../../../../../../helpers'
+import { TChat } from '../../../../../../typescript/redux/chat/types'
 
 const useStyles = makeStyles({
   container: {

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

@@ -7,6 +7,10 @@ const useStyles = makeStyles({
     cursor: 'pointer',
     marginLeft: 'auto',
     marginRight: 20,
+    position: 'absolute',
+    content: '',
+    right: 10,
+    bottom:10,
     '&:hover': {
       backgroundColor: 'rgb(62, 149, 231)'
     }

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

@@ -4,16 +4,16 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { makeStyles, Typography } from '@material-ui/core'
 import { useDispatch } from 'react-redux';
 
-import { actionIsOpen } from '../../../../../../../redux/control/action'
+import { actionIsOpen } from '../../../../../../redux/control/action'
 
 const useStyles = makeStyles({
   container: {
-    paddingLeft: 10,
-    paddingBottom: 3,
-    width: 482,
+    height:'7vh',
+    width: '100%',
     display: 'flex',
     alignContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#ffffff',
   },
   iconArrow: {
     '&:hover': {

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

@@ -5,20 +5,14 @@ import ToolBar from './ToolBar'
 import EditList from './EditList'
 import Delete from './Delete'
 import SubmitBtn from './SubmitBtn';
-import { getContactsMemo } from '../../../../../../redux/contacts/selector'
-import { getChat } from '../../../../../../redux/chat/selector'
-import { muteChat,updateContact } from '../../../../../../api-data';
+import { getContactsMemo } from '../../../../../redux/contacts/selector'
+import { getChat } from '../../../../../redux/chat/selector'
+import { muteChat,updateContact } from '../../../../../api-data';
 
 const useStyles = makeStyles({
-    containerAbsolute: {
-        position: 'absolute',
-        top: 58,
-        width: 506,
-        maxHeight: '905px',
-        minHeight: '905px',
-        overflow: 'hidden',
-        backgroundColor: '#f3f2f2',
-    }
+  editBar: {
+    backgroundColor: '#f3f2f2',
+  }
 })
 
 const EditBar= () => {
@@ -54,16 +48,16 @@ const EditBar= () => {
   }, [Name, LastName, Mute])  
 
     return (
-    <div>
+   <>
+      {openBtn&&<SubmitBtn handleSubmit={handleSubmit}/>}
       <ToolBar />
-      <div className={classes.containerAbsolute}>
+      <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} />
-          {openBtn&&<SubmitBtn handleSubmit={handleSubmit}/>}
       </div>
-   </div>
+   </>
   )
 }
 

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

@@ -8,8 +8,8 @@ import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
 import { useDispatch,useSelector } from "react-redux";
 
-import { actionIsOpen } from '../../../../../../../redux/control/action'
-import { getMessages } from '../../../../../../../redux/messages/selector'
+import { actionIsOpen } from '../../../../../../redux/control/action'
+import { getMessages } from '../../../../../../redux/messages/selector'
 import StaticDatePicker from "./StaticDatePicker";
 
 const SearchBar = styled('div')(({ theme }:any) => ({

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

@@ -9,9 +9,9 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import Search from './Search'
-import AlertInfo from "../../../../../reusableComponents/AlertInfo";
-import { getMessages } from '../../../../../../redux/messages/selector'
-import { timeStamp,timeStampFilter,firstLetter,slicedWord } from '../../../../../../helpers'
+import AlertInfo from "../../../../reusableComponents/AlertInfo";
+import { getMessages } from '../../../../../redux/messages/selector'
+import { timeStamp,timeStampFilter,firstLetter,slicedWord } from '../../../../../helpers'
 
 const useStyles = makeStyles({
   containerAbsolute: {

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

@@ -2,7 +2,7 @@ import { useSelector } from 'react-redux'
 import SearchList from './SearchList'
 import CredentialsList from './CredentialsList'
 import EditBar from './EditBar'
-import { getIsOpen } from '../../../../../redux/control/selector'
+import { getIsOpen } from '../../../../redux/control/selector'
 
 
 const RightListsAndBars = () => {

src/components/HomePage/RightBar/index.tsx

@@ -1,28 +1,22 @@
 import Grid from '@mui/material/Grid'
 import { makeStyles } from '@material-ui/core'
-import HeaderBar from './HeaderBar'
-import ChatBar from './ChatBar'
 import { useSelector } from 'react-redux'
 import { getIsOpen } from '../../../redux/control/selector'
 import { getChatMemo } from '../../../redux/chat/selector'
 
+import HeaderBar from './HeaderBar'
+import ChatBar from './ChatBar'
+import RightListsAndBars from './RightListsAndBars'
+
+
 const useStyles = makeStyles({
-  container: {
-    minHeight: '100vh',
-    maxHeight: '100vh',
+  chatBar: {
     background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
-    paddingBottom:158,
-  },
-  chat: {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    flexWrap: 'nowrap',
-    alignItems: "center",
-    justifyContent: 'center',
+    paddingBottom: 158,
   },
-  moveChat: {
-    marginLeft:506
+  rightListsAndBars: {
+    position: 'relative',
+    backgroundColor:'#ffffff'
   },
   containerBtn: {
     minHeight: '100vh',
@@ -42,14 +36,20 @@ const RightBar = () => {
   const { _id } = useSelector(getChatMemo)
 
     return _id?
-      <Grid item lg={9} className={classes.container}>
-      <HeaderBar/>
-        <div className={classes.chat}>
-          <ChatBar />
-          {isOpen&&isOpen !== 'menu'&&<div className={classes.moveChat}></div>}
-        </div>
+      <Grid item lg={9} style={{display:'flex'}}>
+        <Grid item lg={isOpen&&isOpen !== 'menu'?8:12}>
+          <Grid item lg={12} >
+            <HeaderBar/>
+          </Grid>          
+          <Grid item lg={12} className={classes.chatBar}>
+            <ChatBar />
+          </Grid>
+        </Grid>
+        <Grid item lg={isOpen&&isOpen !== 'menu'?4:0} className={classes.rightListsAndBars} >
+          <RightListsAndBars/>
+        </Grid>          
       </Grid>
-     : <Grid item lg={9} className={classes.container}/>
+     : <Grid item lg={9} className={classes.chatBar}/>
 }
 
 export default RightBar