12122023

src/layout/MainLayout/Header/HeaderContent/MobileSection.js

@@ -50,7 +50,12 @@ const MobileSection = () => {
     <>
       <Box sx={{ flexShrink: 0, ml: 0.75 }}>
         <IconButton
-          sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+          // sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+          sx={{ color: '#fff', bgcolor: 'transparent', ml: { xs: 0, lg: -2 },
+          fontSize:'25px',
+            ':hover':{
+              color: '#fff', bgcolor: 'transparent'
+            } }}
           aria-label="open more menu"
           ref={anchorRef}
           aria-controls={open ? 'menu-list-grow' : undefined}

src/layout/MainLayout/Header/HeaderContent/Notification.js

@@ -71,6 +71,7 @@ const Notification = () => {
 
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+       <Tooltip title='Notifications'>
       <IconButton
         // color="secondary"
         // variant="light"
@@ -103,6 +104,7 @@ const Notification = () => {
           <BellOutlined />
         </Badge>
       </IconButton>
+      </Tooltip>
       <Popper
         placement={matchesXs ? 'bottom' : 'bottom-end'}
         open={open}

src/layout/MainLayout/Header/HeaderContent/Profile/index.js

@@ -96,6 +96,7 @@ navigate('/login')
 
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+      <Tooltip title='Profile'>
       <ButtonBase
         sx={{
           p: 0.25,
@@ -120,6 +121,7 @@ navigate('/login')
             </Typography>
         </Stack>
       </ButtonBase>
+      </Tooltip>
       <Popper
         placement="bottom-end"
         open={open}

src/layout/MainLayout/Header/HeaderContent/index.js

@@ -235,11 +235,16 @@ const navigate = useNavigate()
         </Box>
 
 
-
+     
       <Notification />
+    
       {/* <Message /> */}
-      {!matchesXs && <Profile />}
-      {matchesXs && <MobileSection />}
+      {/* {!matchesXs && <Profile />}
+      {matchesXs && <MobileSection />} */}
+      <Tooltip title='Notifications'>
+
+      <Profile />
+      </Tooltip>
       </Stack>
       </Stack>
     </>