mkae fixes

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

@@ -9,6 +9,7 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import Brightness3Icon from '@mui/icons-material/Brightness3'; 
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import BugReportIcon from '@mui/icons-material/BugReport';
+import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
 import Switch from '@mui/material/Switch';
 import { makeStyles } from '@material-ui/core'
 import { useDispatch } from 'react-redux';
@@ -65,13 +66,20 @@ const MenuBar = ({handleSelectedMenu,nightMode}:IContactsList) => {
   return (
     <div className={classes.overlay} id='overlay'>
       <Paper className={classes.container}>
-      <MenuList className={classes.list}>
-        <MenuItem  onClick={() => handleSelectedMenu(1)}>
+       <MenuList className={classes.list}>
+        <MenuItem  onClick={() => handleSelectedMenu(3)}>
           <ListItemIcon className={classes.listIcon}>
             <PermContactCalendarIcon fontSize="medium" />
           </ListItemIcon>
+          <ListItemText>New Contact</ListItemText>
+          </MenuItem>          
+        <MenuItem  onClick={() => handleSelectedMenu(1)}>
+          <ListItemIcon className={classes.listIcon}>
+            <PersonAddAltIcon fontSize="medium" />
+          </ListItemIcon>
           <ListItemText>Contacts</ListItemText>
-        </MenuItem>        
+        </MenuItem>
+ 
         <MenuItem onClick={() => handleSelectedMenu(2)}>
           <ListItemIcon className={classes.listIcon}>
             <SettingsIcon fontSize="medium" />

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

@@ -39,8 +39,9 @@ const useStyles = makeStyles({
 interface IDeleteModal {
   setModal: (a: boolean) => void,
   index: number,
+  setIndex: any
 }
-const DeleteModal = ({setModal,index}:IDeleteModal) => {
+const DeleteModal = ({setModal,index,setIndex}:IDeleteModal) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const handleDeleteModal = (e: any) => {
@@ -48,6 +49,7 @@ const DeleteModal = ({setModal,index}:IDeleteModal) => {
     if (id === 'overlay' || id === 'cancel') return setModal(false)
     if (id === 'delete') {
       removeUserAvatar(index)
+      setIndex(index-1)
       setModal(false)
       dispatch(asyncCurrentUser())
     }

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

@@ -75,10 +75,12 @@ const SettingsPicture = () => {
   const [modal, setModal] = useState<boolean>(false);
   const [index, setIndex] = useState<number>(0);
   const handleClick = (): void => setModal(true)
+
   return (
-    <div className={classes.container}>
-      {modal&&<DeleteModal setModal={setModal} index={index}/>}
-      <Carousel onChange={(i)=> setIndex(i)}>
+  <div className={classes.container}>
+    {modal &&
+    <DeleteModal setModal={setModal} index={index} setIndex={setIndex}/>}
+      <Carousel onChange={(i)=> setIndex(i)} selectedItem={index}>
         {avatarsArr.map(({ avatarUrl, updatedAt }) =>
           <div key={avatarUrl}>
             <img alt='pic' src={`http://localhost:3000/${avatarUrl}`}/>
@@ -96,7 +98,7 @@ const SettingsPicture = () => {
           <DeleteOutlineIcon fontSize='medium'/>  
         </Avatar>     
       </div>}
-    </div>
+  </div>
   )
 }
 

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

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import PersonIcon from '@mui/icons-material/Person';
+import ChatIcon from '@mui/icons-material/Chat';
 import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 import CloseIcon from '@mui/icons-material/Close';
 import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
@@ -85,20 +85,20 @@ const  SmallMenuBar = ({handleSelectedMenu,setIsMenuSm}:ISmallMenuBar) => {
         open={open}
         onClose={handleClose}
       >
-        <MenuItem  onClick={() => {
-          handleClose();
-          handleSelectedMenu(1)
-        }}>
-            <PersonIcon/>
-            New Message
-        </MenuItem>
         <MenuItem  onClick={() => {
           handleClose();
           handleSelectedMenu(3)
         }}>
             <PersonAddAltIcon/>
             New Contact
-         </MenuItem>        
+        </MenuItem>          
+        <MenuItem  onClick={() => {
+          handleClose();
+          handleSelectedMenu(1)
+        }}>
+            <ChatIcon/>
+            New Message
+        </MenuItem>      
        </StyledMenu>    
     </div>
   );

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

@@ -8,7 +8,6 @@ const useStyles = makeStyles({
         right: 20,
         top: '70vh',
         width: 56,
-        zIndex:200
     },    
     avatarArrow: {
         cursor:'pointer',

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

@@ -43,6 +43,23 @@ const useStyles = makeStyles({
       width: "100%",
       display: "flex",
       justifyContent: 'center',
+      '&::-webkit-scrollbar': {
+        width: '0.4em'
+       },
+     '&::-webkit-scrollbar-track': {
+       boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+       webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+       backgroundColor: '#eceeec',
+      },
+     '&::-webkit-scrollbar-thumb': {
+       backgroundColor: '#ccc8c8',
+      },
+     "&::-webkit-scrollbar-thumb:focus": {
+       backgroundColor: "#959595",
+      },
+      "&::-webkit-scrollbar-thumb:active": {
+       backgroundColor: "#959595",
+     },
   },
   messagesEmpty: {
       overflowY: "hidden",

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

@@ -14,7 +14,24 @@ const useStyles = makeStyles({
   scrollContainer: {
     overflowY: 'scroll',
     maxHeight: '93vh',
-    width:'100%',
+    width: '100%',
+    '&::-webkit-scrollbar': {
+      width: '0.4em'
+    },
+    '&::-webkit-scrollbar-track': {
+      boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+      webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+      backgroundColor: '#eceeec',
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: '#ccc8c8',
+    },
+    "&::-webkit-scrollbar-thumb:focus": {
+      backgroundColor: "#959595",
+    },
+    "&::-webkit-scrollbar-thumb:active": {
+      backgroundColor: "#959595",
+    },    
   },
 })
 

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

@@ -23,6 +23,23 @@ const useStyles = makeStyles({
   list: {
     maxHeight: '93vh',
     overflowY: 'scroll',
+    '&::-webkit-scrollbar': {
+      width: '0.4em'
+    },
+    '&::-webkit-scrollbar-track': {
+      boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+      webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+      backgroundColor: '#eceeec',
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: '#ccc8c8',
+    },
+    "&::-webkit-scrollbar-thumb:focus": {
+      backgroundColor: "#959595",
+    },
+    "&::-webkit-scrollbar-thumb:active": {
+      backgroundColor: "#959595",
+    },    
   },
   listItem: {
     '&:hover': {