Added breadcrumbs to pagespeed details

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.

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;
 }

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 />}