From a5cff0db64c1265d4d4272261b8e10ec0ee45dbc Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Tue, 3 Mar 2026 20:43:56 -0500
Subject: [PATCH] feat: redesign login page with Slate & Ice Modern design
 system

Apply glassmorphism styling, atmosphere orbs, branded wordmark, and
consistent design tokens to match the updated app shell aesthetic.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/LoginPage.tsx | 61 +++++++++++++++++++++-----------
 1 file changed, 41 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 52d2750c..7db69370 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -40,38 +40,59 @@ export function LoginPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-black px-4">
-      {/* Subtle radial overlay */}
-      <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      {/* Atmosphere orbs */}
+      <div
+        className="pointer-events-none fixed z-0"
+        style={{
+          top: '-120px',
+          right: '-80px',
+          width: '600px',
+          height: '600px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.04) 40%, transparent 70%)',
+          filter: 'blur(60px)',
+        }}
+      />
+      <div
+        className="pointer-events-none fixed z-0"
+        style={{
+          bottom: '-100px',
+          left: '-60px',
+          width: '500px',
+          height: '500px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 40%, transparent 70%)',
+          filter: 'blur(60px)',
+        }}
+      />
 
-      <div className="relative w-full max-w-md space-y-8">
+      <div className="relative z-10 w-full max-w-md space-y-8">
         <div className="text-center">
           <div className="mb-4 flex justify-center sm:mb-6">
-            <div className="w-16 h-16 rounded-2xl bg-white flex items-center justify-center sm:w-20 sm:h-20">
-              <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
-            </div>
+            <BrandLogo size="lg" />
           </div>
           <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
-            ResolutionFlow
+            <span>Resolution</span><span className="text-gradient-brand">Flow</span>
           </h1>
           <p className="mt-2 text-base font-medium text-muted-foreground sm:mt-3 sm:text-lg">
             Decision Tree Platform
           </p>
-          <p className="mt-1 text-sm text-muted-foreground sm:mt-2">
+          <p className="mt-1 text-sm text-muted-foreground/70 sm:mt-2">
             Sign in to your account
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
+          <div className="glass-card-static p-6 space-y-4">
             {(error || localError) && (
-              <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
+              <div className="rounded-[10px] border border-rose-500/20 bg-rose-500/10 p-3 text-sm text-rose-400">
                 {localError || error}
               </div>
             )}
 
             <div>
-              <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
+              <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-foreground">
                 Email address
               </label>
               <input
@@ -83,9 +104,9 @@ export function LoginPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'block w-full rounded-[10px] border border-border bg-card px-3 py-2.5',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                  'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="you@example.com"
@@ -93,7 +114,7 @@ export function LoginPage() {
             </div>
 
             <div>
-              <label htmlFor="password" className="mb-1 block text-sm font-medium text-foreground">
+              <label htmlFor="password" className="mb-1.5 block text-sm font-medium text-foreground">
                 Password
               </label>
               <PasswordInput
@@ -104,9 +125,9 @@ export function LoginPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'block w-full rounded-[10px] border border-border bg-card px-3 py-2.5',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                  'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="••••••••••"
@@ -123,9 +144,9 @@ export function LoginPage() {
               type="submit"
               disabled={isLoading}
               className={cn(
-                'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
-                'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
+                'w-full rounded-[10px] px-4 py-2.5 text-sm font-semibold',
+                'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97]',
+                'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
               )}