fix(auth): say what went wrong under the input, and drop the default headline

Alerts were a bordered, tinted box with an icon, above the fields. They
are now a line of small text under the fields: red when something went
wrong, green when something just happened, no box and no icon.

The sign-in screens no longer carry the "One place for all the ways you
play" heading. Screens that pass their own heading (device approve,
deny and the rest) keep it.

packages/auth/src/ui/base.tsx

@@ -79,20 +79,7 @@ export function Layout(
 										<div data-component="logo">
 											<LogoWord />
 										</div>
-										{props.headline ?? (
-											<h2 data-component="title">
-												One place for all the ways we play.{' '}
-												<strong>
-													Gather Around
-													<a
-														href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-														rel="noopener noreferrer"
-														target="_blank">
-														.
-													</a>
-												</strong>
-											</h2>
-										)}
+										{props.headline}
 										<div data-component="actions">{props.children}</div>
 									</div>
 								</div>

packages/auth/src/ui/css.ts

@@ -41,9 +41,7 @@ export default `
 	--color-muted-foreground2: var(--color-gray-800);
 
 	--color-red-600: hsl(358 75% 59%);
-	--color-red-100: hsl(357 37% 12%);
 	--color-green-600: hsl(151 55% 42%);
-	--color-green-100: hsl(154 49% 9%);
 
 	--font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
 	--font-mona: 'Mona Sans Variable', var(--font-sans);
@@ -359,46 +357,20 @@ body {
 }
 
 [data-component='form-alert'] {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	border-radius: 0.75rem;
-	border: 1px solid var(--color-red-600);
-	background: var(--color-red-100);
-	padding: 0.75rem 1rem;
+	margin: -0.25rem 0 0;
 	font-size: 0.8125rem;
 	line-height: 1.25rem;
-	color: var(--color-foreground);
+	font-weight: 500;
+	color: var(--color-red-600);
 	text-align: left;
 }
 
 [data-component='form-alert'][data-color='success'] {
-	border-color: var(--color-green-600);
-	background: var(--color-green-100);
-}
-
-[data-component='form-alert'] svg {
-	height: 1.25rem;
-	width: 1.25rem;
-	flex-shrink: 0;
-}
-
-[data-component='form-alert'] [data-slot='icon-success'] {
-	display: none;
 	color: var(--color-green-600);
 }
 
-[data-component='form-alert'] [data-slot='icon-danger'] {
-	display: block;
-	color: var(--color-red-600);
-}
-
-[data-component='form-alert'][data-color='success'] [data-slot='icon-success'] {
-	display: block;
-}
-
-[data-component='form-alert'][data-color='success'] [data-slot='icon-danger'] {
-	display: none;
+[data-component='form-alert'] + [data-component='form-alert'] {
+	margin-top: -0.5rem;
 }
 
 /* The secondary action: a way in that is not the one being recommended, and

packages/auth/src/ui/render.tsx

@@ -107,12 +107,12 @@ function Form(props: { theme?: Theme; screen: FormScreen }) {
 	return (
 		<Layout theme={props.theme}>
 			<form data-component="form" method={screen.method ?? 'post'} action={screen.action}>
-				{screen.alerts?.map((alert) => (
-					<Banner alert={alert} />
-				))}
 				{screen.fields.map((field) => (
 					<Input field={field} />
 				))}
+				{screen.alerts?.map((alert) => (
+					<Note alert={alert} />
+				))}
 				<button data-component="button">{screen.submit}</button>
 			</form>
 
@@ -284,37 +284,19 @@ function Input(props: { field: Field }) {
 	);
 }
 
-function Banner(props: { alert: Alert }) {
+/**
+ * A line of small text under the fields: red when something went wrong, green
+ * when something just happened. No box and no icon, so it reads as part of the
+ * input it is about rather than as a second thing on the page.
+ */
+function Note(props: { alert: Alert }) {
 	return (
-		<div data-component="form-alert" data-color={props.alert.tone}>
-			<svg
-				data-slot="icon-success"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-				/>
-			</svg>
-			<svg
-				data-slot="icon-danger"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
-				/>
-			</svg>
-			<span data-slot="message">{props.alert.message}</span>
-		</div>
+		<p
+			data-component="form-alert"
+			data-color={props.alert.tone}
+			role={props.alert.tone === 'danger' ? 'alert' : 'status'}>
+			{props.alert.message}
+		</p>
 	);
 }
 

packages/auth/src/ui/screen.ts

@@ -52,7 +52,7 @@ export interface Link {
 	external?: boolean;
 }
 
-/** The banner above a form saying what went wrong, or what just happened. */
+/** The small line under a form's fields saying what went wrong, or what just happened. */
 export interface Alert {
 	tone: 'danger' | 'success';
 	message: string;