From 1e107a2dfccc0cb70fd714058a26001970a6052b Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 17:59:49 -0400
Subject: [PATCH] Added breadcrumbs to pagespeed details

---
 .../src/Pages/PageSpeed/Configure/index.jsx   |  3 +-
 Client/src/Pages/PageSpeed/Details/index.css  |  2 +-
 Client/src/Pages/PageSpeed/Details/index.jsx  | 29 +++++++------------
 3 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 5bd6c5ccc..0dff8d7eb 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -15,12 +15,11 @@ import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 import "./index.css";
-import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 /**
  * Renders a skeleton layout.
diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css
index 5d4d037b7..357177c78 100644
--- a/Client/src/Pages/PageSpeed/Details/index.css
+++ b/Client/src/Pages/PageSpeed/Details/index.css
@@ -37,7 +37,7 @@
 .page-speed-details > .MuiStack-root:last-child,
 .page-speed-details > .MuiBox-root:nth-last-child(3) {
   border: solid 1px var(--env-var-color-6);
-  border-radius: var(--env-var-radius-2);
+  border-radius: var(--env-var-radius-1);
   background-color: var(--env-var-color-8);
   min-width: 200px;
 }
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 006f2acf3..dda768956 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -11,16 +11,16 @@ import {
 } from "../../../Utils/timeUtils";
 import axiosInstance from "../../../Utils/axiosConfig";
 import Button from "../../../Components/Button";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react";
 import ClockIcon from "../../../assets/icons/maintenance.svg?react";
 import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
-
-import "./index.css";
 import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
+import "./index.css";
+
 
 /**
  * Displays a box with an icon, title, and value.
@@ -39,7 +39,8 @@ const StatBox = ({ icon, title, value }) => {
       className="stat-box"
       direction="row"
       gap={theme.gap.small}
-      p={theme.gap.ml}
+      pt={theme.gap.ml}
+      px={theme.gap.ml}
       pb={theme.gap.mlplus}
     >
       {icon}
@@ -306,21 +307,11 @@ const PageSpeedDetails = () => {
         <SkeletonLayout />
       ) : (
         <>
-          <Button
-            level="tertiary"
-            label="Back"
-            animate="slideLeft"
-            img={<WestRoundedIcon />}
-            onClick={() => navigate("/pagespeed")}
-            sx={{
-              width: "fit-content",
-              backgroundColor: theme.palette.otherColors.fillGray,
-              px: theme.gap.ml,
-              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.small,
-                fill: theme.palette.otherColors.slateGray,
-              },
-            }}
+          <Breadcrumbs
+            list={[
+              { name: "pagespeed", path: "/pagespeed" },
+              { name: "details", path: `/pagespeed/${monitorId}` },
+            ]}
           />
           <Stack direction="row" gap={theme.gap.small}>
             {monitor?.status ? <GreenCheck /> : <RedCheck />}