From 7e7358b3c2798e737678c827185c4a1b0d392058 Mon Sep 17 00:00:00 2001
From: m5r <mokhtar@mial.net>
Date: Wed, 12 Aug 2026 22:21:13 +0200
Subject: [PATCH] milestone 23 s3: convert
 features/settings/ReadOnlyConfigBanner.tsx to stylex

---
 web/src/features/clients/ClientsPage.tsx      |  5 +---
 web/src/features/local/RecordsTab.tsx         |  7 ++---
 web/src/features/local/ZonesTab.tsx           |  7 ++---
 .../settings/ReadOnlyConfigBanner.tsx         | 26 ++++++++++++++-----
 web/src/ui/styles.ts                          |  4 +++
 5 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/web/src/features/clients/ClientsPage.tsx b/web/src/features/clients/ClientsPage.tsx
index 1fa5dd3..a534d1d 100644
--- a/web/src/features/clients/ClientsPage.tsx
+++ b/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>
diff --git a/web/src/features/local/RecordsTab.tsx b/web/src/features/local/RecordsTab.tsx
index 97cc588..643058d 100644
--- a/web/src/features/local/RecordsTab.tsx
+++ b/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
diff --git a/web/src/features/local/ZonesTab.tsx b/web/src/features/local/ZonesTab.tsx
index eefb36c..c96818a 100644
--- a/web/src/features/local/ZonesTab.tsx
+++ b/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, styles.mono)}>{zone.resolver}</td>
+										<td {...stylex.props(styles.cell, shared.mono)}>{zone.zone}</td>
+										<td {...stylex.props(styles.cell, shared.mono)}>{zone.resolver}</td>
 										<td {...stylex.props(styles.actionCell)}>
 											<button
 												type="button"
diff --git a/web/src/features/settings/ReadOnlyConfigBanner.tsx b/web/src/features/settings/ReadOnlyConfigBanner.tsx
index ca62abe..0e4142f 100644
--- a/web/src/features/settings/ReadOnlyConfigBanner.tsx
+++ b/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>
 	);
 }
diff --git a/web/src/ui/styles.ts b/web/src/ui/styles.ts
index b48971a..504e799 100644
--- a/web/src/ui/styles.ts
+++ b/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",