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

web/src/features/clients/ClientsPage.tsx

@@ -50,9 +50,6 @@ const styles = stylex.create({
 		paddingInline: "0.75rem",
 		paddingBlock: "0.5rem",
 	},
-	mono: {
-		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-	},
 	right: {
 		textAlign: "right",
 	},
@@ -134,7 +131,7 @@ export default function ClientsPage() {
 						<tbody>
 							{clients.map((client) => (
 								<tr key={client.id} {...stylex.props(styles.bodyRow)}>
-									<td {...stylex.props(styles.cell, styles.mono)}>{client.ip}</td>
+									<td {...stylex.props(styles.cell, shared.mono)}>{client.ip}</td>
 									<td {...stylex.props(styles.cell)}>
 										{client.name === "" ? (
 											<span {...stylex.props(styles.dash)}>—</span>

web/src/features/local/RecordsTab.tsx

@@ -73,9 +73,6 @@ const styles = stylex.create({
 		paddingBlock: "0.5rem",
 		paddingRight: "1rem",
 	},
-	mono: {
-		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-	},
 	emptyCell: {
 		paddingBlock: "1rem",
 		color: colors.textMuted,
@@ -284,9 +281,9 @@ export default function RecordsTab() {
 									</td>
 								) : (
 									<>
-										<td {...stylex.props(styles.cell, styles.mono)}>{record.name}</td>
+										<td {...stylex.props(styles.cell, shared.mono)}>{record.name}</td>
 										<td {...stylex.props(styles.cell)}>{record.rtype}</td>
-										<td {...stylex.props(styles.cell, styles.mono)}>{record.value}</td>
+										<td {...stylex.props(styles.cell, shared.mono)}>{record.value}</td>
 										<td {...stylex.props(styles.cell)}>{record.ttl}</td>
 										<td {...stylex.props(styles.actionCell)}>
 											<button

web/src/features/local/ZonesTab.tsx

@@ -69,9 +69,6 @@ const styles = stylex.create({
 		paddingBlock: "0.5rem",
 		paddingRight: "1rem",
 	},
-	mono: {
-		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-	},
 	emptyCell: {
 		paddingBlock: "1rem",
 		color: colors.textMuted,
@@ -248,8 +245,8 @@ export default function ZonesTab() {
 									</td>
 								) : (
 									<>
-										<td {...stylex.props(styles.cell, styles.mono)}>{zone.zone}</td>
+										<td {...stylex.props(styles.cell, shared.mono)}>{zone.zone}</td>
-										<td {...stylex.props(styles.cell, styles.mono)}>{zone.resolver}</td>
+										<td {...stylex.props(styles.cell, shared.mono)}>{zone.resolver}</td>
 										<td {...stylex.props(styles.actionCell)}>
 											<button
 												type="button"

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
+		<div role="status" {...stylex.props(styles.banner)}>
-			role="status"
+			Configuration is managed by <code {...stylex.props(shared.mono)}>{authority.path}</code>. Edit the file and
-			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"
+			restart nxdns to change it; the server rejects edits made here.
-		>
-			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>
 	);
 }

web/src/ui/styles.ts

@@ -151,6 +151,10 @@ export const styles = stylex.create({
 		color: colors.dangerText,
 	},
 
+	/** For a value the operator reads character by character: a domain, an IP, a URL. */
+	mono: {
+		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+	},
 	/** Visible to a screen reader only; the element keeps its place in the a11y tree. */
 	srOnly: {
 		position: "absolute",