From e0e79fb0da3c3f867ca34586a30a98a6388fd774 Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Thu, 22 Jan 2026 17:05:06 -0500
Subject: [PATCH] fix: DatePicker calendar popup contrast in dark mode

## Changes
- Add global theme overrides for MUI DatePicker components (MuiPickersPopper,
  MuiDateCalendar, MuiPickersCalendarHeader, MuiDayCalendar, MuiPickersDay)
- Remove inline popper styling from CreateMaintenance component as it's now
  handled globally
- Calendar popup now properly adapts to both light and dark themes using
  theme palette tokens
---
 .../Maintenance/CreateMaintenance/index.jsx   | 24 ---------
 client/src/Utils/Theme/globalTheme.js         | 52 +++++++++++++++++++
 2 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/client/src/Pages/Maintenance/CreateMaintenance/index.jsx b/client/src/Pages/Maintenance/CreateMaintenance/index.jsx
index 3e8090325..a300cc3b5 100644
--- a/client/src/Pages/Maintenance/CreateMaintenance/index.jsx
+++ b/client/src/Pages/Maintenance/CreateMaintenance/index.jsx
@@ -261,30 +261,6 @@ const CreateMaintenance = () => {
 												"&:hover": { backgroundColor: "transparent" },
 											},
 										},
-										// CAIO_REVIEW, entire popper
-										popper: {
-											sx: {
-												"& .MuiPickersDay-root": {
-													color: theme.palette.primary.contrastText,
-													"&.Mui-selected": {
-														backgroundColor: theme.palette.accent.main, // Selected day background
-														color: theme.palette.primary.contrastText, // Selected day text color
-													},
-													"&:hover": {
-														backgroundColor: theme.palette.accent.light, // Hover background
-													},
-													"&.Mui-disabled": {
-														color: theme.palette.secondary.main, // Disabled day color
-													},
-												},
-												"& .MuiDayCalendar-weekDayLabel": {
-													color: theme.palette.primary.contrastText,
-												},
-												"& .MuiPickersCalendarHeader-label": {
-													color: theme.palette.primary.contrastText,
-												},
-											},
-										},
 									}}
 									sx={{}}
 									onChange={(newDate) => {
diff --git a/client/src/Utils/Theme/globalTheme.js b/client/src/Utils/Theme/globalTheme.js
index 58e1a9b63..37143d730 100644
--- a/client/src/Utils/Theme/globalTheme.js
+++ b/client/src/Utils/Theme/globalTheme.js
@@ -687,6 +687,58 @@ const baseTheme = (palette) => ({
 				}),
 			},
 		},
+		// DatePicker calendar popup styling
+		MuiPickersPopper: {
+			styleOverrides: {
+				paper: ({ theme }) => ({
+					backgroundColor: theme.palette.primary.main,
+				}),
+			},
+		},
+		MuiDateCalendar: {
+			styleOverrides: {
+				root: ({ theme }) => ({
+					backgroundColor: theme.palette.primary.main,
+				}),
+			},
+		},
+		MuiPickersCalendarHeader: {
+			styleOverrides: {
+				root: ({ theme }) => ({
+					"& .MuiPickersCalendarHeader-label": {
+						color: theme.palette.primary.contrastText,
+					},
+				}),
+			},
+		},
+		MuiDayCalendar: {
+			styleOverrides: {
+				weekDayLabel: ({ theme }) => ({
+					color: theme.palette.primary.contrastTextTertiary,
+				}),
+			},
+		},
+		MuiPickersDay: {
+			styleOverrides: {
+				root: ({ theme }) => ({
+					color: theme.palette.primary.contrastText,
+					"&:hover": {
+						backgroundColor: theme.palette.tertiary.main,
+					},
+					"&.Mui-selected": {
+						backgroundColor: theme.palette.accent.main,
+						color: theme.palette.accent.contrastText,
+						"&:hover": {
+							backgroundColor: theme.palette.accent.main,
+						},
+					},
+					"&.Mui-disabled": {
+						color: theme.palette.primary.contrastTextTertiary,
+						opacity: 0.5,
+					},
+				}),
+			},
+		},
 		// code ends here.
 
 		// For labels of input fields