Feature/UI changes

frontend/src/app/pages/BasicCalendar/BasicCalendar.css

@@ -37,6 +37,11 @@
     background-color: var(--mui-palette-primary-main);
 }
 
+.rbc-event-content{
+    background-color: var(--mui-palette-primary-main);
+}
+
+
 .rbc-off-range-bg {
     background-color: rgba(200, 200, 200, 0.5); /* Light gray */
 }

frontend/src/app/pages/Notifications/Notifications.tsx

@@ -131,7 +131,7 @@ const Notifications: React.FC = () => {
       <Typography variant="h5" gutterBottom>
         Notifications
       </Typography>
-      <Button variant="outlined" onClick={markAllAsRead}>
+      <Button variant="contained" color="inherit" onClick={markAllAsRead}>
         Mark All as Read
       </Button>
       <Button variant="contained" color="primary" onClick={() => setOpen(true)} style={{ marginLeft: '16px' }}>

frontend/src/app/pages/VolunteerManagement/VolunteerManagement.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState} from 'react';
 import { Box, Tab, Tabs } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import VolunteerRoles from './VolunteerRoles';
 import { useAuth } from '@lib/context/AuthContext';
 import { useVolunteerRoleStore } from '@stores/useVolunteerRoleStore';
@@ -30,6 +31,7 @@ const VolunteerManagement: React.FC = () => {
     const { user } = useAuth();
     const { fetchVolunteerRoles } = useVolunteerRoleStore();
     const { fetchInit } = useManageUserStore();
+    const theme = useTheme();
 
     useEffect(() => {
         if (user) {
@@ -48,6 +50,12 @@ const VolunteerManagement: React.FC = () => {
                 value={tabValue}
                 onChange={handleTabChange}
                 centered
+                sx={{
+                  '& .Mui-selected': {
+                    color: theme.palette.text.primary
+                  }
+                }}
+
             >
                 <Tab label="Manage Users" />
                 <Tab label="Volunteer Roles" />

frontend/src/components/layout/Sidebar.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import AppBar from '@mui/material/AppBar';
+import { ListItemButton } from '@mui/material';
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
 import Divider from '@mui/material/Divider';
@@ -17,7 +18,7 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
 import BHASLogo from '@assets/BHAS-Logo.png';
-import { Link, Outlet } from 'react-router-dom';
+import { Link, Outlet, useLocation } from 'react-router-dom';
 import { useBackendUserStore } from '@stores/useBackendUserStore';
 
 type SideBarItem = {
@@ -60,6 +61,7 @@ const Dashboard: React.FC = () => {
   const [mobileOpen, setMobileOpen] = React.useState(false);
   const [isClosing, setIsClosing] = React.useState(false);
   const { backendUser } = useBackendUserStore();
+  const location = useLocation();
 
   const handleDrawerClose = () => {
     setIsClosing(true);
@@ -83,33 +85,28 @@ const Dashboard: React.FC = () => {
       <List>
         {sideBarItems.map((item, index) => {
           if (!item.admin || backendUser?.is_admin) {
+            const isActive = location.pathname === item.route;
             return <ListItem key={index} disablePadding>
-                <Button
-                  component={Link}
-                  variant='contained'
-                  sx={{
-                    margin: '0.5rem',
-                    width: '100%',
-                    height: '4rem',
-                    fontWeight: 'bold',
-                  }}
-                  to={item.route}
-                >
-                  <div
-                    style={{
+                  <ListItemButton
+                    component={Link}
+                    to={item.route}
+                    sx={{
+                      margin: '0.5rem',
+                      height: '4rem',
                       display: 'flex',
                       gap: '0.5rem',
                       alignItems: 'center',
-                      justifyContent: 'center',
+                      borderRadius: '8px',
+                      backgroundColor: isActive ? 'action.selected' : 'transparent',
                     }}
                   >
                     {item.icon}
                     <div style={{ whiteSpace: 'pre-line' }} >
                       {item.name}
                     </div>
-                  </div>
-                </Button>
-              </ListItem>;
+                  {/* </div> */}
+                </ListItemButton>
+              </ListItem>
           }
         })}
       </List>

frontend/src/theme/baseTheme.ts

@@ -13,3 +13,4 @@ export const baseTheme: ThemeOptions = {
     },
   },
 }
+

frontend/src/theme/darkTheme.ts

@@ -31,13 +31,13 @@ export const darkTheme = createTheme({
     },
     background: {
       default: '#26272b',
-      paper: '#1b1c1f',
-      base1: '#1b1c1f',
+      paper: '#333333',
+      base1: '#26272b',
     },
     notification: {
       unread: '#444746',
       read: '#000',
-      background: '#1e1e1e'
+      background: '#181818'
     }
   },
 });

frontend/src/theme/lightTheme.ts

@@ -40,12 +40,11 @@ export const lightTheme = createTheme({
     }
   },
   components: {
-    ...baseTheme.components,
-    MuiButton: {
+    MuiListItemButton: {
       styleOverrides: {
-        contained: {
+        root: {
           '&:hover': {
-            color: '#fff',
+            color: 'black'
           }
         }
       }