Name props according to purpose rather than value.

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

@@ -40,7 +40,7 @@ export const buildData = (monitors, isAdmin, navigate) => {
 
   data.rows = monitors.map((monitor, idx) => {
     let uptimePercentage = "";
-    let percentageColor = theme.palette.percentage.q4; 
+    let percentageColor = theme.palette.percentage.uptimeExcellent; 
 
     // Determine uptime percentage and color based on the monitor's uptimePercentage value
     if (monitor.uptimePercentage !== undefined) {
@@ -51,12 +51,12 @@ export const buildData = (monitors, isAdmin, navigate) => {
 
       percentageColor =
         monitor.uptimePercentage < 0.25
-          ? theme.palette.percentage.q1
+          ? theme.palette.percentage.uptimePoor
           : monitor.uptimePercentage < 0.5
-          ? theme.palette.percentage.q2
+          ? theme.palette.percentage.uptimeFair
           : monitor.uptimePercentage < 0.75
-          ? theme.palette.percentage.q3
-          : theme.palette.percentage.q4;
+          ? theme.palette.percentage.uptimeGood
+          : theme.palette.percentage.uptimeExcellent;
     }
 
     const params = {

Client/src/Utils/Theme/darkTheme.js

@@ -58,10 +58,10 @@ const darkTheme = createTheme({
       border: "#e88c30",
     },
     percentage: {
-      q1: "#d32f2f",
-      q2: "#e88c30",
-      q3: "#ffd600",
-      q4: "#079455",
+      uptimePoor: "#d32f2f",
+      uptimeFair: "#e88c30",
+      uptimeGood: "#ffd600",
+      uptimeExcellent: "#079455",
     },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     divider: border.light,

Client/src/Utils/Theme/lightTheme.js

@@ -55,10 +55,10 @@ const lightTheme = createTheme({
       border: "#fec84b",
     },
     percentage: {
-      q1: "#d32f2f",
-      q2: "#ec8013",
-      q3: "#ffb800",
-      q4: "#079455",
+      uptimePoor: "#d32f2f",
+      uptimeFair: "#ec8013",
+      uptimeGood: "#ffb800",
+      uptimeExcellent: "#079455",
     },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     divider: border.light,