milestone 23 s3: convert lib/InlineError.tsx to stylex

web/src/lib/InlineError.tsx

@@ -1,6 +1,26 @@
 import { useEffect, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
 import { ApiError } from "@/lib/api";
-import { focusRing } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	message: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.danger,
+	},
+	retry: {
+		borderStyle: "none",
+		backgroundColor: "transparent",
+		padding: 0,
+		color: "inherit",
+		fontSize: "inherit",
+		fontWeight: 500,
+		textDecorationLine: "underline",
+	},
+});
 
 /**
  * Inline mutation error per ruling 17: 400/409 messages verbatim, 429 with
@@ -36,12 +56,12 @@ export default function InlineError({ error, onRetry }: { error: unknown; onRetr
 	}
 
 	return (
-		<p role="alert" className="mt-2 text-sm text-red-600 dark:text-red-400">
+		<p role="alert" {...stylex.props(styles.message)}>
 			{message}
 			{onRetry !== undefined && (
 				<>
 					{" "}
-					<button type="button" onClick={onRetry} className={`font-medium underline ${focusRing}`}>
+					<button type="button" onClick={onRetry} {...stylex.props(styles.retry, shared.focusRing)}>
 						Retry
 					</button>
 				</>