milestone 23 s3: convert features/dashboard/HealthBanners.tsx to stylex

web/src/features/dashboard/HealthBanners.tsx

@@ -1,13 +1,38 @@
+import * as stylex from "@stylexjs/stylex";
 import { formatBytes } from "@/lib/format";
 import type { Health } from "@/lib/types";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	stack: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.5rem",
+	},
+	banner: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	warn: {
+		borderColor: colors.warnBorder,
+		backgroundColor: colors.warnSurface,
+		color: colors.warnText,
+	},
+	critical: {
+		borderColor: colors.dangerBorder,
+		backgroundColor: colors.dangerSurface,
+		color: colors.dangerText,
+	},
+});
 
 function Banner({ tone, children }: { tone: "warn" | "critical"; children: React.ReactNode }) {
-	const classes =
-		tone === "critical"
-			? "border-red-300 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-200"
-			: "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200";
 	return (
-		<p role="alert" className={`rounded border px-4 py-2 text-sm ${classes}`}>
+		<p role="alert" {...stylex.props(styles.banner, tone === "critical" ? styles.critical : styles.warn)}>
 			{children}
 		</p>
 	);
@@ -39,5 +64,5 @@ export default function HealthBanners({ health }: { health: Health }) {
 		);
 	}
 	if (banners.length === 0) return null;
-	return <div className="space-y-2">{banners}</div>;
+	return <div {...stylex.props(styles.stack)}>{banners}</div>;
 }