From 4d92e0aeed8dbf14fa36b5635a578bfc469773b4 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sun, 15 Feb 2026 19:25:54 -0500
Subject: [PATCH] refactor: migrate auth pages to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/ChangePasswordPage.tsx | 34 ++++++-------
 frontend/src/pages/LoginPage.tsx          | 34 ++++++-------
 frontend/src/pages/RegisterPage.tsx       | 62 +++++++++++------------
 frontend/src/pages/ResetPasswordPage.tsx  | 38 +++++++-------
 4 files changed, 84 insertions(+), 84 deletions(-)

diff --git a/frontend/src/pages/ChangePasswordPage.tsx b/frontend/src/pages/ChangePasswordPage.tsx
index 9dda8f43..cc711bff 100644
--- a/frontend/src/pages/ChangePasswordPage.tsx
+++ b/frontend/src/pages/ChangePasswordPage.tsx
@@ -66,7 +66,7 @@ export function ChangePasswordPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             Change Password
           </h1>
           {isForced && (
@@ -77,7 +77,7 @@ export function ChangePasswordPage() {
         </div>
 
         <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          <div className="glass-card rounded-2xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             {error && (
               <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
                 {error}
@@ -85,7 +85,7 @@ export function ChangePasswordPage() {
             )}
 
             <div>
-              <label htmlFor="current-password" className="mb-1 block text-sm font-medium text-white">
+              <label htmlFor="current-password" className="mb-1 block text-sm font-medium text-foreground">
                 Current Password
               </label>
               <PasswordInput
@@ -95,16 +95,16 @@ export function ChangePasswordPage() {
                 value={currentPassword}
                 onChange={(e) => setCurrentPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
               />
             </div>
 
             <div>
-              <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-white">
+              <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
                 New Password
               </label>
               <PasswordInput
@@ -114,20 +114,20 @@ export function ChangePasswordPage() {
                 value={newPassword}
                 onChange={(e) => setNewPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="At least 10 characters"
               />
-              <p className="mt-1 text-xs text-white/40">
+              <p className="mt-1 text-xs text-muted-foreground">
                 Must include uppercase, lowercase, and a digit.
               </p>
             </div>
 
             <div>
-              <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-white">
+              <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
                 Confirm New Password
               </label>
               <PasswordInput
@@ -137,9 +137,9 @@ export function ChangePasswordPage() {
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
               />
@@ -150,8 +150,8 @@ export function ChangePasswordPage() {
               disabled={isLoading}
               className={cn(
                 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                'bg-white text-black hover:bg-white/90',
-                'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
+                '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',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
               )}
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index ed182d9f..52d2750c 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -51,19 +51,19 @@ export function LoginPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             ResolutionFlow
           </h1>
-          <p className="mt-2 text-base font-medium text-white/60 sm:mt-3 sm:text-lg">
+          <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-white/40 sm:mt-2">
+          <p className="mt-1 text-sm text-muted-foreground sm:mt-2">
             Sign in to your account
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          <div className="glass-card rounded-2xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl 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">
                 {localError || error}
@@ -71,7 +71,7 @@ export function LoginPage() {
             )}
 
             <div>
-              <label htmlFor="email" className="mb-1 block text-sm font-medium text-white">
+              <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
                 Email address
               </label>
               <input
@@ -83,9 +83,9 @@ export function LoginPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="you@example.com"
@@ -93,7 +93,7 @@ export function LoginPage() {
             </div>
 
             <div>
-              <label htmlFor="password" className="mb-1 block text-sm font-medium text-white">
+              <label htmlFor="password" className="mb-1 block text-sm font-medium text-foreground">
                 Password
               </label>
               <PasswordInput
@@ -104,9 +104,9 @@ export function LoginPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="••••••••••"
@@ -114,7 +114,7 @@ export function LoginPage() {
             </div>
 
             <div className="text-right">
-              <Link to="/forgot-password" className="text-xs text-white/40 hover:text-white/60 transition-colors">
+              <Link to="/forgot-password" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
                 Forgot password?
               </Link>
             </div>
@@ -124,8 +124,8 @@ export function LoginPage() {
               disabled={isLoading}
               className={cn(
                 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                'bg-white text-black hover:bg-white/90',
-                'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
+                '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',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
               )}
@@ -134,9 +134,9 @@ export function LoginPage() {
             </button>
           </div>
 
-          <p className="text-center text-sm text-white/40">
+          <p className="text-center text-sm text-muted-foreground">
             Don't have an account?{' '}
-            <Link to="/register" className="font-medium text-white hover:underline">
+            <Link to="/register" className="font-medium text-foreground hover:underline">
               Register
             </Link>
           </p>
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 179bc0e0..263a2c96 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -87,19 +87,19 @@ export function RegisterPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             ResolutionFlow
           </h1>
-          <p className="mt-2 text-base font-medium text-white/60 sm:mt-3 sm:text-lg">
+          <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-white/40 sm:mt-2">
+          <p className="mt-1 text-sm text-muted-foreground sm:mt-2">
             Create your account
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          <div className="glass-card rounded-2xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl 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">
                 {localError || error}
@@ -107,7 +107,7 @@ export function RegisterPage() {
             )}
 
             <div>
-              <label htmlFor="inviteCode" className="block text-sm font-medium text-white">
+              <label htmlFor="inviteCode" className="block text-sm font-medium text-foreground">
                 Invite code
               </label>
               <input
@@ -121,18 +121,18 @@ export function RegisterPage() {
                 }}
                 onBlur={(e) => validateInviteCode(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border bg-black/50 px-3 py-2 font-mono tracking-wider',
-                  'text-white placeholder:text-white/30',
+                  'mt-1 block w-full rounded-xl border bg-card px-3 py-2 font-mono tracking-wider',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:outline-none focus:ring-1',
                   inviteCodeStatus === 'valid' && 'border-emerald-400/50 focus:border-emerald-400 focus:ring-emerald-400/30',
                   inviteCodeStatus === 'invalid' && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/30',
-                  inviteCodeStatus === 'idle' && 'border-white/10 focus:border-white/30 focus:ring-white/20',
-                  inviteCodeStatus === 'checking' && 'border-white/10 focus:border-white/30 focus:ring-white/20'
+                  inviteCodeStatus === 'idle' && 'border-border focus:border-primary focus:ring-primary/20',
+                  inviteCodeStatus === 'checking' && 'border-border focus:border-primary focus:ring-primary/20'
                 )}
                 placeholder="ABCD1234"
               />
               {inviteCodeStatus === 'checking' && (
-                <p className="mt-1 text-xs text-white/40">Validating...</p>
+                <p className="mt-1 text-xs text-muted-foreground">Validating...</p>
               )}
               {inviteCodeStatus === 'valid' && (
                 <p className="mt-1 text-xs text-emerald-400">{inviteCodeMessage}</p>
@@ -143,7 +143,7 @@ export function RegisterPage() {
             </div>
 
             <div>
-              <label htmlFor="name" className="block text-sm font-medium text-white">
+              <label htmlFor="name" className="block text-sm font-medium text-foreground">
                 Full name
               </label>
               <input
@@ -155,16 +155,16 @@ export function RegisterPage() {
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="John Smith"
               />
             </div>
 
             <div>
-              <label htmlFor="email" className="block text-sm font-medium text-white">
+              <label htmlFor="email" className="block text-sm font-medium text-foreground">
                 Email address
               </label>
               <input
@@ -176,16 +176,16 @@ export function RegisterPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="you@example.com"
               />
             </div>
 
             <div>
-              <label htmlFor="password" className="block text-sm font-medium text-white">
+              <label htmlFor="password" className="block text-sm font-medium text-foreground">
                 Password
               </label>
               <PasswordInput
@@ -196,19 +196,19 @@ export function RegisterPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="••••••••••"
               />
-              <p className="mt-1 text-xs text-white/30">
+              <p className="mt-1 text-xs text-muted-foreground">
                 Must be at least 10 characters
               </p>
             </div>
 
             <div>
-              <label htmlFor="confirmPassword" className="block text-sm font-medium text-white">
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
                 Confirm password
               </label>
               <PasswordInput
@@ -219,9 +219,9 @@ export function RegisterPage() {
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="••••••••••"
               />
@@ -232,8 +232,8 @@ export function RegisterPage() {
               disabled={isLoading}
               className={cn(
                 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                'bg-white text-black hover:bg-white/90',
-                'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
+                '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',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
               )}
@@ -242,9 +242,9 @@ export function RegisterPage() {
             </button>
           </div>
 
-          <p className="text-center text-sm text-white/40">
+          <p className="text-center text-sm text-muted-foreground">
             Already have an account?{' '}
-            <Link to="/login" className="font-medium text-white hover:underline">
+            <Link to="/login" className="font-medium text-foreground hover:underline">
               Sign in
             </Link>
           </p>
diff --git a/frontend/src/pages/ResetPasswordPage.tsx b/frontend/src/pages/ResetPasswordPage.tsx
index 248e90c3..b083d4aa 100644
--- a/frontend/src/pages/ResetPasswordPage.tsx
+++ b/frontend/src/pages/ResetPasswordPage.tsx
@@ -82,24 +82,24 @@ export function ResetPasswordPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             Reset Password
           </h1>
         </div>
 
         {verifying ? (
-          <div className="glass-card rounded-2xl p-6 text-center">
-            <p className="text-white/60">Verifying reset link...</p>
+          <div className="bg-card border border-border rounded-xl p-6 text-center">
+            <p className="text-muted-foreground">Verifying reset link...</p>
           </div>
         ) : !token || !valid ? (
-          <div className="glass-card rounded-2xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-4 text-sm text-red-400">
               This reset link is invalid or has expired. Please request a new one.
             </div>
             <div className="text-center">
               <Link
                 to="/forgot-password"
-                className="text-sm text-white/60 hover:text-white transition-colors"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
                 Request new reset link
               </Link>
@@ -107,10 +107,10 @@ export function ResetPasswordPage() {
           </div>
         ) : (
           <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-            <div className="glass-card rounded-2xl p-6 space-y-4">
+            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
               {email && (
-                <p className="text-sm text-white/60">
-                  Resetting password for <span className="font-medium text-white">{email}</span>
+                <p className="text-sm text-muted-foreground">
+                  Resetting password for <span className="font-medium text-foreground">{email}</span>
                 </p>
               )}
 
@@ -121,7 +121,7 @@ export function ResetPasswordPage() {
               )}
 
               <div>
-                <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-white">
+                <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
                   New Password
                 </label>
                 <PasswordInput
@@ -131,20 +131,20 @@ export function ResetPasswordPage() {
                   value={newPassword}
                   onChange={(e) => setNewPassword(e.target.value)}
                   className={cn(
-                    'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                    'text-white placeholder:text-white/30',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                    'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
                   placeholder="At least 10 characters"
                 />
-                <p className="mt-1 text-xs text-white/40">
+                <p className="mt-1 text-xs text-muted-foreground">
                   Must include uppercase, lowercase, and a digit.
                 </p>
               </div>
 
               <div>
-                <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-white">
+                <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
                   Confirm New Password
                 </label>
                 <PasswordInput
@@ -154,9 +154,9 @@ export function ResetPasswordPage() {
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
                   className={cn(
-                    'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                    'text-white placeholder:text-white/30',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                    'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
                 />
@@ -167,8 +167,8 @@ export function ResetPasswordPage() {
                 disabled={isLoading}
                 className={cn(
                   'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                  'bg-white text-black hover:bg-white/90',
-                  'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
+                  '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',
                   'disabled:cursor-not-allowed disabled:opacity-50',
                   'transition-all'
                 )}