Feat: New Monitor Header UI

src/Components/MonitorCountHeader/index.jsx

@@ -1,6 +1,4 @@
-import { Stack } from "@mui/material";
-import { Heading } from "../Heading";
-import CircularCount from "../CircularCount";
+import { Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import SkeletonLayout from "./skeleton";
@@ -8,22 +6,36 @@ import SkeletonLayout from "./skeleton";
 const MonitorCountHeader = ({
 	shouldRender = true,
 	monitorCount,
-	heading,
+	heading = "monitors",
 	sx,
 	children,
 }) => {
 	const theme = useTheme();
 	if (!shouldRender) return <SkeletonLayout />;
 
+	if (monitorCount === 1) {
+		heading = "monitor";
+	}
+
 	return (
 		<Stack
 			direction="row"
 			alignItems="center"
+			display="flex"
+			width="fit-content"
+			height={theme.spacing(18)}
 			gap={theme.spacing(2)}
-			sx={{ ...sx }}
+			mt={theme.spacing(2)}
+			px={theme.spacing(4)}
+			pt={theme.spacing(2)}
+			pb={theme.spacing(3)}
+			borderRadius={theme.spacing(1)}
+			sx={{
+				...sx,
+				backgroundColor: theme.palette.secondary.main,
+			}}
 		>
-			<Heading component="h2">{heading}</Heading>
-			<CircularCount count={monitorCount} />
+			{monitorCount} <Typography component="h2">{heading}</Typography>
 			{children}
 		</Stack>
 	);

src/Pages/Infrastructure/Monitors/index.jsx

@@ -87,7 +87,6 @@ const InfrastructureMonitors = () => {
 			/>
 			<MonitorCountHeader
 				shouldRender={!isLoading}
-				heading="Infrastructure monitors"
 				monitorCount={summary?.totalMonitors ?? 0}
 			/>
 			<MonitorsTable

src/Pages/PageSpeed/Monitors/index.jsx

@@ -67,7 +67,6 @@ const PageSpeed = () => {
 			<MonitorCountHeader
 				shouldRender={!isLoading}
 				monitorCount={summary?.totalMonitors}
-				heading="PageSpeed monitors"
 				sx={{ mb: theme.spacing(8) }}
 			/>
 			<MonitorGrid

src/Pages/Uptime/Monitors/index.jsx

@@ -120,7 +120,7 @@ const UptimeMonitors = () => {
 
 	const filterLookup = new Map([
 		[toFilterStatus, "status"],
-		[toFilterActive, "isActive"]
+		[toFilterActive, "isActive"],
 	]);
 
 	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
@@ -202,7 +202,6 @@ const UptimeMonitors = () => {
 				<MonitorCountHeader
 					shouldRender={monitors?.length > 0 && !monitorsWithSummaryIsLoading}
 					monitorCount={monitorsSummary?.totalMonitors}
-					heading={"Uptime monitors"}
 				></MonitorCountHeader>
 				<Filter
 					selectedTypes={selectedTypes}