08122023

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

@@ -53,7 +53,7 @@ const Notification = () => {
   const matchesXs = useMediaQuery(theme.breakpoints.down('md'));
 
   const anchorRef = useRef(null);
-  const [read, setRead] = useState(2);
+  const [read, setRead] = useState(0);
   const [open, setOpen] = useState(false);
   const handleToggle = () => {
     setOpen((prevOpen) => !prevOpen);
@@ -72,16 +72,34 @@ const Notification = () => {
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
       <IconButton
-        color="secondary"
-        variant="light"
-        sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+        // color="secondary"
+        // variant="light"
+        // sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+        sx={{ color: '#fff',
+        fontSize:'20px',
+        //  bgcolor: open ? iconBackColorOpen : iconBackColor 
+        ':hover':{
+        bgcolor:'transparent',
+        color: '#fff',
+        },
+        // bgcolor:'transparent'
+        }}
+       
         aria-label="open profile"
         ref={anchorRef}
         aria-controls={open ? 'profile-grow' : undefined}
         aria-haspopup="true"
-        onClick={handleToggle}
+        // onClick={handleToggle}
       >
-        <Badge badgeContent={read} color="primary">
+        <Badge badgeContent={read} 
+        // color="primary"
+        sx={{
+          "& .MuiBadge-badge": {
+            color: "#662582",
+            backgroundColor: "white"
+          }
+        }}
+        >
           <BellOutlined />
         </Badge>
       </IconButton>

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

@@ -99,13 +99,13 @@ navigate('/login')
       <ButtonBase
         sx={{
           p: 0.25,
-          bgcolor: open ? iconBackColorOpen : 'transparent',
+          // bgcolor: open ? iconBackColorOpen : 'transparent',
           borderRadius: 1,
-          '&:hover': { bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter' },
-          '&:focus-visible': {
-            outline: `2px solid ${theme.palette.secondary.dark}`,
-            outlineOffset: 2
-          }
+          // '&:hover': { bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter' },
+          // '&:focus-visible': {
+          //   outline: `2px solid ${theme.palette.secondary.dark}`,
+          //   outlineOffset: 2
+          // }
         }}
         aria-label="open profile"
         ref={anchorRef}

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

@@ -55,17 +55,25 @@ const navigate = useNavigate()
       {/* {!matchesXs && <Search />} */}
       <Stack
         width='100%'
-        direction='row' justifyContent='flex-end' spacing={2} alignItems='center'>
+        direction='row' justifyContent='space-between' spacing={2} alignItems='center'>
       {/* {!matchesXs && megaMenu} */}
+      <Typography variant='h5' sx={{ml:2,color:'#fff'}}>{localStorage.getItem('firstname') || ''}</Typography>
       {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
+      <Stack direction={'row'} spacing={2}>
       <Box sx={{ flexShrink: 0, ml: 0.75 }}>
           <Tooltip title='Quick Menu'>
             <IconButton
-              color="secondary"
-              variant="light"
-              sx={{
-                color: 'text.primary',
-                bgcolor: open ? iconBackColorOpen : iconBackColor
+              // color="secondary"
+              // variant="light"
+              // sx={{
+              //   color: 'text.primary',
+              //   bgcolor: open ? iconBackColorOpen : iconBackColor
+              // }}
+              sx={{ color: '#fff',
+              fontSize:'20px',
+              //  bgcolor: open ? iconBackColorOpen : iconBackColor 
+              bgcolor:'transparent',
+              // border:'1px solid #fff'
               }}
               aria-label="open profile"
               // ref={anchorRef}
@@ -233,6 +241,7 @@ const navigate = useNavigate()
       {!matchesXs && <Profile />}
       {matchesXs && <MobileSection />}
       </Stack>
+      </Stack>
     </>
   );
 };

src/layout/MainLayout/Header/index.js

@@ -43,9 +43,14 @@ const Header = () => {
           aria-label="open drawer"
           onClick={() => dispatch(openDrawer(!drawerOpen))}
           edge="start"
-          color="secondary"
-          variant="light"
-          sx={{ color: 'text.primary', bgcolor: drawerOpen ? iconBackColorOpen : iconBackColor, ml: { xs: 0, lg: -2 } }}
+          // color="secondary"
+          // variant="light"
+          // sx={{ color: 'text.primary', bgcolor: drawerOpen ? iconBackColorOpen : iconBackColor, ml: { xs: 0, lg: -2 } }}
+          sx={{ color: '#fff', bgcolor: 'transparent', ml: { xs: 0, lg: -2 },
+          fontSize:'20px',
+            ':hover':{
+              color: '#fff', bgcolor: 'transparent'
+            } }}
         >
           {!drawerOpen ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
         </IconButton>
@@ -62,8 +67,9 @@ const Header = () => {
     sx: {
       borderBottom: `1px solid ${theme.palette.divider}`,
       zIndex: 1200,
-      width: isHorizontal ? '100%' : drawerOpen ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' }
+      width: isHorizontal ? '100%' : drawerOpen ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' },
       // boxShadow: theme.customShadows.z1
+      bgcolor:'#662582'
     }
   };