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 (
<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 */}
<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
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>
<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
</h2>
<p className="text-[var(--color-text-tertiary)] font-mono text-sm tracking-[0.3em] uppercase">
@ -64,10 +64,10 @@ export default function LoginPage() {
</p>
</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">
{[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>
<p className="text-xs text-[var(--color-text-tertiary)] font-medium">Operations Center</p>
@ -76,7 +76,7 @@ export default function LoginPage() {
</motion.div>
{/* 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 />
Cultivation Platform<br />
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" />
</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
</motion.h1>
<motion.p variants={itemVariants} className="text-[var(--color-text-tertiary)] text-sm">
@ -130,7 +130,7 @@ export default function LoginPage() {
<input
type="email"
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"
value={email}
onChange={(e) => setEmail(e.target.value)}
@ -146,7 +146,7 @@ export default function LoginPage() {
<input
type="password"
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="••••••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
@ -160,7 +160,7 @@ export default function LoginPage() {
<button
type="submit"
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" />
{isLoading ? (
@ -174,11 +174,11 @@ export default function LoginPage() {
</button>
</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">
<p className="text-[10px] font-bold text-slate-600 uppercase tracking-widest">Global Security</p>
<div className="h-px flex-1 bg-slate-800 mx-4" />
<Shield className="text-slate-700" size={14} />
<p className="text-[10px] font-bold text-[var(--color-text-quaternary)] uppercase tracking-widest">Global Security</p>
<div className="h-px flex-1 bg-[var(--color-border-subtle)] mx-4" />
<Shield className="text-[var(--color-text-quaternary)]" size={14} />
</div>
<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.