milestone 23 s3: convert routes.tsx to stylex

web/src/routes.tsx

@@ -1,4 +1,5 @@
 import type { QueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
 import {
 	createRootRouteWithContext,
 	createRoute,
@@ -27,16 +28,44 @@ import {
 	upstreamHealthQuery,
 	upstreamsQuery,
 } from "@/lib/queries";
-import { retryButtonClass } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
 
 export interface RouterContext {
 	queryClient: QueryClient;
 }
 
+const styles = stylex.create({
+	pending: {
+		padding: "2rem",
+		textAlign: "center",
+		color: colors.textMuted,
+	},
+	errorBox: {
+		margin: "1rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.dangerBorder,
+		backgroundColor: colors.dangerSurface,
+		padding: "1rem",
+	},
+	errorTitle: {
+		fontWeight: 600,
+		color: colors.dangerText,
+	},
+	errorDetail: {
+		marginTop: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.dangerText,
+	},
+});
+
 function RoutePending() {
 	return (
-		<div className="p-8 text-center text-zinc-500" role="status">
+		<div {...stylex.props(styles.pending)} role="status">
-			<span className="animate-pulse">Loading…</span>
+			<span {...stylex.props(shared.pulse)}>Loading…</span>
 		</div>
 	);
 }
@@ -59,13 +88,14 @@ function RouteError({ error }: ErrorComponentProps) {
 		}
 	}
 	return (
-		<div
+		<div role="alert" {...stylex.props(styles.errorBox)}>
-			role="alert"
+			<h2 {...stylex.props(styles.errorTitle)}>{title}</h2>
-			className="m-4 rounded border border-red-300 bg-red-50 p-4 dark:border-red-900 dark:bg-red-950"
+			<p {...stylex.props(styles.errorDetail)}>{detail}</p>
-		>
+			<button
-			<h2 className="font-semibold text-red-800 dark:text-red-200">{title}</h2>
+				type="button"
-			<p className="mt-1 text-sm text-red-700 dark:text-red-300">{detail}</p>
+				onClick={() => void router.invalidate()}
-			<button type="button" onClick={() => void router.invalidate()} className={retryButtonClass}>
+				{...stylex.props(shared.retryButton, shared.focusRing)}
+			>
 				Retry
 			</button>
 		</div>