l0qp1n5qr: Restyle the sign-in screen to the redesign spec

src/components/SignInForm.tsx

@@ -3,6 +3,7 @@
 import { useState, type FormEvent } from "react";
 import { signIn, type Person } from "@/lib/auth-client";
 import { Logo } from "./Logo";
+import { SparkleButton } from "./Buttons";
 
 export function SignInForm({ onSignedIn }: { onSignedIn: (p: Person) => void }) {
   const [email, setEmail] = useState("");
@@ -27,39 +28,72 @@ export function SignInForm({ onSignedIn }: { onSignedIn: (p: Person) => void })
   }
 
   return (
-    <main className="center">
-      <form className="card" onSubmit={submit} noValidate>
-        <Logo />
-        <h1>Sign in to Minnect</h1>
-        {error && (
-          <p role="alert" className="error">
-            {error}
-          </p>
-        )}
-        <label htmlFor="email">Email</label>
-        <input
-          id="email"
-          name="email"
-          type="email"
-          autoComplete="username"
-          required
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-        <label htmlFor="password">Password</label>
-        <input
-          id="password"
-          name="password"
-          type="password"
-          autoComplete="current-password"
-          required
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-        <button type="submit" disabled={busy || !email || !password}>
-          {busy ? "Signing in..." : "Sign in"}
-        </button>
-      </form>
+    <main className="signin">
+      <div className="signin-glow" aria-hidden="true" />
+      <div className="signin-col">
+        <div className="signin-brand">
+          <Logo size={30} />
+          <span className="type-wordmark">MINNECT</span>
+        </div>
+        <div className="signin-head">
+          <span className="type-eyebrow">Members</span>
+          <h1 className="signin-title">
+            Human answers for <em>human decisions</em>
+          </h1>
+          <div className="signin-rule" aria-hidden="true" />
+        </div>
+        <form className="signin-form" onSubmit={submit} noValidate>
+          {error && (
+            <p role="alert" className="error signin-error">
+              {error}
+            </p>
+          )}
+          <label className="signin-label" htmlFor="email">
+            Email
+          </label>
+          <div className="signin-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <rect x="3" y="5" width="18" height="14" rx="3" />
+              <path d="m4 7 8 6 8-6" />
+            </svg>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="username"
+              placeholder="you@company.com"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <label className="signin-label signin-label-next" htmlFor="password">
+            Password
+          </label>
+          <div className="signin-field">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <rect x="4.5" y="10.5" width="15" height="10" rx="2.5" />
+              <path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" />
+            </svg>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              placeholder="Your password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+          <SparkleButton
+            type="submit"
+            className="signin-submit"
+            label={busy ? "Signing in..." : "Sign in"}
+            disabled={busy || !email || !password}
+          />
+        </form>
+      </div>
     </main>
   );
 }