Basic grid structure

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

@@ -96,7 +96,12 @@ const Monitors = ({ isAdmin }) => {
                   alignItems="center"
                   mb={theme.spacing(8)}
                 >
-                  <Typography component="h2" variant="h2" letterSpacing={-0.5}>
+                  <Typography
+                    component="h2"
+                    variant="h2"
+                    fontWeight={500}
+                    letterSpacing={-0.2}
+                  >
                     Actively monitoring
                   </Typography>
                   <Box

Client/src/Pages/PageSpeed/card.jsx

@@ -7,6 +7,7 @@ import { formatDate, formatDurationRounded } from "../../Utils/timeUtils";
 import { getLastChecked } from "../../Utils/monitorUtils";
 import useUtils from "../Monitors/utils";
 import PropTypes from "prop-types";
+import { IconBox } from "./Details/styled";
 
 const Card = ({ monitor }) => {
   const { determineState, pagespeedStatusMsg } = useUtils();
@@ -14,19 +15,8 @@ const Card = ({ monitor }) => {
   const navigate = useNavigate();
   const monitorState = determineState(monitor);
   return (
-    <Grid
-      item
-      lg={6}
-      flexGrow={1}
-      sx={{
-        "&:hover > .MuiStack-root": {
-          backgroundColor: theme.palette.background.accent,
-        },
-      }}
-    >
-      <Stack
-        direction="row"
-        gap={theme.spacing(6)}
+    <Grid item lg={6} flexGrow={1}>
+      <Box
         p={theme.spacing(8)}
         onClick={() => navigate(`/pagespeed/${monitor._id}`)}
         border={1}
@@ -34,41 +24,40 @@ const Card = ({ monitor }) => {
         borderRadius={theme.shape.borderRadius}
         backgroundColor={theme.palette.background.main}
         sx={{
+          display: "grid",
+          gridTemplateColumns: "34px 2fr 1fr",
+          columnGap: theme.spacing(5),
+          gridTemplateRows: "34px 1fr 3fr",
           cursor: "pointer",
-          "& svg path": { stroke: theme.palette.other.icon, strokeWidth: 0.8 },
+          "&:hover": {
+            backgroundColor: theme.palette.background.accent,
+          },
         }}
       >
-        <PageSpeedIcon
-          style={{ width: theme.spacing(8), height: theme.spacing(8) }}
+        <IconBox>
+          <PageSpeedIcon />
+        </IconBox>
+        <Typography component="h2" variant="h2" alignSelf="center">
+          {monitor.name}
+        </Typography>
+        <StatusLabel
+          status={monitorState}
+          text={pagespeedStatusMsg[monitorState] || "Pending..."}
+          customStyles={{
+            width: "max-content",
+            textTransform: "capitalize",
+            alignSelf: "flex-start",
+            justifySelf: "flex-end",
+          }}
         />
-        <Box flex={1}>
-          <Stack direction="row" justifyContent="space-between">
-            <Typography
-              component="h2"
-              mb={theme.spacing(2)}
-              fontSize={16}
-              color={theme.palette.primary.main}
-            >
-              {monitor.name}
-            </Typography>
-            <StatusLabel
-              status={monitorState}
-              text={pagespeedStatusMsg[monitorState] || "Pending..."}
-              customStyles={{ textTransform: "capitalize" }}
-            />
-          </Stack>
-          <Typography>{monitor.url.replace(/^https?:\/\//, "")}</Typography>
-          <Typography mt={theme.spacing(12)}>
-            <Typography component="span" variant="body2" fontWeight={600}>
-              Last checked:{" "}
-            </Typography>
-            {formatDate(getLastChecked(monitor.checks, false))}{" "}
-            <Typography component="span" variant="body2" fontStyle="italic">
-              ({formatDurationRounded(getLastChecked(monitor.checks))} ago)
-            </Typography>
-          </Typography>
-        </Box>
-      </Stack>
+        <Typography
+          variant="body2"
+          mt={theme.spacing(-1)}
+          sx={{ gridColumnStart: 2 }}
+        >
+          {monitor.url}
+        </Typography>
+      </Box>
     </Grid>
   );
 };

Client/src/Pages/PageSpeed/index.css

@@ -1,9 +1,6 @@
-.page-speed h2.MuiTypography-root {
-  line-height: 1.1;
-}
 .page-speed .label {
   padding: 7px;
-  height: 22px;
+  height: 24px;
   font-size: var(--env-var-font-size-small);
 }
 .page-speed:not(:has([class*="fallback__"])) button {

Client/src/Pages/PageSpeed/index.jsx

@@ -56,7 +56,7 @@ const PageSpeed = ({ isAdmin }) => {
   // will show skeletons only on initial load
   // since monitor state is being added to redux persist, there's no reason to display skeletons on every render
   let isActuallyLoading = isLoading && monitors?.length === 0;
-  console.log(monitors);
+
   return (
     <Box
       className="page-speed"
@@ -75,13 +75,7 @@ const PageSpeed = ({ isAdmin }) => {
       {isActuallyLoading ? (
         <SkeletonLayout />
       ) : monitors?.length !== 0 ? (
-        <Box
-          sx={{
-            "& p": {
-              color: theme.palette.text.secondary,
-            },
-          }}
-        >
+        <Box>
           <Box mb={theme.spacing(12)}>
             <Breadcrumbs list={[{ name: `pagespeed`, path: "/pagespeed" }]} />
             <Stack

Server/db/mongo/modules/checkModule.js

@@ -259,20 +259,6 @@ const updateChecksTTL = async (teamId, ttl) => {
   }
 };
 
-const updateChecksTTL = async (teamId, ttl) => {
-  try {
-    await Check.collection.dropIndex("expiry_1");
-    await Check.collection.createIndex(
-      { expiry: 1 },
-      { expireAfterSeconds: ttl } // TTL in seconds, adjust as necessary
-    );
-  } catch (error) {
-    error.service = SERVICE_NAME;
-    error.method = "updateChecksTTL";
-    throw error;
-  }
-};
-
 module.exports = {
   createCheck,
   getChecksCount,