malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: Update LoginPage to use emerald primary colors
Some checks are pending
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source 
- Replace all indigo references with emerald/primary tokens
- Use CSS variables for background, border, and accent colors
- Update button, inputs, and hover states
This commit is contained in:
fullsizemalt 2025-12-27 11:48:41 -08:00
parent 06abb56560
commit f875664305
1 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/pages/LoginPage.tsx
View file

@ -36,9 +36,9 @@ export default function LoginPage() {
}; };
return ( return (
<div className="min-h-screen bg-[#050505] text-slate-100 flex overflow-hidden font-sans selection:bg-indigo-500/30"> <div className="min-h-screen bg-[var(--color-bg-primary)] text-slate-100 flex overflow-hidden font-sans selection:bg-emerald-500/30">
{/* Left Side: Brand/Visual */} {/* Left Side: Brand/Visual */}
<div className="hidden lg:flex flex-1 relative items-center justify-center border-r border-slate-800/50 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-slate-900 via-[#050505] to-[#050505]"> <div className="hidden lg:flex flex-1 relative items-center justify-center border-r border-[var(--color-border-subtle)] bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-[var(--color-bg-secondary)] via-[var(--color-bg-primary)] to-[var(--color-bg-primary)]">
<div className="absolute inset-0 opacity-20" style={{ backgroundImage: 'radial-gradient(#1e293b 1px, transparent 1px)', backgroundSize: '32px 32px' }} /> <div className="absolute inset-0 opacity-20" style={{ backgroundImage: 'radial-gradient(#1e293b 1px, transparent 1px)', backgroundSize: '32px 32px' }} />
<motion.div <motion.div
@ -53,7 +53,7 @@ export default function LoginPage() {
alt="Veridian" alt="Veridian"
className="w-24 h-24 rounded-3xl shadow-2xl transition-transform duration-slow ease-out-expo group-hover:scale-105" className="w-24 h-24 rounded-3xl shadow-2xl transition-transform duration-slow ease-out-expo group-hover:scale-105"
/> />
<div className="absolute inset-0 rounded-3xl bg-indigo-500 opacity-0 group-hover:opacity-10 transition-opacity duration-normal blur-xl" /> <div className="absolute inset-0 rounded-3xl bg-emerald-500 opacity-0 group-hover:opacity-10 transition-opacity duration-normal blur-xl" />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<h2 className="text-5xl font-bold tracking-tighter bg-gradient-to-b from-white to-slate-500 bg-clip-text text-transparent"> <h2 className="text-5xl font-bold tracking-tighter bg-gradient-to-b from-white to-slate-500 bg-clip-text text-transparent">
@ -98,7 +98,7 @@ export default function LoginPage() {
alt="Veridian" alt="Veridian"
className="w-12 h-12 rounded-xl shadow-lg transition-transform duration-300 group-hover:scale-105" className="w-12 h-12 rounded-xl shadow-lg transition-transform duration-300 group-hover:scale-105"
/> />
<div className="absolute inset-0 rounded-xl bg-indigo-500 opacity-0 group-hover:opacity-10 transition-opacity blur-lg" /> <div className="absolute inset-0 rounded-xl bg-emerald-500 opacity-0 group-hover:opacity-10 transition-opacity blur-lg" />
</motion.div> </motion.div>
<motion.h1 variants={itemVariants} className="text-3xl font-bold tracking-tight text-white lg:text-4xl"> <motion.h1 variants={itemVariants} className="text-3xl font-bold tracking-tight text-white lg:text-4xl">
Sign In Sign In
@ -130,13 +130,13 @@ export default function LoginPage() {
<input <input
type="email" type="email"
required required
className="w-full bg-slate-900/50 border border-slate-800 rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/40 focus:border-indigo-500 transition-all placeholder:text-slate-600" className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/40 focus:border-[var(--color-primary)] transition-all placeholder:text-slate-600"
placeholder="you@example.com" placeholder="you@example.com"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
disabled={isLoading} disabled={isLoading}
/> />
<div className="absolute inset-0 rounded-xl bg-indigo-500/5 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity" /> <div className="absolute inset-0 rounded-xl bg-emerald-500/5 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity" />
</div> </div>
</div> </div>
@ -146,13 +146,13 @@ export default function LoginPage() {
<input <input
type="password" type="password"
required required
className="w-full bg-slate-900/50 border border-slate-800 rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/40 focus:border-indigo-500 transition-all placeholder:text-slate-600" className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/40 focus:border-[var(--color-primary)] transition-all placeholder:text-slate-600"
placeholder="••••••••••••" placeholder="••••••••••••"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
disabled={isLoading} disabled={isLoading}
/> />
<div className="absolute inset-0 rounded-xl bg-indigo-500/5 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity" /> <div className="absolute inset-0 rounded-xl bg-emerald-500/5 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity" />
</div> </div>
</div> </div>
</div> </div>
@ -160,7 +160,7 @@ export default function LoginPage() {
<button <button
type="submit" type="submit"
disabled={isLoading} disabled={isLoading}
className="group relative w-full bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl h-14 font-bold tracking-tight shadow-xl shadow-indigo-600/10 transition-all active:scale-[0.98] disabled:opacity-50 flex items-center justify-center overflow-hidden" className="group relative w-full bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] rounded-xl h-14 font-bold tracking-tight shadow-xl shadow-emerald-600/20 transition-all active:scale-[0.98] disabled:opacity-50 flex items-center justify-center overflow-hidden"
> >
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-[100%] group-hover:translate-x-[100%] transition-transform duration-1000" /> <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-[100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
{isLoading ? ( {isLoading ? (