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

web/src/features/settings/ReadOnlyConfigBanner.tsx

@@ -1,5 +1,22 @@
+import * as stylex from "@stylexjs/stylex";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
 import { useAuthority } from "./authority";
 
+const styles = stylex.create({
+	banner: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.warnBorder,
+		backgroundColor: colors.warnSurface,
+		color: colors.warnText,
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+});
+
 /**
  * File authority is a standing condition, not an event, so this banner has no
  * dismiss button: it stays up for as long as the process runs from a file.
@@ -8,12 +25,9 @@ export default function ReadOnlyConfigBanner() {
 	const authority = useAuthority();
 	if (authority?.mode !== "managed_file") return null;
 	return (
-		<div
-			role="status"
-			className="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"
-		>
-			Configuration is managed by <code className="font-mono">{authority.path}</code>. Edit the file and restart
-			nxdns to change it; the server rejects edits made here.
+		<div role="status" {...stylex.props(styles.banner)}>
+			Configuration is managed by <code {...stylex.props(shared.mono)}>{authority.path}</code>. Edit the file and
+			restart nxdns to change it; the server rejects edits made here.
 		</div>
 	);
 }