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

fix: Login page - add logo file, fix theme contrast
Some checks are pending
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source 
- Copy logo file to /assets/logo-veridian.jpg
- Replace all hardcoded slate colors with CSS variables
- Input text now uses --color-text-primary
- Placeholders use --color-text-quaternary
- All elements now respect light/dark theme
This commit is contained in:
fullsizemalt 2025-12-27 13:00:04 -08:00
parent 7a01dc5589
commit c9c9eb84f2
2 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
frontend/public/assets/logo-veridian.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 463 KiB

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

@ -36,10 +36,10 @@ export default function LoginPage() {
}; };
return ( return (
<div className="min-h-screen bg-[var(--color-bg-primary)] text-slate-100 flex overflow-hidden font-sans selection:bg-[var(--color-primary)]/30"> <div className="min-h-screen bg-[var(--color-bg-primary)] flex overflow-hidden font-sans selection:bg-[var(--color-primary)]/30">
{/* Left Side: Brand/Visual */} {/* Left Side: Brand/Visual */}
<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="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-10" style={{ backgroundImage: 'radial-gradient(var(--color-border-default) 1px, transparent 1px)', backgroundSize: '32px 32px' }} />
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
@ -56,7 +56,7 @@ export default function LoginPage() {
<div className="absolute inset-0 rounded-3xl bg-[var(--color-primary)] opacity-0 group-hover:opacity-10 transition-opacity duration-normal blur-xl" /> <div className="absolute inset-0 rounded-3xl bg-[var(--color-primary)] 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 text-[var(--color-text-primary)]">
VERIDIAN VERIDIAN
</h2> </h2>
<p className="text-[var(--color-text-tertiary)] font-mono text-sm tracking-[0.3em] uppercase"> <p className="text-[var(--color-text-tertiary)] font-mono text-sm tracking-[0.3em] uppercase">
@ -64,10 +64,10 @@ export default function LoginPage() {
</p> </p>
</div> </div>
<div className="flex items-center gap-6 mt-12 bg-slate-900/50 backdrop-blur-md px-6 py-3 rounded-full border border-slate-800/50 shadow-xl"> <div className="flex items-center gap-6 mt-12 bg-[var(--color-bg-tertiary)] backdrop-blur-md px-6 py-3 rounded-full border border-[var(--color-border-subtle)] shadow-xl">
<div className="flex -space-x-3"> <div className="flex -space-x-3">
{[1, 2, 3].map(i => ( {[1, 2, 3].map(i => (
<div key={i} className="w-8 h-8 rounded-full border-2 border-[#050505] bg-slate-800" /> <div key={i} className="w-8 h-8 rounded-full border-2 border-[var(--color-bg-primary)] bg-[var(--color-bg-secondary)]" />
))} ))}
</div> </div>
<p className="text-xs text-[var(--color-text-tertiary)] font-medium">Operations Center</p> <p className="text-xs text-[var(--color-text-tertiary)] font-medium">Operations Center</p>
@ -76,7 +76,7 @@ export default function LoginPage() {
</motion.div> </motion.div>
{/* Decorative elements */} {/* Decorative elements */}
<div className="absolute bottom-12 left-12 text-[10px] font-mono text-slate-700 tracking-tighter uppercase leading-none"> <div className="absolute bottom-12 left-12 text-[10px] font-mono text-[var(--color-text-quaternary)] tracking-tighter uppercase leading-none">
Veridian Operations<br /> Veridian Operations<br />
Cultivation Platform<br /> Cultivation Platform<br />
v1.0.0 v1.0.0
@ -100,7 +100,7 @@ export default function LoginPage() {
/> />
<div className="absolute inset-0 rounded-xl bg-[var(--color-primary)] opacity-0 group-hover:opacity-10 transition-opacity blur-lg" /> <div className="absolute inset-0 rounded-xl bg-[var(--color-primary)] 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-[var(--color-text-primary)] lg:text-4xl">
Sign In Sign In
</motion.h1> </motion.h1>
<motion.p variants={itemVariants} className="text-[var(--color-text-tertiary)] text-sm"> <motion.p variants={itemVariants} className="text-[var(--color-text-tertiary)] text-sm">
@ -130,7 +130,7 @@ export default function LoginPage() {
<input <input
type="email" type="email"
required required
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" className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-xl px-4 py-3.5 text-sm text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/40 focus:border-[var(--color-primary)] transition-all placeholder:text-[var(--color-text-quaternary)]"
placeholder="you@example.com" placeholder="you@example.com"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
@ -146,7 +146,7 @@ export default function LoginPage() {
<input <input
type="password" type="password"
required required
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" className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-xl px-4 py-3.5 text-sm text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/40 focus:border-[var(--color-primary)] transition-all placeholder:text-[var(--color-text-quaternary)]"
placeholder="••••••••••••" placeholder="••••••••••••"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
@ -160,7 +160,7 @@ export default function LoginPage() {
<button <button
type="submit" type="submit"
disabled={isLoading} disabled={isLoading}
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" 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 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 ? (
@ -174,11 +174,11 @@ export default function LoginPage() {
</button> </button>
</motion.form> </motion.form>
<motion.div variants={itemVariants} className="pt-24 border-t border-slate-800 space-y-4"> <motion.div variants={itemVariants} className="pt-24 border-t border-[var(--color-border-subtle)] space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-[10px] font-bold text-slate-600 uppercase tracking-widest">Global Security</p> <p className="text-[10px] font-bold text-[var(--color-text-quaternary)] uppercase tracking-widest">Global Security</p>
<div className="h-px flex-1 bg-slate-800 mx-4" /> <div className="h-px flex-1 bg-[var(--color-border-subtle)] mx-4" />
<Shield className="text-slate-700" size={14} /> <Shield className="text-[var(--color-text-quaternary)]" size={14} />
</div> </div>
<p className="text-[11px] text-[var(--color-text-tertiary)] leading-relaxed text-center"> <p className="text-[11px] text-[var(--color-text-tertiary)] leading-relaxed text-center">
This system is for the exclusive use of authorized personnel. All activity is logged and monitored for compliance integrity. This system is for the exclusive use of authorized personnel. All activity is logged and monitored for compliance integrity.