TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: changing spacing to constants

Browse Source
This commit is contained in:
mannilakash committed 2026-03-13 12:07:14 -04:00
1 parent 22bcb74653
commit d1077a1314
2 files changed
+17 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/Pages/StatusPage/Status/Components/InfrastructureMetrics.tsx
+6 -6
View File
@@ -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 }) =>
client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx
+11 -10
View File
@@ -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"