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).

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 (
 		<EmptyState
 			fullscreen
 			title={t("pages.pageSpeed.fallback.title")}
 			description={t("pages.pageSpeed.fallback.description")}
 			alert={
-				<Stack
-					direction="row"
-					alignItems="flex-start"
-					gap={theme.spacing(LAYOUT.SM)}
-					sx={{
-						width: "100%",
-						p: theme.spacing(LAYOUT.MD),
-						borderRadius: 1,
-						border: `1px solid ${alertBorder}`,
-						backgroundColor: alertBg,
-						textAlign: "left",
-					}}
-				>
-					<Box
-						component="span"
-						sx={{
-							color: alertIcon,
-							fontSize: 18,
-							lineHeight: 1,
-							mt: "2px",
+				<NoticeBanner severity="warning">
+					<Trans
+						i18nKey="common.alerts.pageSpeedApiKey.content"
+						components={{
+							settingsLink: (
+								<Link
+									component={RouterLink}
+									to="/settings"
+									sx={{
+										color: theme.palette.primary.main,
+										fontWeight: 600,
+										textDecoration: "underline",
+									}}
+								/>
+							),
 						}}
-					>
-						⚠
-					</Box>
-					<Typography
-						sx={{ color: theme.palette.text.primary, lineHeight: 1.55, fontSize: 13 }}
-					>
-						<Trans
-							i18nKey="common.alerts.pageSpeedApiKey.content"
-							components={{
-								settingsLink: (
-									<Link
-										component={RouterLink}
-										to="/settings"
-										sx={{
-											color: theme.palette.primary.main,
-											fontWeight: 600,
-											textDecoration: "underline",
-										}}
-									/>
-								),
-							}}
-						/>
-					</Typography>
-				</Stack>
+					/>
+				</NoticeBanner>
 			}
 		/>
 	);

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<Severity, string> = {
+	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 (
+		<Stack
+			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",
+			}}
+		>
+			<Box
+				component="span"
+				sx={{
+					color: tone,
+					fontSize: 18,
+					lineHeight: 1,
+					mt: "2px",
+				}}
+				aria-hidden
+			>
+				{SEVERITY_GLYPH[severity]}
+			</Box>
+			<Typography
+				sx={{ color: theme.palette.text.primary, lineHeight: 1.55, fontSize: 13 }}
+			>
+				{children}
+			</Typography>
+		</Stack>
+	);
+};

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";