From f1bf37349d4136efc7c64ac95af41a897e205d9c Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Mon, 2 Mar 2026 20:19:15 -0500
Subject: [PATCH] Extract AuthLayout component and polish auth UI

Shared layout for setup, login, and callback pages with consistent
styling. Add GitHub mark icon to action buttons. Document dev server
commands in CLAUDE.md.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 CLAUDE.md                                   |  5 +++
 apps/arc-web/app/components/auth-layout.tsx | 38 ++++++++++++++++
 apps/arc-web/app/routes/auth-login.tsx      | 42 ++++++++++-------
 apps/arc-web/app/routes/setup.tsx           | 50 ++++++++++++---------
 4 files changed, 99 insertions(+), 36 deletions(-)
 create mode 100644 apps/arc-web/app/components/auth-layout.tsx

diff --git a/CLAUDE.md b/CLAUDE.md
index 0da39a8a8..f5af33cb6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,5 +1,10 @@
 # Arc
 
+## Dev servers
+
+1. `arc serve --demo` — starts the Rust API server in demo mode
+2. `cd apps/arc-web && bun run dev` — starts the React dev server
+
 ## API workflow
 
 The OpenAPI spec at `openapi/arc-api.yaml` is the source of truth for the arc-api HTTP interface.
diff --git a/apps/arc-web/app/components/auth-layout.tsx b/apps/arc-web/app/components/auth-layout.tsx
new file mode 100644
index 000000000..9cb3cc160
--- /dev/null
+++ b/apps/arc-web/app/components/auth-layout.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+function ArcLogo({ className }: { className?: string }) {
+  return (
+    <img
+      src="/logo.svg"
+      alt="Arc"
+      className={className}
+      draggable={false}
+    />
+  );
+}
+
+export function AuthLayout({
+  children,
+  footer,
+}: {
+  children: ReactNode;
+  footer?: ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-atmosphere px-4">
+      <div className="w-full max-w-sm">
+        <div className="mb-8 flex justify-center">
+          <ArcLogo className="h-12 w-12" />
+        </div>
+        <div className="rounded-xl border border-line bg-panel/80 p-8 shadow-lg backdrop-blur-sm">
+          {children}
+        </div>
+        {footer && (
+          <div className="mt-4 text-center text-xs text-fg-muted">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/arc-web/app/routes/auth-login.tsx b/apps/arc-web/app/routes/auth-login.tsx
index ffc57a0bc..9ab33715a 100644
--- a/apps/arc-web/app/routes/auth-login.tsx
+++ b/apps/arc-web/app/routes/auth-login.tsx
@@ -1,4 +1,5 @@
 import { redirect } from "react-router";
+import { AuthLayout } from "../components/auth-layout";
 import { getGitHubOAuth, generateState } from "../lib/github.server";
 import type { Route } from "./+types/auth-login";
 
@@ -16,21 +17,30 @@ export function action({ request }: Route.ActionArgs) {
 
 export default function AuthLogin() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-page">
-      <div className="w-full max-w-md rounded-lg border border-line-strong bg-panel p-8 shadow-sm">
-        <h1 className="text-xl font-semibold text-fg">Sign in to Arc</h1>
-        <p className="mt-2 text-sm text-fg-muted">
-          Authenticate with your GitHub account to continue.
-        </p>
-        <form method="POST" className="mt-6">
-          <button
-            type="submit"
-            className="w-full rounded-md bg-teal-600 px-4 py-2 text-sm font-medium text-white hover:bg-teal-500 focus:outline-2 focus:outline-offset-2 focus:outline-teal-500"
-          >
-            Sign in with GitHub
-          </button>
-        </form>
-      </div>
-    </div>
+    <AuthLayout>
+      <h1 className="text-center text-lg font-semibold text-fg">
+        Sign in to Arc
+      </h1>
+      <p className="mt-2 text-center text-sm text-fg-3">
+        Authenticate with your GitHub account to continue.
+      </p>
+      <form method="POST" className="mt-6">
+        <button
+          type="submit"
+          className="flex w-full items-center justify-center gap-2 rounded-lg bg-teal-500 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-teal-300"
+        >
+          <GitHubMark />
+          Sign in with GitHub
+        </button>
+      </form>
+    </AuthLayout>
+  );
+}
+
+function GitHubMark() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+    </svg>
   );
 }
diff --git a/apps/arc-web/app/routes/setup.tsx b/apps/arc-web/app/routes/setup.tsx
index 1433a599b..8a16d1766 100644
--- a/apps/arc-web/app/routes/setup.tsx
+++ b/apps/arc-web/app/routes/setup.tsx
@@ -1,4 +1,5 @@
 import { redirect } from "react-router";
+import { AuthLayout } from "../components/auth-layout";
 import { isGitHubAppConfigured } from "../lib/github.server";
 import type { Route } from "./+types/setup";
 
@@ -35,26 +36,35 @@ export default function Setup({ loaderData }: Route.ComponentProps) {
   const { manifest } = loaderData;
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-page">
-      <div className="w-full max-w-md rounded-lg border border-line-strong bg-panel p-8 shadow-sm">
-        <h1 className="text-xl font-semibold text-fg">Set up Arc</h1>
-        <p className="mt-2 text-sm text-fg-muted">
-          Register a GitHub App to enable OAuth login and repository access.
-        </p>
-        <form
-          method="POST"
-          action="https://github.com/settings/apps/new"
-          className="mt-6"
+    <AuthLayout>
+      <h1 className="text-center text-lg font-semibold text-fg">
+        Set up Arc
+      </h1>
+      <p className="mt-2 text-center text-sm text-fg-3">
+        Register a GitHub App to enable OAuth login and repository access.
+      </p>
+      <form
+        method="POST"
+        action="https://github.com/settings/apps/new"
+        className="mt-6"
+      >
+        <input type="hidden" name="manifest" value={manifest} />
+        <button
+          type="submit"
+          className="flex w-full items-center justify-center gap-2 rounded-lg bg-teal-500 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-teal-300"
         >
-          <input type="hidden" name="manifest" value={manifest} />
-          <button
-            type="submit"
-            className="w-full rounded-md bg-teal-600 px-4 py-2 text-sm font-medium text-white hover:bg-teal-500 focus:outline-2 focus:outline-offset-2 focus:outline-teal-500"
-          >
-            Register GitHub App
-          </button>
-        </form>
-      </div>
-    </div>
+          <GitHubMark />
+          Register GitHub App
+        </button>
+      </form>
+    </AuthLayout>
+  );
+}
+
+function GitHubMark() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+    </svg>
   );
 }