From d1077a1314e25ea5ce38f8510abfb88f2dd157e5 Mon Sep 17 00:00:00 2001
From: mannilakash <mannilakash@gmail.com>
Date: Fri, 13 Mar 2026 12:07:14 -0400
Subject: [PATCH] fix: changing spacing to constants

---
 .../Components/InfrastructureMetrics.tsx      | 12 +++++------
 .../Status/Components/MonitorsList.tsx        | 21 ++++++++++---------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/client/src/Pages/StatusPage/Status/Components/InfrastructureMetrics.tsx b/client/src/Pages/StatusPage/Status/Components/InfrastructureMetrics.tsx
index 3dafdadc5..9be17105c 100644
--- a/client/src/Pages/StatusPage/Status/Components/InfrastructureMetrics.tsx
+++ b/client/src/Pages/StatusPage/Status/Components/InfrastructureMetrics.tsx
@@ -8,6 +8,7 @@ import type { Monitor } from "@/Types/Monitor";
 import Grid from "@mui/material/Grid";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import Box from "@mui/material/Box";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
 
 interface StatusPageMonitor extends Monitor {
 	checks?: Monitor["recentChecks"];
@@ -56,15 +57,14 @@ const MetricItem = ({ label, progress, details }: MetricItemProps) => {
 				flexDirection: "column",
 				alignItems: "center",
 				textAlign: "center",
-				gap: theme.spacing(2),
-				padding: theme.spacing(2),
-				paddingBottom: theme.spacing(4),
+				gap: theme.spacing(SPACING.LG),
+				padding: theme.spacing(LAYOUT.XS),
 				borderRight: isSmall ? "none" : `1px solid ${theme.palette.divider}`,
 				borderBottom: isSmall ? `1px solid ${theme.palette.divider}` : "none",
 				"&:last-child": {
 					borderRight: "none",
 					borderBottom: "none",
-					paddingBottom: theme.spacing(2),
+					paddingBottom: theme.spacing(SPACING.LG),
 				},
 			}}
 		>
@@ -83,7 +83,7 @@ const MetricItem = ({ label, progress, details }: MetricItemProps) => {
 			{details && details.length > 0 && (
 				<Box
 					width="100%"
-					paddingX={theme.spacing(10)}
+					paddingX={theme.spacing(LAYOUT.LG)}
 				>
 					{details.map((detail) => (
 						<MetricDetailRow
@@ -182,7 +182,7 @@ export const InfrastructureMetrics = ({ monitor }: { monitor: StatusPageMonitor
 		<Grid
 			container
 			alignItems="center"
-			padding={theme.spacing(4)}
+			padding={theme.spacing(LAYOUT.XS)}
 		>
 			{metrics.map(
 				({ key, labelKey, hasData, progress, details }) =>
diff --git a/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx b/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx
index 3cda8888e..c9212f0c4 100644
--- a/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx
+++ b/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx
@@ -13,6 +13,7 @@ import { useState } from "react";
 import type { Monitor } from "@/Types/Monitor";
 import type { StatusPage } from "@/Types/StatusPage";
 import type { RootState } from "@/Types/state";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
 
 interface StatusPageMonitor extends Monitor {
 	checks?: Monitor["recentChecks"];
@@ -60,7 +61,7 @@ const getMonitorBadgeStyles = (monitorType: string, theme: Theme) => {
 	return {
 		backgroundColor: config.bg,
 		color: config.color,
-		padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+		padding: `${theme.spacing(SPACING.SM)} ${theme.spacing(SPACING.LG)}`,
 		borderRadius: theme.shape.borderRadius,
 	};
 };
@@ -90,11 +91,11 @@ const MonitorContent = ({
 	}
 
 	return (
-		<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1, mb: theme.spacing(2) }}>
+		<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1, mb: theme.spacing(SPACING.LG) }}>
 			{chartType === "histogram" ? (
 				<HistogramResponseTime
 					height={{ xs: 50, md: 100 }}
-					gap={{ xs: theme.spacing(1), md: theme.spacing(5) }}
+					gap={{ xs: theme.spacing(SPACING.SM), md: theme.spacing(LAYOUT.SM) }}
 					checks={monitor?.checks?.slice().reverse() ?? []}
 				/>
 			) : (
@@ -113,12 +114,12 @@ export const MonitorsList = ({ statusPage, monitors }: MonitorsListProps) => {
 	const [chartType, setChartType] = useState<"histogram" | "heatmap">("histogram");
 
 	return (
-		<Stack gap={theme.spacing(8)}>
+		<Stack gap={theme.spacing(LAYOUT.MD)}>
 			{statusPage.showCharts && (
 				<Stack
 					direction={"row"}
 					alignItems={"center"}
-					gap={theme.spacing(2)}
+					gap={theme.spacing(LAYOUT.SM)}
 				>
 					<Typography>{t("pages.statusPages.monitorsList.chartTypeHeatmap")}</Typography>
 					<SwitchComponent
@@ -139,21 +140,21 @@ export const MonitorsList = ({ statusPage, monitors }: MonitorsListProps) => {
 				return (
 					<BaseBox
 						key={monitor.id}
-						padding={theme.spacing(8)}
+						padding={theme.spacing(LAYOUT.MD)}
 					>
 						<Stack
 							direction="row"
 							alignItems="center"
 							justifyContent="space-between"
-							gap={theme.spacing(4)}
-							mb={theme.spacing(4)}
+							gap={theme.spacing(LAYOUT.XS)}
+							mb={theme.spacing(LAYOUT.XS)}
 						>
 							<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1 }}>
 								<Stack
 									direction="row"
 									alignItems="center"
-									gap={theme.spacing(2)}
-									mb={theme.spacing(1)}
+									gap={theme.spacing(SPACING.LG)}
+									mb={theme.spacing(SPACING.SM)}
 								>
 									<Typography
 										variant="h6"