Added the status color to monitor utils.

client/src/Hooks/useMonitorUtils.js

@@ -1,6 +1,8 @@
 import { useCallback } from "react";
+import { useTheme } from "@mui/material";
 
 const useMonitorUtils = () => {
+
 	const getMonitorWithPercentage = useCallback((monitor, theme) => {
 		let uptimePercentage = "";
 		let percentageColor = "";
@@ -36,7 +38,16 @@ const useMonitorUtils = () => {
 		return monitor?.status == true ? "up" : "down";
 	}, []);
 
-	return { getMonitorWithPercentage, determineState };
+	const theme = useTheme();
+
+	const statusColor = {
+		up: theme.palette.success.lowContrast,
+		down: theme.palette.error.lowContrast,
+		paused: theme.palette.warning.lowContrast,
+		pending: theme.palette.warning.lowContrast,
+	};
+
+	return { getMonitorWithPercentage, determineState, statusColor };
 };
 
 export { useMonitorUtils };

client/src/Pages/Uptime/Configure/index.jsx

@@ -214,14 +214,7 @@ const Configure = () => {
 		setIsNotificationModalOpen(false);
 	};
 
-	const statusColor = {
-		up: theme.palette.success.main,
-		down: theme.palette.error.main,
-		paused: theme.palette.error.main,
-		pending: theme.palette.warning.main,
-	};
-
-	const { determineState } = useMonitorUtils();
+	const { determineState, statusColor } = useMonitorUtils();
 
 	const { t } = useTranslation();