From 8048dae81cac44625dc83c0b308fbf61b2c9a23e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 20 Jan 2025 15:26:15 -0800
Subject: [PATCH] color fixes

---
 .../src/Components/Charts/BarChart/index.jsx  |  6 ++-
 .../Charts/MonitorDetailsAreaChart/index.jsx  |  9 ++--
 .../src/Components/Inputs/TextInput/index.jsx |  5 +++
 .../TabPanels/Account/ProfilePanel.jsx        |  4 +-
 .../TabPanels/Account/TeamPanel.jsx           |  2 +-
 .../Maintenance/CreateMaintenance/index.jsx   | 27 +++++++++++-
 .../Uptime/Details/Charts/DownBarChart.jsx    | 42 ++++++++++---------
 .../Uptime/Details/Charts/UpBarChart.jsx      |  2 +-
 .../Uptime/Details/PaginationTable/index.jsx  | 21 +++++++++-
 Client/src/Utils/Theme/constants.js           |  6 +++
 10 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx
index 6ed2a7ebd..101afe648 100644
--- a/Client/src/Components/Charts/BarChart/index.jsx
+++ b/Client/src/Components/Charts/BarChart/index.jsx
@@ -39,7 +39,9 @@ const BarChart = ({ checks = [] }) => {
 		>
 			{checks.map((check, index) =>
 				check === "placeholder" ? (
-					/* TODO what is the purpose of this box? */
+					/* TODO what is the purpose of this box? 	*/
+					// CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars
+					// even if there are less than 25 checks
 					<Box
 						key={`${check}-${index}`}
 						position="relative"
@@ -143,7 +145,7 @@ const BarChart = ({ checks = [] }) => {
 							position="relative"
 							width="9px"
 							height="100%"
-							backgroundColor={theme.palette.tertiary.main}
+							backgroundColor={theme.palette.primary.lowContrast} // CAIO_REVIEW
 							sx={{
 								borderRadius: theme.spacing(1.5),
 								/* 
diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index 10648a3f3..0b959a392 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -139,7 +139,6 @@ const MonitorDetailsAreaChart = ({ checks, dateRange }) => {
 	const theme = useTheme();
 	const memoizedChecks = useMemo(() => checks, [checks[0]]);
 	const [isHovered, setIsHovered] = useState(false);
-
 	return (
 		<ResponsiveContainer
 			width="100%"
@@ -176,12 +175,12 @@ const MonitorDetailsAreaChart = ({ checks, dateRange }) => {
 					>
 						<stop
 							offset="0%"
-							stopColor={theme.palette.primary.main}
+							stopColor={theme.palette.accent.main}
 							stopOpacity={0.8}
 						/>
 						<stop
 							offset="100%"
-							stopColor={theme.palette.primary.light}
+							stopColor={theme.palette.accent.light}
 							stopOpacity={0}
 						/>
 					</linearGradient>
@@ -202,10 +201,10 @@ const MonitorDetailsAreaChart = ({ checks, dateRange }) => {
 				<Area
 					type="monotone"
 					dataKey="avgResponseTime"
-					stroke={theme.palette.primary.main}
+					stroke={theme.palette.accent.main} // CAIO_REVIEW
 					fill="url(#colorUv)"
 					strokeWidth={isHovered ? 2.5 : 1.5}
-					activeDot={{ stroke: theme.palette.primary.main, r: 5 }}
+					activeDot={{ stroke: theme.palette.accent.main, r: 5 }} // CAIO_REVIEW
 				/>
 			</AreaChart>
 		</ResponsiveContainer>
diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx
index 64d8e27aa..38a6b6161 100644
--- a/Client/src/Components/Inputs/TextInput/index.jsx
+++ b/Client/src/Components/Inputs/TextInput/index.jsx
@@ -13,7 +13,12 @@ const getSx = (theme, type, maxWidth) => {
 			"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
 				borderColor: theme.palette.accent.main, // Adjust focus border color
 			},
+			"&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+				borderColor: theme.palette.primary.contrastText, // CAIO_REVIEW
+				opacity: 0.5,
+			},
 		},
+
 		"& .MuiFormHelperText-root": {
 			position: "absolute",
 			bottom: `-${theme.spacing(24)}`,
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 5eccd0569..e20cb13a4 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -317,14 +317,14 @@ const ProfilePanel = () => {
 							sx={{ marginRight: "8px" }}
 						/>
 						<Button
-							variant="outlined"
+							variant="contained" // CAIO_REIVEW
 							color="error"
 							onClick={handleDeletePicture}
 						>
 							Delete
 						</Button>
 						<Button
-							variant="outlined"
+							variant="contained" // CAIO_REVIEW
 							color="accent"
 							onClick={openPictureModal}
 						>
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 59e19cfc2..7b8143356 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -289,7 +289,7 @@ const TeamPanel = () => {
 				>
 					<LoadingButton
 						loading={isSendingInvite}
-						variant="text"
+						variant="contained" // CAIO_REVIEW
 						color="error"
 						onClick={closeInviteModal}
 					>
diff --git a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
index ecd8d8b01..7b8efa20d 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
@@ -136,7 +136,7 @@ const CreateMaintenance = () => {
 				const response = await networkService.getMonitorsByTeamId({
 					authToken: authToken,
 					teamId: user.teamId,
-					limit: -1,
+					limit: null,
 					types: ["http", "ping", "pagespeed"],
 				});
 				const monitors = response.data.data.monitors;
@@ -360,7 +360,6 @@ const CreateMaintenance = () => {
 								<DatePicker
 									id="startDate"
 									disablePast
-									label="Date"
 									disableHighlightToday
 									value={form.startDate}
 									slots={{ openPickerIcon: CalendarIcon }}
@@ -400,6 +399,30 @@ 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.primary.lowContrast, // 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/Pages/Uptime/Details/Charts/DownBarChart.jsx b/Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx
index 28b33d61a..ae2adda0f 100644
--- a/Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx
+++ b/Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx
@@ -53,26 +53,28 @@ const DownBarChart = memo(({ monitor, type, onBarHover }) => {
 					maxBarSize={7}
 					background={{ fill: "transparent" }}
 				>
-					{monitor.groupedDownChecks.map((entry, index) => (
-						<Cell
-							key={`cell-${entry.time}`}
-							fill={
-								hoveredBarIndex === index
-									? theme.palette.error.main
-									: chartHovered
-										? theme.palette.error.contrastText
-										: theme.palette.error.main
-							}
-							onMouseEnter={() => {
-								setHoveredBarIndex(index);
-								onBarHover(entry);
-							}}
-							onMouseLeave={() => {
-								setHoveredBarIndex(null);
-								onBarHover({ time: null, totalChecks: 0 });
-							}}
-						/>
-					))}
+					{monitor.groupedDownChecks.map((entry, index) => {
+						return (
+							<Cell
+								key={`cell-${entry.time}`}
+								fill={
+									hoveredBarIndex === index
+										? theme.palette.error.main
+										: chartHovered
+											? theme.palette.error.light // CAIO_REVIEW
+											: theme.palette.error.main
+								}
+								onMouseEnter={() => {
+									setHoveredBarIndex(index);
+									onBarHover(entry);
+								}}
+								onMouseLeave={() => {
+									setHoveredBarIndex(null);
+									onBarHover({ time: null, totalChecks: 0 });
+								}}
+							/>
+						);
+					})}
 				</Bar>
 			</BarChart>
 		</ResponsiveContainer>
diff --git a/Client/src/Pages/Uptime/Details/Charts/UpBarChart.jsx b/Client/src/Pages/Uptime/Details/Charts/UpBarChart.jsx
index 081049258..223dc8eef 100644
--- a/Client/src/Pages/Uptime/Details/Charts/UpBarChart.jsx
+++ b/Client/src/Pages/Uptime/Details/Charts/UpBarChart.jsx
@@ -69,7 +69,7 @@ const UpBarChart = memo(({ monitor, type, onBarHover }) => {
 									hoveredBarIndex === index
 										? theme.palette[themeColor].main
 										: chartHovered
-											? theme.palette[themeColor].accent
+											? theme.palette[themeColor].light // CAIO_REVIEW
 											: theme.palette[themeColor].main
 								}
 								onMouseEnter={() => {
diff --git a/Client/src/Pages/Uptime/Details/PaginationTable/index.jsx b/Client/src/Pages/Uptime/Details/PaginationTable/index.jsx
index ea98f7b8a..93e9532c5 100644
--- a/Client/src/Pages/Uptime/Details/PaginationTable/index.jsx
+++ b/Client/src/Pages/Uptime/Details/PaginationTable/index.jsx
@@ -19,8 +19,9 @@ import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
 import { logger } from "../../../../Utils/Logger";
 import { formatDateWithTz } from "../../../../Utils/timeUtils";
-
+import { useTheme } from "@emotion/react";
 const PaginationTable = ({ monitorId, dateRange }) => {
+	const theme = useTheme();
 	const { authToken } = useSelector((state) => state.auth);
 	const [checks, setChecks] = useState([]);
 	const [checksCount, setChecksCount] = useState(0);
@@ -96,7 +97,23 @@ const PaginationTable = ({ monitorId, dateRange }) => {
 	return (
 		<>
 			<TableContainer component={Paper}>
-				<Table>
+				<Table
+					sx={{
+						"&.MuiTable-root  :is(.MuiTableHead-root, .MuiTableBody-root) :is(th, td)": {
+							paddingLeft: theme.spacing(8),
+						},
+						"& :is(th)": {
+							backgroundColor: theme.palette.secondary.main,
+							color: theme.palette.secondary.contrastText,
+							fontWeight: 600,
+							fontSize: "12px",
+						},
+						"& :is(td)": {
+							backgroundColor: theme.palette.primary.main,
+							color: theme.palette.primary.contrastTextSecondary,
+						},
+					}}
+				>
 					<TableHead>
 						<TableRow>
 							<TableCell>Status</TableCell>
diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js
index 0b9bb76a9..6e962dfef 100644
--- a/Client/src/Utils/Theme/constants.js
+++ b/Client/src/Utils/Theme/constants.js
@@ -1,3 +1,5 @@
+import { lighten } from "@mui/material/styles"; // CAIO_REVIEW
+
 const typographyBase = 14;
 
 /* TODO
@@ -122,6 +124,10 @@ const newSemanticColors = {
 			light: newColors.blueBlueWave,
 			dark: newColors.blueBlueWave,
 		},
+		light: {
+			light: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW
+			dark: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW
+		},
 		contrastText: {
 			light: newColors.offWhite,
 			dark: newColors.offWhite,