new look

web/src/components/auth/auth-screen.tsx

@@ -12,14 +12,20 @@ type Props = {
 
 export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, authError, onSignIn }: Props) {
   return (
-    <div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#45215f_0%,#2a183d_45%,#191227_100%)] p-4">
-      <div className="w-full max-w-md rounded-2xl border bg-[hsl(276_32%_14%)] p-6 shadow-xl shadow-violet-950/45">
+    <div className="app-grid-surface flex h-full items-center justify-center p-4">
+      <div className="glass-panel w-full max-w-md rounded-2xl border border-violet-300/18 p-6">
+        <div className="mb-6">
+          <div className="sybil-wordmark bg-[linear-gradient(90deg,#ff8df8,#9a6dff_54%,#67dfff)] bg-clip-text text-3xl text-transparent">
+            SYBIL
+          </div>
+        </div>
+
         <div className="mb-5 flex items-start gap-3">
-          <div className="rounded-lg bg-violet-200 p-2 text-violet-900">
+          <div className="rounded-lg border border-cyan-300/25 bg-cyan-400/12 p-2 text-cyan-200">
             <ShieldCheck className="h-4 w-4" />
           </div>
           <div>
-            <h1 className="text-lg font-semibold">Sign in to Sybil</h1>
+            <h1 className="text-lg font-semibold text-violet-50">Sign in to Sybil</h1>
             <p className="mt-1 text-sm text-muted-foreground">Use your backend admin token.</p>
           </div>
         </div>
@@ -38,6 +44,7 @@ export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, aut
             value={authTokenInput}
             onInput={(event) => setAuthTokenInput(event.currentTarget.value)}
             disabled={isSigningIn}
+            className="bg-[hsl(235_48%_6%_/_0.84)] text-violet-50"
           />
           <Button className="w-full" type="submit" disabled={isSigningIn}>
             {isSigningIn ? "Signing in..." : "Sign in"}