Revamped stat boxes and header

Client/src/Pages/Monitors/Details/styled.jsx

@@ -76,6 +76,7 @@ export const StatBox = styled(Box)(({ theme }) => ({
   borderColor: theme.palette.border.light,
   borderRadius: 4,
   backgroundColor: theme.palette.background.main,
+  background: `linear-gradient(340deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 35%)`,
   "& h2": {
     fontSize: 13,
     fontWeight: 500,

Client/src/Pages/Monitors/utils.jsx

@@ -23,22 +23,26 @@ const useUtils = () => {
   const statusStyles = {
     up: {
       backgroundColor: theme.palette.success.bg,
+      background: `linear-gradient(340deg, ${theme.palette.success.light} -60%, ${theme.palette.success.bg} 35%)`,
       borderColor: theme.palette.success.light,
       "& h2": { color: theme.palette.success.main },
     },
     down: {
       backgroundColor: theme.palette.error.bg,
+      background: `linear-gradient(340deg, ${theme.palette.error.light} -60%, ${theme.palette.error.bg} 35%)`,
       borderColor: theme.palette.error.light,
       "& h2": { color: theme.palette.error.main },
     },
     paused: {
       backgroundColor: theme.palette.warning.light,
-      borderColor: theme.palette.warning.border,
+      background: `linear-gradient(340deg, ${theme.palette.warning.dark} -60%, ${theme.palette.warning.light} 35%)`,
+      borderColor: theme.palette.warning.dark,
       "& h2": { color: theme.palette.warning.main },
     },
     pending: {
       backgroundColor: theme.palette.warning.light,
-      borderColor: theme.palette.warning.border,
+      background: `linear-gradient(340deg, ${theme.palette.warning.dark} -60%, ${theme.palette.warning.light} 35%)`,
+      borderColor: theme.palette.warning.dark,
       "& h2": { color: theme.palette.warning.main },
     },
   };

Client/src/Pages/PageSpeed/Details/index.css

@@ -1,12 +1,7 @@
-.page-speed-details h1 {
-  font-size: var(--env-var-font-size-large-plus);
-}
-.page-speed-details h2,
 .page-speed-details h6 {
   font-size: var(--env-var-font-size-large);
 }
 .page-speed-details h4,
-.page-speed-details p,
 .page-speed-details p > span {
   font-size: var(--env-var-font-size-medium);
 }
@@ -17,8 +12,6 @@
 .page-speed-details h6 {
   line-height: 22px;
 }
-.page-speed-details h1,
-.page-speed-details h2,
 .page-speed-details h6 {
   font-weight: 600;
 }

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -1,5 +1,13 @@
 import PropTypes from "prop-types";
-import { Box, Button, Skeleton, Stack, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  Skeleton,
+  Stack,
+  Toolbar,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { PieChart } from "@mui/x-charts/PieChart";
 import { useDrawingArea } from "@mui/x-charts";
 import { useEffect, useState } from "react";
@@ -9,7 +17,9 @@ import { useSelector } from "react-redux";
 import {
   formatDuration,
   formatDurationRounded,
+  formatDurationSplit,
 } from "../../../Utils/timeUtils";
+import { StatBox } from "./styled";
 import { logger } from "../../../Utils/Logger";
 import { networkService } from "../../../main";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
@@ -21,46 +31,6 @@ import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
 
-const StatBox = ({ icon, title, value }) => {
-  const theme = useTheme();
-
-  return (
-    <Stack
-      className="stat-box"
-      direction="row"
-      gap={theme.spacing(4)}
-      pt={theme.spacing(8)}
-      px={theme.spacing(8)}
-      pb={theme.spacing(10)}
-      border={1}
-      borderColor={theme.palette.border.light}
-      borderRadius={theme.shape.borderRadius}
-      backgroundColor={theme.palette.background.main}
-      minWidth="200px"
-    >
-      {icon}
-      <Box>
-        <Typography
-          variant="h6"
-          color={theme.palette.primary.main}
-          mb={theme.spacing(6)}
-        >
-          {title}
-        </Typography>
-        <Typography variant="h4" color={theme.palette.text.secondary}>
-          {value}
-        </Typography>
-      </Box>
-    </Stack>
-  );
-};
-
-StatBox.propTypes = {
-  icon: PropTypes.element,
-  title: PropTypes.string,
-  value: PropTypes.node,
-};
-
 /**
  * Renders a centered label within a pie chart.
  *
@@ -356,8 +326,21 @@ const PageSpeedDetails = () => {
     borderRadius: theme.shape.borderRadius,
     backgroundColor: theme.palette.background.main,
   };
+
+  console.log(monitor);
+
+  const splitDuration = (duration) => {
+    const { time, format } = formatDurationSplit(duration);
+    return (
+      <>
+        {time}
+        <Typography component="span">{format}</Typography>
+      </>
+    );
+  };
+
   return (
-    <Stack className="page-speed-details" gap={theme.spacing(12)}>
+    <Stack className="page-speed-details" gap={theme.spacing(10)}>
       {loading ? (
         <SkeletonLayout />
       ) : (
@@ -369,32 +352,82 @@ const PageSpeedDetails = () => {
             ]}
           />
           <Stack direction="row" gap={theme.spacing(2)}>
-            <PulseDot
-              color={
-                monitor?.status
-                  ? theme.palette.success.main
-                  : theme.palette.error.main
-              }
-            />
             <Box>
               <Typography
                 component="h1"
-                mb={theme.spacing(2)}
+                fontSize={22}
+                fontWeight={500}
                 color={theme.palette.text.primary}
-                sx={{ lineHeight: 1 }}
               >
-                {monitor?.url}
+                {monitor.name}
               </Typography>
-              <Typography
-                component="span"
-                color={
-                  monitor?.status
-                    ? theme.palette.success.main
-                    : theme.palette.error.text
-                }
+              <Stack
+                direction="row"
+                alignItems="center"
+                height="fit-content"
+                gap={theme.spacing(2)}
               >
-                Your pagespeed monitor is live.
-              </Typography>
+                <Tooltip
+                  title={
+                    monitor?.status
+                      ? "Your pagespeed monitor is live."
+                      : "Your pagespeed monitor is down."
+                  }
+                  disableInteractive
+                  slotProps={{
+                    popper: {
+                      modifiers: [
+                        {
+                          name: "offset",
+                          options: {
+                            offset: [0, -8],
+                          },
+                        },
+                      ],
+                    },
+                  }}
+                >
+                  <Box>
+                    <PulseDot
+                      color={
+                        monitor?.status
+                          ? theme.palette.success.main
+                          : theme.palette.error.main
+                      }
+                    />
+                  </Box>
+                </Tooltip>
+                <Typography
+                  component="h2"
+                  fontSize={14.5}
+                  color={theme.palette.text.secondary}
+                >
+                  {monitor?.url}
+                </Typography>
+                <Typography
+                  mt={theme.spacing(1)}
+                  ml={theme.spacing(6)}
+                  fontSize={12}
+                  position="relative"
+                  color={theme.palette.text.tertiary}
+                  sx={{
+                    "&:before": {
+                      position: "absolute",
+                      content: `""`,
+                      width: 4,
+                      height: 4,
+                      borderRadius: "50%",
+                      backgroundColor: theme.palette.text.tertiary,
+                      opacity: 0.8,
+                      left: -9,
+                      top: "50%",
+                      transform: "translateY(-50%)",
+                    },
+                  }}
+                >
+                  Checking every {formatDurationRounded(monitor?.interval)}.
+                </Typography>
+              </Stack>
             </Box>
             <Button
               variant="contained"
@@ -416,49 +449,21 @@ const PageSpeedDetails = () => {
               Configure
             </Button>
           </Stack>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            gap={theme.spacing(12)}
-            flexWrap="wrap"
-          >
-            <StatBox
-              icon={<LastCheckedIcon />}
-              title="Last checked"
-              value={
-                <>
-                  {formatDuration(monitor?.lastChecked)}{" "}
-                  <Typography
-                    component="span"
-                    fontStyle="italic"
-                    sx={{ opacity: 0.8 }}
-                  >
-                    ago
-                  </Typography>
-                </>
-              }
-            />
-            <StatBox
-              icon={<ClockIcon />}
-              title="Checks since"
-              value={
-                <>
-                  {formatDuration(monitor?.uptimeDuration)}{" "}
-                  <Typography
-                    component="span"
-                    fontStyle="italic"
-                    sx={{ opacity: 0.8 }}
-                  >
-                    ago
-                  </Typography>
-                </>
-              }
-            ></StatBox>
-            <StatBox
-              icon={<IntervalCheckIcon />}
-              title="Checks every"
-              value={formatDurationRounded(monitor?.interval)}
-            ></StatBox>
+          <Stack direction="row" gap={theme.spacing(8)}>
+            <StatBox>
+              <Typography component="h2">checks since</Typography>
+              <Typography>
+                {splitDuration(monitor?.uptimeDuration)}
+                <Typography component="span">ago</Typography>
+              </Typography>
+            </StatBox>
+            <StatBox>
+              <Typography component="h2">last check</Typography>
+              <Typography>
+                {splitDuration(monitor?.lastChecked)}
+                <Typography component="span">ago</Typography>
+              </Typography>
+            </StatBox>
           </Stack>
           <Typography component="h2" color={theme.palette.text.secondary}>
             Score history

Client/src/Pages/PageSpeed/Details/styled.jsx

@@ -0,0 +1,29 @@
+import { Box, styled } from "@mui/material";
+
+export const StatBox = styled(Box)(({ theme }) => ({
+  padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
+  minWidth: 200,
+  width: 225,
+  border: 1,
+  borderStyle: "solid",
+  borderColor: theme.palette.border.light,
+  borderRadius: 4,
+  backgroundColor: theme.palette.background.main,
+  background: `linear-gradient(340deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 35%)`,
+  "& h2": {
+    fontSize: 13,
+    fontWeight: 500,
+    color: theme.palette.text.secondary,
+    textTransform: "uppercase",
+  },
+  "& p": {
+    fontSize: 18,
+    color: theme.palette.text.primary,
+    marginTop: theme.spacing(2),
+    "& span": {
+      color: theme.palette.text.tertiary,
+      marginLeft: theme.spacing(2),
+      fontSize: 15,
+    },
+  },
+}));