Merge pull request #3177 from bluewave-labs/fix/datepicker-dark-mode-contrast

fix: DatePicker calendar popup contrast in dark mode

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) => {

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