Change color of percentage according to uptime of monitor.

Client/src/Components/Alert/index.jsx

@@ -31,7 +31,7 @@ const icons = {
 
 const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
   const theme = useTheme();
-  const { text, light, border } = theme.palette[variant];
+  const { text, bg, border } = theme.palette[variant];
   const icon = icons[variant];
 
   return (
@@ -45,7 +45,7 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
         padding: hasIcon
           ? theme.spacing(8)
           : `${theme.spacing(4)} ${theme.spacing(8)}`,
-        backgroundColor: light,
+        backgroundColor: bg,
         border: `solid 1px ${border}`,
         borderRadius: theme.shape.borderRadius,
       }}

Client/src/Pages/Monitors/Home/monitorData.jsx

@@ -32,21 +32,30 @@ export const buildData = (monitors, isAdmin, navigate) => {
 
   data.rows = monitors.map((monitor, idx) => {
     let uptimePercentage = "";
+    let percentageColor = theme.palette.success.main; 
+
     if (monitor.uptimePercentage !== undefined) {
       uptimePercentage =
         monitor.uptimePercentage === 0
-          ? "0" 
-          : (monitor.uptimePercentage * 100).toFixed(2); 
-    }
+          ? "0"
+          : (monitor.uptimePercentage * 100).toFixed(2);
+
+          if (monitor.uptimePercentage < 0.25) {
+            percentageColor = theme.palette.error.text;
+          } else if (monitor.uptimePercentage >= 0.25 && monitor.uptimePercentage < 0.5) {
+            percentageColor = theme.palette.warning.main;
+          } else if (monitor.uptimePercentage >= 0.5 && monitor.uptimePercentage < 0.75) {
+            percentageColor = theme.palette.warning.light;
+          } else if (monitor.uptimePercentage >= 0.75 && monitor.uptimePercentage <= 1) {
+            percentageColor = theme.palette.success.main;
+          }
+        }
 
     const params = {
       url: monitor.url,
       title: monitor.name,
       percentage: uptimePercentage,
-      percentageColor:
-        monitor.status === true
-          ? theme.palette.success.main
-          : theme.palette.error.text,
+      percentageColor, 
       status: monitor.status === true ? "up" : "down",
     };
 

Client/src/Utils/Theme/darkTheme.js

@@ -53,7 +53,7 @@ const darkTheme = createTheme({
     warning: {
       text: "#e88c30",
       main: "#FF9F00",
-      light: "#27272a",
+      light: "#ffd600",
       bg: "#1E1E1E",
       border: "#e88c30",
     },