From 65e1b686cc9e569a40db0e9041367efb2bcf5985 Mon Sep 17 00:00:00 2001
From: Br0wnHammer <kumararyaman26@gmail.com>
Date: Wed, 9 Apr 2025 22:34:59 +0530
Subject: [PATCH] Feat: New Monitor Header UI

---
 src/Components/MonitorCountHeader/index.jsx | 26 +++++++++++++++------
 src/Pages/Infrastructure/Monitors/index.jsx |  1 -
 src/Pages/PageSpeed/Monitors/index.jsx      |  1 -
 src/Pages/Uptime/Monitors/index.jsx         |  3 +--
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/Components/MonitorCountHeader/index.jsx b/src/Components/MonitorCountHeader/index.jsx
index f7c31a5a0..0b3478df5 100644
--- a/src/Components/MonitorCountHeader/index.jsx
+++ b/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>
 	);
diff --git a/src/Pages/Infrastructure/Monitors/index.jsx b/src/Pages/Infrastructure/Monitors/index.jsx
index 1c511fea3..b679e04b7 100644
--- a/src/Pages/Infrastructure/Monitors/index.jsx
+++ b/src/Pages/Infrastructure/Monitors/index.jsx
@@ -87,7 +87,6 @@ const InfrastructureMonitors = () => {
 			/>
 			<MonitorCountHeader
 				shouldRender={!isLoading}
-				heading="Infrastructure monitors"
 				monitorCount={summary?.totalMonitors ?? 0}
 			/>
 			<MonitorsTable
diff --git a/src/Pages/PageSpeed/Monitors/index.jsx b/src/Pages/PageSpeed/Monitors/index.jsx
index 8ebb3f1b1..68cc12c48 100644
--- a/src/Pages/PageSpeed/Monitors/index.jsx
+++ b/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
diff --git a/src/Pages/Uptime/Monitors/index.jsx b/src/Pages/Uptime/Monitors/index.jsx
index 8c25e1d82..19b39c64a 100644
--- a/src/Pages/Uptime/Monitors/index.jsx
+++ b/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}