From fef3f2c29440d02c38c7bf2be981230b16fad08d Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Tue, 28 Apr 2026 23:53:59 -0400 Subject: [PATCH 1/3] refactor(dialog): standard modal layout, NoticeBanner design-element, softer Cancel Dialog component: - Title bar gets a subtle background tint + bottom border. Title is variant=h2 weight=600. Description tucks under the title with variant=body1 secondary color (replaces MUI's DialogContentText). - Action bar gets a matching subtle tint + top border. Cancel is now outlined (was contained-error, which made every modal's Cancel button look destructive). Confirm keeps its color (primary by default, caller can pass error for destructive flows). - Content area sits between with its own breathing room baked in, so callers no longer need mt={theme.spacing(...)} workarounds. - The cancelColor prop is removed; sites that genuinely need a destructive Cancel can use confirmColor='error' on the Confirm button instead. NoticeBanner design-element: - Extracted from the inline alert pattern in PageSpeedKeyPriorityFallback into a reusable component with severity=info|warning|error. - Refactored PageSpeedKeyPriorityFallback to use it. DialogResolution.tsx: drop the now-removed cancelColor prop and the mt-Box wrapper that's no longer needed (Dialog provides the spacing). --- .../Components/design-elements/BasePage.tsx | 67 ++++++------------- .../design-elements/NoticeBanner.tsx | 56 ++++++++++++++++ .../src/Components/design-elements/index.tsx | 1 + client/src/Components/inputs/Dialog.tsx | 57 ++++++++++++---- .../Incidents/Components/DialogResolution.tsx | 24 +++---- 5 files changed, 130 insertions(+), 75 deletions(-) create mode 100644 client/src/Components/design-elements/NoticeBanner.tsx diff --git a/client/src/Components/design-elements/BasePage.tsx b/client/src/Components/design-elements/BasePage.tsx index 7522fa175..845d20a4c 100644 --- a/client/src/Components/design-elements/BasePage.tsx +++ b/client/src/Components/design-elements/BasePage.tsx @@ -9,13 +9,14 @@ import { EmptyMonitorFallback, } from "@/Components/design-elements/Fallback"; import { EmptyState } from "@/Components/design-elements/EmptyState"; +import { NoticeBanner } from "@/Components/design-elements/NoticeBanner"; import { Breadcrumb } from "@/Components/design-elements/Breadcrumb"; import { PageHeader } from "@/Components/design-elements/PageHeader"; import CircularProgress from "@mui/material/CircularProgress"; import { LanguageSelector, SwitchTheme } from "@/Components/inputs"; import type { StackProps } from "@mui/material/Stack"; -import { useTheme, alpha } from "@mui/material/styles"; +import { useTheme } from "@mui/material/styles"; import { Trans, useTranslation } from "react-i18next"; import { Link as RouterLink } from "react-router-dom"; import { Typography } from "@mui/material"; @@ -23,60 +24,30 @@ import { Typography } from "@mui/material"; export const PageSpeedKeyPriorityFallback = () => { const theme = useTheme(); const { t } = useTranslation(); - const alertBg = alpha(theme.palette.warning.main, 0.08); - const alertBorder = alpha(theme.palette.warning.main, 0.45); - const alertIcon = theme.palette.warning.main; return ( - + + ), }} - > - ⚠ - - - - ), - }} - /> - - + /> + } /> ); diff --git a/client/src/Components/design-elements/NoticeBanner.tsx b/client/src/Components/design-elements/NoticeBanner.tsx new file mode 100644 index 000000000..a04a5cb4e --- /dev/null +++ b/client/src/Components/design-elements/NoticeBanner.tsx @@ -0,0 +1,56 @@ +import Stack from "@mui/material/Stack"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import { useTheme, alpha } from "@mui/material/styles"; +import { LAYOUT } from "@/Utils/Theme/constants"; + +type Severity = "info" | "warning" | "error"; + +const SEVERITY_GLYPH: Record = { + info: "ⓘ", + warning: "⚠", + error: "✕", +}; + +interface NoticeBannerProps { + severity?: Severity; + children: React.ReactNode; +} + +export const NoticeBanner = ({ severity = "info", children }: NoticeBannerProps) => { + const theme = useTheme(); + const tone = theme.palette[severity].main; + return ( + + + {SEVERITY_GLYPH[severity]} + + + {children} + + + ); +}; diff --git a/client/src/Components/design-elements/index.tsx b/client/src/Components/design-elements/index.tsx index efc85dbb0..f6e2771ec 100644 --- a/client/src/Components/design-elements/index.tsx +++ b/client/src/Components/design-elements/index.tsx @@ -22,5 +22,6 @@ export * from "./Gauge"; export * from "./Tabs"; export * from "./SplitBox"; export * from "./TextLink"; +export * from "./NoticeBanner"; export * from "./OfflineBanner"; export * from "./Avatar"; diff --git a/client/src/Components/inputs/Dialog.tsx b/client/src/Components/inputs/Dialog.tsx index 2b8084f85..38b858bd6 100644 --- a/client/src/Components/inputs/Dialog.tsx +++ b/client/src/Components/inputs/Dialog.tsx @@ -2,10 +2,12 @@ import Dialog from "@mui/material/Dialog"; import type { DialogProps } from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; -import DialogContentText from "@mui/material/DialogContentText"; import DialogTitle from "@mui/material/DialogTitle"; +import Typography from "@mui/material/Typography"; +import Box from "@mui/material/Box"; import { Button } from "@/Components/inputs"; -import { typographyLevels } from "@/Utils/Theme/Palette"; +import { LAYOUT } from "@/Utils/Theme/constants"; +import { useTheme } from "@mui/material/styles"; import { useTranslation } from "react-i18next"; import type { ReactNode } from "react"; @@ -16,7 +18,6 @@ export const DialogInput = ({ onConfirm, onCancel, confirmColor = "primary", - cancelColor = "error", loading = false, cancelText, confirmText, @@ -31,7 +32,6 @@ export const DialogInput = ({ onConfirm?(item: any): any; onCancel?(item: any): any; confirmColor?: "error" | "primary"; - cancelColor?: "error" | "primary"; loading?: boolean; cancelText?: string; confirmText?: string; @@ -41,6 +41,7 @@ export const DialogInput = ({ additionalButtons?: ReactNode; }) => { const { t } = useTranslation(); + const theme = useTheme(); return ( - {title && {title}} - - {content && {content}} - {children} - - + {title && ( + + + {title} + + {content && ( + + {content} + + )} + + )} + {children && ( + + {children} + + )} + ); }; From 5792ca624e3e0eea67b4bb5fdd13ca43dac9dad4 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 29 Apr 2026 09:37:37 -0700 Subject: [PATCH 2/3] normalize NoticeBanner --- .../design-elements/MonitorStatus.tsx | 2 +- .../design-elements/NoticeBanner.tsx | 31 +++++++++---------- client/src/Utils/Theme/Palette.ts | 13 ++++---- client/src/Utils/Theme/Theme.ts | 2 +- client/src/Utils/Theme/constants.ts | 1 + 5 files changed, 25 insertions(+), 24 deletions(-) diff --git a/client/src/Components/design-elements/MonitorStatus.tsx b/client/src/Components/design-elements/MonitorStatus.tsx index dbeb5fa84..14f33d934 100644 --- a/client/src/Components/design-elements/MonitorStatus.tsx +++ b/client/src/Components/design-elements/MonitorStatus.tsx @@ -17,7 +17,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => { return ( = { info: "ⓘ", @@ -25,29 +27,26 @@ export const NoticeBanner = ({ severity = "info", children }: NoticeBannerProps) direction="row" alignItems="flex-start" gap={theme.spacing(LAYOUT.SM)} - sx={{ - width: "100%", - p: theme.spacing(LAYOUT.MD), - borderRadius: 1, - border: `1px solid ${alpha(tone, 0.45)}`, - backgroundColor: alpha(tone, 0.08), - textAlign: "left", - }} + width={"100%"} + p={theme.spacing(LAYOUT.MD)} + borderRadius={theme.shape.borderRadius} + border={`1px solid ${alpha(tone, 0.45)}`} + bgcolor={alpha(tone, 0.08)} + textAlign={"left"} > {SEVERITY_GLYPH[severity]} {children} diff --git a/client/src/Utils/Theme/Palette.ts b/client/src/Utils/Theme/Palette.ts index 0fe08583a..92c08cd2f 100644 --- a/client/src/Utils/Theme/Palette.ts +++ b/client/src/Utils/Theme/Palette.ts @@ -1,12 +1,13 @@ const typographyBase = 13; export const typographyLevels = { - base: typographyBase, - xs: `${(typographyBase - 4) / 16}rem`, - s: `${(typographyBase - 2) / 16}rem`, - m: `${typographyBase / 16}rem`, - l: `${(typographyBase + 2) / 16}rem`, - xl: `${(typographyBase + 10) / 16}rem`, + base: typographyBase, // 13px + xs: `${(typographyBase - 4) / 16}rem`, // 9px + s: `${(typographyBase - 2) / 16}rem`, // 11px + m: `${typographyBase / 16}rem`, // 13px + l: `${(typographyBase + 2) / 16}rem`, // 15px + xl: `${(typographyBase + 5) / 16}rem`, // 18px + xxl: `${(typographyBase + 10) / 16}rem`, // 23px }; export const colors = { diff --git a/client/src/Utils/Theme/Theme.ts b/client/src/Utils/Theme/Theme.ts index 19f864c6f..7c712d66d 100644 --- a/client/src/Utils/Theme/Theme.ts +++ b/client/src/Utils/Theme/Theme.ts @@ -58,7 +58,7 @@ export const theme = (mode: string, palette: any) => fontFamilyMonospace, fontSize: typographyLevels.base, h1: { - fontSize: typographyLevels.xl, + fontSize: typographyLevels.xxl, fontWeight: 500, }, h2: { diff --git a/client/src/Utils/Theme/constants.ts b/client/src/Utils/Theme/constants.ts index 8b045f9f6..e0d74815e 100644 --- a/client/src/Utils/Theme/constants.ts +++ b/client/src/Utils/Theme/constants.ts @@ -8,6 +8,7 @@ export const SPACING = { } as const; export const LAYOUT = { + XXS: 2, XS: 4, SM: 6, MD: 8, From 2dd921891045af89f13db243074d2a2a2b166982 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 29 Apr 2026 09:42:49 -0700 Subject: [PATCH 3/3] normailze dialog and basepage --- .../Components/design-elements/BasePage.tsx | 4 ++-- client/src/Components/inputs/Dialog.tsx | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/client/src/Components/design-elements/BasePage.tsx b/client/src/Components/design-elements/BasePage.tsx index 845d20a4c..c955fb6b7 100644 --- a/client/src/Components/design-elements/BasePage.tsx +++ b/client/src/Components/design-elements/BasePage.tsx @@ -38,9 +38,9 @@ export const PageSpeedKeyPriorityFallback = () => { diff --git a/client/src/Components/inputs/Dialog.tsx b/client/src/Components/inputs/Dialog.tsx index 38b858bd6..02d164abd 100644 --- a/client/src/Components/inputs/Dialog.tsx +++ b/client/src/Components/inputs/Dialog.tsx @@ -53,24 +53,24 @@ export const DialogInput = ({ > {title && ( {title} {content && ( {content} @@ -79,7 +79,7 @@ export const DialogInput = ({ )} {children && ( - {children} + {children} )}