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

style: Apply Climate Monitoring design system
Some checks are pending
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source 
- Update color palette (emerald primary, cyan accent)
- Add new CSS variables for layout, radius, and semantic colors
- Update card styling with 16px radius and new shadow system
- Add pill badges and chip filter components
- Update Layout sidebar and topbar with new tokens
- Add stat-card component styles
This commit is contained in:
fullsizemalt 2025-12-27 11:44:29 -08:00
parent ca8a3e8cee
commit 06abb56560
2 changed files with 186 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
frontend/src/components/Layout.tsx
View file

@ -21,32 +21,32 @@ export default function Layout() {
const [mobileSheetOpen, setMobileSheetOpen] = useState(false); const [mobileSheetOpen, setMobileSheetOpen] = useState(false);
return ( return (
<div className="flex h-screen bg-white dark:bg-[#0B0E14] text-slate-900 dark:text-slate-100 overflow-hidden font-sans"> <div className="flex h-screen bg-[var(--color-bg-primary)] text-slate-900 dark:text-slate-100 overflow-hidden font-sans">
{/* Accessibility: Skip to main content */} {/* Accessibility: Skip to main content */}
<a <a
href="#main-content" href="#main-content"
className="absolute left-0 top-0 -translate-y-full bg-emerald-600 text-white px-4 py-2 rounded-br-lg font-medium focus:translate-y-0 z-50 transition-transform duration-fast" className="absolute left-0 top-0 -translate-y-full bg-[var(--color-primary)] text-white px-4 py-2 rounded-br-lg font-medium focus:translate-y-0 z-50 transition-transform duration-fast"
> >
Skip to main content Skip to main content
</a> </a>
{/* Desktop Sidebar - Persistent on left */} {/* Desktop Sidebar - Persistent on left */}
<aside className="hidden lg:flex flex-col w-64 border-r border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-[#0B0E14] z-30"> <aside className="hidden lg:flex flex-col w-[260px] border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-secondary)] z-30">
<div className="h-16 flex items-center px-6 border-b border-slate-200 dark:border-slate-800"> <div className="h-16 flex items-center px-6 border-b border-[var(--color-border-subtle)]">
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-emerald-600 flex items-center justify-center text-white font-bold text-xl italic shadow-lg shadow-emerald-500/20"> <div className="w-9 h-9 rounded-xl bg-[var(--color-primary)] flex items-center justify-center text-[var(--color-text-inverse)] font-bold text-lg shadow-lg shadow-emerald-500/20">
V V
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-xs font-bold uppercase tracking-widest leading-none">Veridian</span> <span className="text-sm font-bold tracking-tight leading-none text-[var(--color-text-primary)]">Veridian</span>
<span className="text-[10px] text-slate-500 font-medium uppercase tracking-tighter leading-none mt-0.5">Platform v2.0</span> <span className="text-[10px] text-[var(--color-text-tertiary)] font-medium uppercase tracking-wider leading-none mt-0.5">Cultivation Platform</span>
</div> </div>
</div> </div>
</div> </div>
<div className="flex-1 overflow-y-auto pt-4"> <div className="flex-1 overflow-y-auto pt-4">
<Sidebar /> <Sidebar />
</div> </div>
<div className="p-4 border-t border-slate-200 dark:border-slate-800"> <div className="p-4 border-t border-[var(--color-border-subtle)]">
<UserMenu /> <UserMenu />
</div> </div>
</aside> </aside>
@ -54,48 +54,48 @@ export default function Layout() {
{/* Main Content Area */} {/* Main Content Area */}
<div className="flex-1 flex flex-col min-w-0 overflow-hidden relative"> <div className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
{/* Topbar - Search, Global Filters, Vitals */} {/* Topbar - Search, Global Filters, Vitals */}
<header className="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 border-b border-slate-200 dark:border-slate-800 bg-white/50 dark:bg-[#0B0E14]/50 backdrop-blur-md z-20"> <header className="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 border-b border-[var(--color-border-subtle)] bg-[var(--color-bg-secondary)]/80 backdrop-blur-xl z-20">
<div className="flex items-center gap-4 flex-1"> <div className="flex items-center gap-4 flex-1">
{/* Facility Switcher / Filter */} {/* Facility Switcher / Filter */}
<div className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors"> <div className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] cursor-pointer hover:border-[var(--color-border-default)] transition-all">
<span className="text-xs font-bold uppercase tracking-widest text-slate-500">Facility</span> <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-tertiary)]">Facility</span>
<span className="text-xs font-bold">NORCAL-01</span> <span className="text-xs font-bold text-[var(--color-text-primary)]">NORCAL-01</span>
<ChevronDown size={14} className="text-slate-500" /> <ChevronDown size={14} className="text-[var(--color-text-tertiary)]" />
</div> </div>
{/* Global Search */} {/* Global Search */}
<div className="relative group max-w-sm w-full hidden sm:block"> <div className="relative group max-w-sm w-full hidden sm:block">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-emerald-500 transition-colors" size={16} /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)] group-focus-within:text-[var(--color-primary)] transition-colors" size={16} />
<input <input
type="text" type="text"
placeholder="Search batches, rooms, tasks..." placeholder="Search batches, rooms, tasks..."
className="w-full bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all" className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-full pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-all"
/> />
<div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-50"> <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-50">
<kbd className="text-[10px] font-mono">⌘</kbd> <kbd className="text-[10px] font-mono text-[var(--color-text-tertiary)]">⌘</kbd>
<kbd className="text-[10px] font-mono">K</kbd> <kbd className="text-[10px] font-mono text-[var(--color-text-tertiary)]">K</kbd>
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="hidden md:flex items-center gap-4 mr-4 text-[11px] font-bold uppercase tracking-widest text-slate-500"> <div className="hidden md:flex items-center gap-4 mr-4 text-[11px] font-semibold uppercase tracking-wider text-[var(--color-text-tertiary)]">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" /> <div className="w-2 h-2 rounded-full bg-[var(--color-success)] animate-pulse" />
<span>Terminal Live</span> <span>Terminal Live</span>
</div> </div>
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<div className="w-2 h-2 rounded-full bg-blue-500" /> <div className="w-2 h-2 rounded-full bg-[var(--color-accent)]" />
<span>32 Sensors Active</span> <span>32 Sensors Active</span>
</div> </div>
</div> </div>
<ThemeToggle /> <ThemeToggle />
<button className="relative p-2 text-slate-500 hover:text-emerald-500 transition-colors rounded-lg hover:bg-slate-100 dark:hover:bg-slate-900"> <button className="relative p-2 text-[var(--color-text-tertiary)] hover:text-[var(--color-primary)] transition-colors rounded-lg hover:bg-[var(--color-bg-tertiary)]">
<Bell size={20} /> <Bell size={20} />
<span className="absolute top-2 right-2 w-2 h-2 bg-rose-500 rounded-full ring-2 ring-white dark:ring-[#0B0E14]" /> <span className="absolute top-2 right-2 w-2 h-2 bg-[var(--color-error)] rounded-full ring-2 ring-[var(--color-bg-primary)]" />
</button> </button>
<button className="lg:hidden p-2 text-slate-500" onClick={() => setMobileSheetOpen(true)}> <button className="lg:hidden p-2 text-[var(--color-text-tertiary)]" onClick={() => setMobileSheetOpen(true)}>
<Filter size={20} /> <Filter size={20} />
</button> </button>
</div> </div>

219
frontend/src/index.css
View file

@ -29,90 +29,143 @@
--duration-slow: 250ms; --duration-slow: 250ms;
--duration-slower: 400ms; --duration-slower: 400ms;
/* Light mode - adjusted for clarity but focus is dark mode */ /* ===== NEW DESIGN SYSTEM: Climate Monitoring Palette ===== */
--color-bg-primary: #FFFFFF;
--color-bg-secondary: #F8FAFC; /* Light mode backgrounds */
--color-bg-tertiary: #F1F5F9; --color-bg-primary: #F9FAFB;
--color-bg-secondary: #F1F5F9;
--color-bg-tertiary: #E2E8F0;
--color-bg-elevated: #FFFFFF; --color-bg-elevated: #FFFFFF;
/* Light mode text */
--color-text-primary: #0F172A; --color-text-primary: #0F172A;
--color-text-secondary: #475569; --color-text-secondary: #475569;
--color-text-tertiary: #94A3B8; --color-text-tertiary: #94A3B8;
--color-text-quaternary: #CBD5E1; --color-text-quaternary: #CBD5E1;
--color-text-inverse: #F9FAFB;
/* Light mode borders */
--color-border-default: #E2E8F0; --color-border-default: #E2E8F0;
--color-border-subtle: #F1F5F9; --color-border-subtle: #F1F5F9;
--color-border-strong: #94A3B8; --color-border-strong: #94A3B8;
--color-accent: #10B981; /* Cultivation Green */ /* Primary accent (Cultivation Green) */
--color-accent-hover: #059669; --color-primary: #4ADE80;
--color-accent-muted: rgba(16, 185, 129, 0.1); --color-primary-hover: #22C55E;
--color-primary-soft: rgba(74, 222, 128, 0.15);
/* Secondary accent (Cyan/Blue) */
--color-accent: #38BDF8;
--color-accent-hover: #0EA5E9;
--color-accent-soft: rgba(56, 189, 248, 0.15);
/* Status colors */
--color-success: #4ADE80;
--color-warning: #FACC15;
--color-error: #F97373;
--color-info: #38BDF8;
/* Chart colors */
--color-chart-green: #4ADE80;
--color-chart-blue: #38BDF8;
--color-chart-orange: #FDBA74;
--color-chart-purple: #A855F7;
--color-chart-gridline: #E2E8F0;
/* Layout constants */
--sidebar-width: 260px;
--topbar-height: 64px;
--card-radius: 16px;
--card-padding: 20px;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 999px;
/* shadcn/ui compatibility */ /* shadcn/ui compatibility */
--background: 0 0% 100%; --background: 210 20% 98%;
--foreground: 222 47% 11%; --foreground: 222 47% 11%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 222 47% 11%; --card-foreground: 222 47% 11%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 222 47% 11%; --popover-foreground: 222 47% 11%;
--primary: 161 72% 33%; /* Emerald 700 */ --primary: 142 71% 45%;
--primary-foreground: 0 0% 100%; --primary-foreground: 0 0% 100%;
--secondary: 210 40% 96%; --secondary: 210 40% 96%;
--secondary-foreground: 222 47% 11%; --secondary-foreground: 222 47% 11%;
--muted: 210 40% 96%; --muted: 210 40% 96%;
--muted-foreground: 215 16% 47%; --muted-foreground: 215 16% 47%;
--accent: 161 72% 33%; --accent: 199 89% 48%;
--accent-foreground: 0 0% 100%; --accent-foreground: 0 0% 100%;
--destructive: 0 84% 60%; --destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%; --destructive-foreground: 0 0% 100%;
--border: 214 32% 91%; --border: 214 32% 91%;
--input: 214 32% 91%; --input: 214 32% 91%;
--ring: 161 72% 43%; --ring: 142 71% 45%;
--radius: 8px; --radius: 16px;
} }
/* Dark mode (Charcoal / Deep Blue-Gray) - THE DEFAULT */ /* ===== DARK MODE (Primary Theme) ===== */
.dark { .dark {
--color-bg-primary: #0B0E14; /* Deep Charcoal */ /* Backgrounds - Deep blue-charcoal */
--color-bg-secondary: #13171F; --color-bg-primary: #0B1020;
--color-bg-tertiary: #1C222D; --color-bg-secondary: #11182A;
--color-bg-elevated: #161B26; --color-bg-tertiary: #151C30;
--color-bg-elevated: #11182A;
--color-text-primary: #F1F5F9; /* Text */
--color-text-secondary: #94A3B8; --color-text-primary: #F9FAFB;
--color-text-tertiary: #64748B; --color-text-secondary: #9CA3AF;
--color-text-quaternary: #334155; --color-text-tertiary: #6B7280;
--color-text-quaternary: #374151;
--color-text-inverse: #020617;
/* Borders */
--color-border-default: #1E293B; --color-border-default: #1E293B;
--color-border-subtle: #161B26; --color-border-subtle: #151C30;
--color-border-strong: #334155; --color-border-strong: #334155;
/* Primary (Emerald Green) */
--color-primary: #4ADE80;
--color-primary-hover: #22C55E;
--color-primary-soft: #1C3B2B;
/* Accent (Cyan) */
--color-accent: #38BDF8;
--color-accent-hover: #0EA5E9;
--color-accent-soft: #102538;
/* Status Colors */ /* Status Colors */
--color-success: #10B981; --color-success: #4ADE80;
--color-warning: #F59E0B; --color-warning: #FACC15;
--color-error: #EF4444; --color-error: #F97373;
--color-info: #0EA5E9; --color-info: #38BDF8;
/* Chart colors */
--color-chart-gridline: #1E293B;
/* shadcn/ui compatibility */ /* shadcn/ui compatibility */
--background: 222 47% 6%; /* Very dark blue-gray */ --background: 222 47% 5%;
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
--card: 222 47% 9%; --card: 222 47% 8%;
--card-foreground: 210 40% 98%; --card-foreground: 210 40% 98%;
--popover: 222 47% 9%; --popover: 222 47% 8%;
--popover-foreground: 210 40% 98%; --popover-foreground: 210 40% 98%;
--primary: 142 76% 36%; /* Greenish for cultivation */ --primary: 142 71% 45%;
--primary-foreground: 355 100% 100%; --primary-foreground: 222 47% 5%;
--secondary: 222 47% 15%; --secondary: 222 47% 12%;
--secondary-foreground: 210 40% 98%; --secondary-foreground: 210 40% 98%;
--muted: 222 47% 15%; --muted: 222 47% 12%;
--muted-foreground: 215 20% 65%; --muted-foreground: 215 20% 65%;
--accent: 142 76% 36%; --accent: 199 89% 48%;
--accent-foreground: 210 40% 98%; --accent-foreground: 210 40% 98%;
--destructive: 0 63% 31%; --destructive: 0 63% 45%;
--destructive-foreground: 210 40% 98%; --destructive-foreground: 210 40% 98%;
--border: 217 33% 17%; --border: 217 33% 17%;
--input: 217 33% 17%; --input: 217 33% 17%;
--ring: 142 76% 36%; --ring: 142 71% 45%;
} }
/* ============================================ /* ============================================
@ -357,19 +410,19 @@
padding: 0 14px; padding: 0 14px;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
border-radius: 6px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
} }
.btn-primary { .btn-primary {
background-color: var(--color-accent); background-color: var(--color-primary);
color: white; color: var(--color-text-inverse);
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background-color: var(--color-accent-hover); background-color: var(--color-primary-hover);
} }
.btn-secondary { .btn-secondary {
@ -409,12 +462,13 @@
} }
/* ============================================ /* ============================================
Card Styles Card Styles (Climate Monitoring Design)
============================================ */ ============================================ */
.card { .card {
background-color: var(--color-bg-elevated); background-color: var(--color-bg-elevated);
border: 1px solid var(--color-border-subtle); border: 1px solid var(--color-border-subtle);
border-radius: 8px; border-radius: var(--card-radius);
padding: var(--card-padding);
transition: transition:
border-color var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-out-expo),
box-shadow var(--duration-normal) var(--ease-out-expo); box-shadow var(--duration-normal) var(--ease-out-expo);
@ -424,13 +478,33 @@
border-color: var(--color-border-default); border-color: var(--color-border-default);
} }
.card-interactive {
cursor: pointer;
}
.card-interactive:hover { .card-interactive:hover {
border-color: var(--color-border-strong); border-color: var(--color-border-strong);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.dark .card {
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
} }
.dark .card-interactive:hover { .dark .card-interactive:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.65);
}
/* Stat/KPI Card */
.stat-card {
background-color: var(--color-bg-elevated);
border: 1px solid var(--color-border-subtle);
border-radius: var(--card-radius);
padding: var(--card-padding);
}
.dark .stat-card {
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
} }
/* ============================================ /* ============================================
@ -460,37 +534,68 @@
} }
/* ============================================ /* ============================================
Badge Styles Badge Styles (Pill design)
============================================ */ ============================================ */
.badge { .badge {
@apply inline-flex items-center justify-center; @apply inline-flex items-center justify-center;
height: 20px; height: 22px;
padding: 0 6px; padding: 0 10px;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 600;
border-radius: 4px; letter-spacing: 0.06em;
border-radius: var(--radius-full);
background-color: var(--color-bg-tertiary); background-color: var(--color-bg-tertiary);
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
.badge-accent { .badge-accent {
background-color: var(--color-accent-muted); background-color: var(--color-accent-soft);
color: var(--color-accent); color: var(--color-accent);
} }
.badge-primary {
background-color: var(--color-primary-soft);
color: var(--color-primary);
}
.badge-success { .badge-success {
background-color: rgba(34, 197, 94, 0.15); background-color: var(--color-success);
color: #22C55E; color: var(--color-text-inverse);
} }
.badge-warning { .badge-warning {
background-color: rgba(234, 179, 8, 0.15); background-color: var(--color-warning);
color: #CA8A04; color: var(--color-text-inverse);
} }
.badge-destructive { .badge-destructive {
background-color: rgba(239, 68, 68, 0.15); background-color: var(--color-error);
color: #EF4444; color: var(--color-text-inverse);
}
/* Chip (smaller, for filters) */
.chip {
@apply inline-flex items-center justify-center;
height: 26px;
padding: 0 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: var(--radius-full);
background-color: var(--color-bg-tertiary);
color: var(--color-text-secondary);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out-expo);
}
.chip:hover {
background-color: var(--color-border-default);
color: var(--color-text-primary);
}
.chip.active {
background-color: var(--color-primary);
color: var(--color-text-inverse);
} }
/* ============================================ /* ============================================