From d75b494d58b1f8aa67d45312a2edacd22d32c6c3 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Sun, 1 Sep 2024 12:25:23 -0700
Subject: [PATCH] Change color of percentage according to uptime of monitor.

---
 Client/src/Components/Alert/index.jsx         |  4 ++--
 .../src/Pages/Monitors/Home/monitorData.jsx   | 23 +++++++++++++------
 Client/src/Utils/Theme/darkTheme.js           |  2 +-
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx
index eb5fbd13b..cafd58451 100644
--- a/Client/src/Components/Alert/index.jsx
+++ b/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,
       }}
diff --git a/Client/src/Pages/Monitors/Home/monitorData.jsx b/Client/src/Pages/Monitors/Home/monitorData.jsx
index d3fd66958..9fd97408c 100644
--- a/Client/src/Pages/Monitors/Home/monitorData.jsx
+++ b/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",
     };
 
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index 15df7c1b8..a39fb4c1c 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/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",
     },