From 60ffc2f1d218b007b5bee0788b1bff00ddb10597 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 16 Sep 2024 17:46:03 -0400
Subject: [PATCH] Fixed pulse dot not displaying accurate status color

---
 Client/src/Pages/PageSpeed/Details/index.jsx | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 9774bb97c..48d8aa86a 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -29,11 +29,13 @@ import PulseDot from "../../../Components/Animated/PulseDot";
 import PagespeedDetailsAreaChart from "./Charts/AreaChart";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import PieChart from "./Charts/PieChart";
+import useUtils from "../../Monitors/utils";
 import "./index.css";
 
 const PageSpeedDetails = () => {
   const theme = useTheme();
   const navigate = useNavigate();
+  const { statusColor, pagespeedStatusMsg, determineState } = useUtils();
   const [monitor, setMonitor] = useState({});
   const [audits, setAudits] = useState({});
   const { monitorId } = useParams();
@@ -109,11 +111,7 @@ const PageSpeedDetails = () => {
                 gap={theme.spacing(2)}
               >
                 <Tooltip
-                  title={
-                    monitor?.status
-                      ? "Your pagespeed monitor is live."
-                      : "Your pagespeed monitor is down."
-                  }
+                  title={pagespeedStatusMsg[determineState(monitor)]}
                   disableInteractive
                   slotProps={{
                     popper: {
@@ -129,13 +127,7 @@ const PageSpeedDetails = () => {
                   }}
                 >
                   <Box>
-                    <PulseDot
-                      color={
-                        monitor?.status
-                          ? theme.palette.success.main
-                          : theme.palette.error.main
-                      }
-                    />
+                    <PulseDot color={statusColor[determineState(monitor)]} />
                   </Box>
                 </Tooltip>
                 <Typography component="h2" variant="h2">