From 081ad080a8bb3d9cc4ea91b63b147a8d8e0346a4 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Mon, 2 Sep 2024 15:03:40 -0700
Subject: [PATCH] Add new objects to the color palettes.

---
 Client/src/Pages/Monitors/Home/monitorData.jsx | 10 +++++-----
 Client/src/Utils/Theme/darkTheme.js            |  6 ++++++
 Client/src/Utils/Theme/lightTheme.js           |  6 ++++++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/Client/src/Pages/Monitors/Home/monitorData.jsx b/Client/src/Pages/Monitors/Home/monitorData.jsx
index 9fd97408c..ee167edb4 100644
--- a/Client/src/Pages/Monitors/Home/monitorData.jsx
+++ b/Client/src/Pages/Monitors/Home/monitorData.jsx
@@ -32,7 +32,7 @@ export const buildData = (monitors, isAdmin, navigate) => {
 
   data.rows = monitors.map((monitor, idx) => {
     let uptimePercentage = "";
-    let percentageColor = theme.palette.success.main; 
+    let percentageColor = theme.palette.percentage.green; 
 
     if (monitor.uptimePercentage !== undefined) {
       uptimePercentage =
@@ -41,13 +41,13 @@ export const buildData = (monitors, isAdmin, navigate) => {
           : (monitor.uptimePercentage * 100).toFixed(2);
 
           if (monitor.uptimePercentage < 0.25) {
-            percentageColor = theme.palette.error.text;
+            percentageColor = theme.palette.percentage.red;
           } else if (monitor.uptimePercentage >= 0.25 && monitor.uptimePercentage < 0.5) {
-            percentageColor = theme.palette.warning.main;
+            percentageColor = theme.palette.percentage.orange;
           } else if (monitor.uptimePercentage >= 0.5 && monitor.uptimePercentage < 0.75) {
-            percentageColor = theme.palette.warning.light;
+            percentageColor = theme.palette.percentage.yellow;
           } else if (monitor.uptimePercentage >= 0.75 && monitor.uptimePercentage <= 1) {
-            percentageColor = theme.palette.success.main;
+            percentageColor = theme.palette.percentage.green;
           }
         }
 
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index 15df7c1b8..3b77966cd 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -57,6 +57,12 @@ const darkTheme = createTheme({
       bg: "#1E1E1E",
       border: "#e88c30",
     },
+    percentage: {
+      red: "#d32f2f",
+      orange: "#e88c30",
+      yellow: "#ffd600",
+      green: "#079455",
+    },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     divider: border.light,
     other: {
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index bb83d09b2..67c2d72e5 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -54,6 +54,12 @@ const lightTheme = createTheme({
       bg: "#ffecbc",
       border: "#fec84b",
     },
+    percentage: {
+      red: "#d32f2f",
+      orange: "#ec8013",
+      yellow: "#ffb800",
+      green: "#079455",
+    },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     divider: border.light,
     other: {