milestone 23 s3: convert features/settings/RestartBanner.tsx to stylex

web/src/features/settings/RestartBanner.tsx

@@ -1,20 +1,47 @@
+import * as stylex from "@stylexjs/stylex";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
 import { dismissRestartBanner, useRestartBanner } from "./restartBanner";
-import { focusRing } from "@/ui/classes";
+
+const styles = stylex.create({
+	banner: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.75rem",
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.warnBorder,
+		backgroundColor: colors.warnSurface,
+		color: colors.warnText,
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	message: {
+		flex: 1,
+	},
+	dismiss: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.warnBorderStrong,
+		backgroundColor: "transparent",
+		color: "inherit",
+		paddingInline: "0.5rem",
+		paddingBlock: "0.25rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+	},
+});
 
 export default function RestartBanner() {
 	const raised = useRestartBanner();
 	if (!raised) return null;
 	return (
-		<div
+		<div role="status" {...stylex.props(styles.banner)}>
-			role="status"
+			<span {...stylex.props(styles.message)}>Changes saved. Restart nxdns to apply.</span>
-			className="flex items-center gap-3 border-b border-amber-300 bg-amber-50 px-4 py-2 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100"
+			<button type="button" onClick={dismissRestartBanner} {...stylex.props(styles.dismiss, shared.focusRing)}>
-		>
-			<span className="flex-1">Changes saved. Restart nxdns to apply.</span>
-			<button
-				type="button"
-				onClick={dismissRestartBanner}
-				className={`rounded border border-amber-400 px-2 py-1 text-xs ${focusRing} dark:border-amber-700`}
-			>
 				Dismiss
 			</button>
 		</div>