milestone 23 s3: convert features/blocklists/BlocklistForm.tsx to stylex

web/src/features/blocklists/BlocklistForm.tsx

@@ -1,10 +1,48 @@
 import { useState, type FormEvent } from "react";
+import * as stylex from "@stylexjs/stylex";
 import { ApiError } from "@/lib/api";
 import InlineError from "@/lib/InlineError";
 import type { Blocklist, BlocklistInput } from "@/lib/types";
-import { buttonClass, focusRing, inputClass, primaryButtonClass } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
 import { READ_ONLY_HINT } from "@/features/settings/authority";
 
+const styles = stylex.create({
+	form: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.75rem",
+		marginTop: "1rem",
+		maxWidth: "36rem",
+	},
+	heading: {
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 500,
+	},
+	fieldLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	checkboxLabel: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	buttonRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	cancel: {
+		fontWeight: 500,
+	},
+});
+
 /**
  * Drops the rejection the page already renders inline below the form. Anything
  * else is a bug in this component and must reach the console instead of dying
@@ -46,10 +84,10 @@ export default function BlocklistForm({ initial, busy, readOnly, error, onSubmit
 	}
 
 	return (
-		<form onSubmit={handleSubmit} className="mt-4 max-w-xl space-y-3">
+		<form onSubmit={handleSubmit} {...stylex.props(styles.form)}>
-			<h2 className="text-lg font-medium">{initial === undefined ? "Add source" : `Edit ${initial.name}`}</h2>
+			<h2 {...stylex.props(styles.heading)}>{initial === undefined ? "Add source" : `Edit ${initial.name}`}</h2>
 			<div>
-				<label htmlFor="blocklist-url" className="block text-sm font-medium">
+				<label htmlFor="blocklist-url" {...stylex.props(styles.fieldLabel)}>
 					URL
 				</label>
 				<input
@@ -58,11 +96,11 @@ export default function BlocklistForm({ initial, busy, readOnly, error, onSubmit
 					required
 					value={url}
 					onChange={(event) => setUrl(event.target.value)}
-					className={inputClass}
+					{...stylex.props(shared.input, shared.focusRing)}
 				/>
 			</div>
 			<div>
-				<label htmlFor="blocklist-name" className="block text-sm font-medium">
+				<label htmlFor="blocklist-name" {...stylex.props(styles.fieldLabel)}>
 					Name
 				</label>
 				<input
@@ -71,29 +109,33 @@ export default function BlocklistForm({ initial, busy, readOnly, error, onSubmit
 					required
 					value={name}
 					onChange={(event) => setName(event.target.value)}
-					className={inputClass}
+					{...stylex.props(shared.input, shared.focusRing)}
 				/>
 			</div>
-			<label className="flex items-center gap-2 text-sm font-medium">
+			<label {...stylex.props(styles.checkboxLabel)}>
 				<input
 					type="checkbox"
 					checked={enabled}
 					onChange={(event) => setEnabled(event.target.checked)}
-					className={focusRing}
+					{...stylex.props(shared.focusRing)}
 				/>
 				Enabled
 			</label>
-			<div className="flex items-center gap-2">
+			<div {...stylex.props(styles.buttonRow)}>
 				<button
 					type="submit"
 					disabled={busy || readOnly}
 					title={readOnly ? READ_ONLY_HINT : undefined}
-					className={primaryButtonClass}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
 				>
 					{initial === undefined ? "Add source" : "Save changes"}
 				</button>
 				{onCancel !== undefined && (
-					<button type="button" onClick={onCancel} className={`${buttonClass} font-medium`}>
+					<button
+						type="button"
+						onClick={onCancel}
+						{...stylex.props(shared.button, styles.cancel, shared.focusRing)}
+					>
 						Cancel
 					</button>
 				)}