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

style: Clean up typography across all pages
Some checks are pending
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source 
- Remove italic styling from headers throughout app
- Reduce excessive font-black to font-bold
- Clean up tracking-widest to tracking-wider
- Normalize button styling across pages
This commit is contained in:
fullsizemalt 2025-12-27 13:09:04 -08:00
parent f7c71f2e5f
commit 4b37e9fa84
9 changed files with 54 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/pages/AuditLogPage.tsx
View file

@ -165,10 +165,10 @@ export default function AuditLogPage() {
{/* Header section */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div className="space-y-1">
<h1 className="text-3xl font-extra-bold tracking-tight text-[var(--color-text-primary)] uppercase italic">
<h1 className="text-3xl font-bold tracking-tight text-[var(--color-text-primary)]">
System Ledger
</h1>
<div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-bold uppercase tracking-widest">
<div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-medium">
<ShieldCheck size={14} className="text-[var(--color-accent)]" />
<span>High-fidelity audit trail • Compliant with Title 21 CFR Part 11</span>
</div>
@ -276,7 +276,7 @@ export default function AuditLogPage() {
{/* Property Diff Visualization */}
<div className="space-y-4">
<div className="flex items-center justify-between">
<h4 className="text-[10px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest border-l-2 border-emerald-500 pl-2">State Transition Map</h4>
<h4 className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider border-l-2 border-emerald-500 pl-2">State Transition Map</h4>
</div>
{selectedLog.changes && Object.keys(selectedLog.changes).length > 0 ? (
@ -309,7 +309,7 @@ export default function AuditLogPage() {
{/* Modal Footer */}
<div className="p-4 bg-slate-900/60 border-t border-slate-800 flex justify-end">
<button className="text-[10px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest hover:text-[var(--color-primary)] transition-colors flex items-center gap-2">
<button className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider hover:text-[var(--color-primary)] transition-colors flex items-center gap-2">
Verify with Blockchain Ledger <Shield size={12} />
</button>
</div>
@ -332,8 +332,8 @@ function MetricMini({ label, value, icon: Icon, color }: any) {
return (
<Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between group">
<div className="space-y-1">
<p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">{label}</p>
<div className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{value}</div>
<p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">{label}</p>
<div className="text-xl font-bold text-[var(--color-text-primary)]">{value}</div>
</div>
<div className={cn("p-2.5 rounded-lg border", colorClasses[color])}>
<Icon size={16} />
@ -345,7 +345,7 @@ function MetricMini({ label, value, icon: Icon, color }: any) {
function ModalMeta({ label, value }: any) {
return (
<div className="space-y-1">
<p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">{label}</p>
<p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">{label}</p>
<p className="text-xs font-bold text-white font-mono">{value}</p>
</div>
);

20
frontend/src/pages/BatchDetailPage.tsx
View file

@ -78,7 +78,7 @@ export default function BatchDetailPage() {
{batch.stage}
</span>
</div>
<div className="flex items-center gap-6 mt-4 text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">
<div className="flex items-center gap-6 mt-4 text-xs font-medium text-[var(--color-text-tertiary)]">
<div className="flex items-center gap-2">
<Sprout size={14} className="text-[var(--color-primary)]" />
<span>{batch.strain}</span>
@ -199,7 +199,7 @@ export default function BatchDetailPage() {
{activeTab === 'overview' && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card className="p-6 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] space-y-6">
<h4 className="text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">Quick Actions</h4>
<h4 className="text-xs font-medium text-[var(--color-text-tertiary)]">Quick Actions</h4>
<div className="grid grid-cols-2 gap-3">
<ActionButton label="Log Feeding" icon={Droplets} />
<ActionButton label="IPM Action" icon={Bug} />
@ -209,7 +209,7 @@ export default function BatchDetailPage() {
</Card>
<Card className="p-6 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] space-y-6">
<h4 className="text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">Integration Hub</h4>
<h4 className="text-xs font-medium text-[var(--color-text-tertiary)]">Integration Hub</h4>
<div className="space-y-4">
<IntegrationItem name="METRC" status="Connected" time="Sync 2m ago" />
<IntegrationItem name="DLI Monitor" status="Active" time="840 umol/m2" />
@ -219,7 +219,7 @@ export default function BatchDetailPage() {
<Card className="md:col-span-2 p-6 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)]">
<div className="flex items-center justify-between mb-6">
<h4 className="text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)] text-left">Recent Activity</h4>
<h4 className="text-xs font-medium text-[var(--color-text-tertiary)] text-left">Recent Activity</h4>
<button className="text-[10px] font-bold text-[var(--color-primary)] uppercase tracking-widest hover:underline">View All Log</button>
</div>
<div className="space-y-4">
@ -248,10 +248,10 @@ export default function BatchDetailPage() {
{activeTab === 'environment' && (
<Card className="p-8 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)]">
<div className="flex items-center justify-between mb-8">
<h4 className="text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">Sensor Rollups</h4>
<h4 className="text-xs font-medium text-[var(--color-text-tertiary)]">Sensor Rollups</h4>
<div className="flex items-center gap-2">
<button className="px-3 py-1.5 rounded-lg bg-[var(--color-bg-tertiary)] text-[10px] font-bold uppercase tracking-widest">24h</button>
<button className="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest">7d</button>
<button className="px-3 py-1.5 rounded-lg bg-[var(--color-bg-tertiary)] text-[10px] font-medium">24h</button>
<button className="px-3 py-1.5 rounded-lg text-[10px] font-medium">7d</button>
</div>
</div>
<div className="h-[400px] w-full bg-slate-50/50 dark:bg-slate-900/50 rounded-2xl border border-[var(--color-border-subtle)] flex items-center justify-center text-[var(--color-text-tertiary)]">
@ -285,7 +285,7 @@ export default function BatchDetailPage() {
</div>
<Card className="p-6 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)]">
<h4 className="text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)] mb-6">Traceability History</h4>
<h4 className="text-xs font-medium text-[var(--color-text-tertiary)] mb-6">Traceability History</h4>
<div className="space-y-0.5">
{[1, 2, 3].map(i => (
<div key={i} className="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-colors">
@ -318,7 +318,7 @@ function KPICard({ label, value, trend, status, icon: Icon }: any) {
<Icon size={14} className="text-[var(--color-text-tertiary)]" />
<span className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">{label}</span>
</div>
<div className="text-2xl font-black italic tracking-tighter text-[var(--color-text-primary)]">
<div className="text-2xl font-bold text-[var(--color-text-primary)]">
{value}
</div>
</div>
@ -391,7 +391,7 @@ function ActionButton({ label, icon: Icon }: any) {
return (
<button className="flex flex-col items-center justify-center p-4 rounded-xl bg-[var(--color-bg-tertiary)]/50 border border-[var(--color-border-subtle)]/50 hover:border-emerald-500/50 hover:bg-[var(--color-primary)]/10 transition-all group">
<Icon size={20} className="text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)] mb-2 transition-colors" />
<span className="text-[10px] font-bold uppercase tracking-widest text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)]">{label}</span>
<span className="text-[10px] font-medium text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)]">{label}</span>
</button>
);
}

22
frontend/src/pages/BatchesPage.tsx
View file

@ -196,16 +196,16 @@ export default function BatchesPage() {
{/* Page Header */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div className="space-y-1">
<h1 className="text-3xl font-extra-bold tracking-tight text-[var(--color-text-primary)] uppercase italic">
<h1 className="text-3xl font-bold tracking-tight text-[var(--color-text-primary)]">
Production Inventory
</h1>
<div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-bold uppercase tracking-widest">
<div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-medium">
<ShieldCheck size={14} className="text-[var(--color-primary)]" />
<span>{batches.length} Active Batches • METRC Integrated</span>
</div>
</div>
<button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white px-4 py-2 rounded-lg font-bold text-sm shadow-lg shadow-emerald-500/20 transition-all uppercase tracking-widest">
<button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] px-4 py-2.5 rounded-xl font-bold text-sm shadow-lg transition-all">
<Plus size={18} />
New Batch
</button>
@ -215,8 +215,8 @@ export default function BatchesPage() {
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
<div className="space-y-1">
<p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Total Batches</p>
<p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{batches.length}</p>
<p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Total Batches</p>
<p className="text-xl font-bold text-[var(--color-text-primary)]">{batches.length}</p>
</div>
<div className="p-2.5 rounded-lg border bg-[var(--color-accent)]/5 text-[var(--color-accent)] border-blue-500/10">
<Activity size={16} />
@ -224,8 +224,8 @@ export default function BatchesPage() {
</Card>
<Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
<div className="space-y-1">
<p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">In Flower</p>
<p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{flowerCount}</p>
<p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">In Flower</p>
<p className="text-xl font-bold text-[var(--color-text-primary)]">{flowerCount}</p>
</div>
<div className="p-2.5 rounded-lg border bg-purple-500/5 text-purple-500 border-purple-500/10">
<Flower size={16} />
@ -233,8 +233,8 @@ export default function BatchesPage() {
</Card>
<Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
<div className="space-y-1">
<p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">In Veg</p>
<p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{vegCount}</p>
<p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">In Veg</p>
<p className="text-xl font-bold text-[var(--color-text-primary)]">{vegCount}</p>
</div>
<div className="p-2.5 rounded-lg border bg-[var(--color-primary)]/5 text-[var(--color-primary)] border-emerald-500/10">
<Leaf size={16} />
@ -242,8 +242,8 @@ export default function BatchesPage() {
</Card>
<Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
<div className="space-y-1">
<p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Total Plants</p>
<p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{totalPlants.toLocaleString()}</p>
<p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Total Plants</p>
<p className="text-xl font-bold text-[var(--color-text-primary)]">{totalPlants.toLocaleString()}</p>
</div>
<div className="p-2.5 rounded-lg border bg-[var(--color-error)]/5 text-[var(--color-error)] border-rose-500/10">
<BarChart3 size={16} />

2
frontend/src/pages/MetrcDashboardPage.tsx
View file

@ -223,7 +223,7 @@ export default function MetrcDashboardPage() {
key={tab}
onClick={() => setActiveTab(tab as any)}
className={cn(
"px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all",
"px-6 py-2 rounded-lg text-xs font-medium transition-all",
activeTab === tab
? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
: "text-[var(--color-text-tertiary)] hover:text-slate-600 dark:hover:text-slate-200"

8
frontend/src/pages/RoomDetailPage.tsx
View file

@ -77,7 +77,7 @@ export default function RoomDetailPage() {
{room.type} Phase
</span>
</div>
<div className="flex items-center gap-6 mt-4 text-xs font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">
<div className="flex items-center gap-6 mt-4 text-xs font-medium text-[var(--color-text-tertiary)]">
<div className="flex items-center gap-2">
<Layers size={14} className="text-[var(--color-text-tertiary)]" />
<span>{room.sqft?.toLocaleString()} SQFT</span>
@ -181,7 +181,7 @@ export default function RoomDetailPage() {
</div>
</div>
<div className="text-right">
<div className="px-2 py-0.5 rounded bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-[10px] font-bold uppercase tracking-widest border border-emerald-500/20 mb-2 inline-block">
<div className="px-2 py-0.5 rounded bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-[10px] font-medium border border-emerald-500/20 mb-2 inline-block">
{batch.stage}
</div>
<div className="flex items-center gap-1.5 text-[11px] text-[var(--color-text-tertiary)] font-bold uppercase tracking-tighter">
@ -193,7 +193,7 @@ export default function RoomDetailPage() {
))}
<button className="flex flex-col items-center justify-center p-8 rounded-2xl border-2 border-dashed border-[var(--color-border-subtle)] text-[var(--color-text-tertiary)] hover:border-emerald-500 hover:text-[var(--color-primary)] transition-all">
<Plus size={24} className="mb-2" />
<span className="text-xs font-bold uppercase tracking-widest">Transfer New Batch</span>
<span className="text-xs font-medium">Transfer New Batch</span>
</button>
</div>
)}
@ -253,7 +253,7 @@ function MetricCard({ icon: Icon, label, value, unit, color, data }: {
<span className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-[0.15em]">{label}</span>
</div>
<div className="flex items-baseline gap-1">
<span className="text-2xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{value}</span>
<span className="text-2xl font-bold text-[var(--color-text-primary)]">{value}</span>
<span className="text-xs font-bold text-[var(--color-text-tertiary)]">{unit}</span>
</div>
</div>

22
frontend/src/pages/RoomsPage.tsx
View file

@ -49,17 +49,17 @@ export default function RoomsPage() {
{/* Page Header */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div className="space-y-1">
<h1 className="text-3xl font-extra-bold tracking-tight text-[var(--color-text-primary)] uppercase italic">
<h1 className="text-3xl font-bold tracking-tight text-[var(--color-text-primary)]">
Cultivation Zones
</h1>
<div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-bold uppercase tracking-widest">
<div className="flex items-center gap-2 text-[var(--color-text-tertiary)] text-xs font-medium">
<ShieldCheck size={14} className="text-[var(--color-primary)]" />
<span>{rooms.length} Active Zones • Environmental Controls Active</span>
</div>
</div>
{isManager && (
<button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white px-4 py-2 rounded-lg font-bold text-sm shadow-lg shadow-emerald-500/20 transition-all uppercase tracking-widest">
<button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] px-4 py-2.5 rounded-xl font-bold text-sm shadow-lg transition-all">
<Plus size={18} />
Add Zone
</button>
@ -70,8 +70,8 @@ export default function RoomsPage() {
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
<div className="space-y-1">
<p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Total Zones</p>
<p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{rooms.length}</p>
<p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Total Zones</p>
<p className="text-xl font-bold text-[var(--color-text-primary)]">{rooms.length}</p>
</div>
<div className="p-2.5 rounded-lg border bg-[var(--color-accent)]/5 text-[var(--color-accent)] border-blue-500/10">
<Home size={16} />
@ -79,8 +79,8 @@ export default function RoomsPage() {
</Card>
<Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
<div className="space-y-1">
<p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Veg Rooms</p>
<p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{vegCount}</p>
<p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Veg Rooms</p>
<p className="text-xl font-bold text-[var(--color-text-primary)]">{vegCount}</p>
</div>
<div className="p-2.5 rounded-lg border bg-[var(--color-primary)]/5 text-[var(--color-primary)] border-emerald-500/10">
<Leaf size={16} />
@ -88,8 +88,8 @@ export default function RoomsPage() {
</Card>
<Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
<div className="space-y-1">
<p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Flower Rooms</p>
<p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{flowerCount}</p>
<p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Flower Rooms</p>
<p className="text-xl font-bold text-[var(--color-text-primary)]">{flowerCount}</p>
</div>
<div className="p-2.5 rounded-lg border bg-purple-500/5 text-purple-500 border-purple-500/10">
<Flower size={16} />
@ -97,8 +97,8 @@ export default function RoomsPage() {
</Card>
<Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] flex items-center justify-between">
<div className="space-y-1">
<p className="text-[9px] font-black text-[var(--color-text-tertiary)] uppercase tracking-widest">Active Batches</p>
<p className="text-xl font-black italic tracking-tighter text-[var(--color-text-primary)]">{totalBatches}</p>
<p className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">Active Batches</p>
<p className="text-xl font-bold text-[var(--color-text-primary)]">{totalBatches}</p>
</div>
<div className="p-2.5 rounded-lg border bg-[var(--color-warning)]/5 text-[var(--color-warning)] border-amber-500/10">
<Activity size={16} />

12
frontend/src/pages/SuppliesPage.tsx
View file

@ -197,7 +197,7 @@ export default function SuppliesPage() {
<button
onClick={(e) => { e.stopPropagation(); handleMarkOrdered(item.id); }}
className={cn(
"text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-lg border transition-all",
"text-[10px] font-medium px-3 py-1.5 rounded-lg border transition-all",
item.lastOrdered && new Date(item.lastOrdered).toDateString() === new Date().toDateString()
? "bg-emerald-50 text-[var(--color-primary)] border-emerald-100"
: "bg-rose-50 text-rose-600 border-rose-100 hover:bg-rose-100"
@ -254,7 +254,7 @@ export default function SuppliesPage() {
<div className="flex justify-between items-start">
<div>
<p className={cn(
"text-[10px] font-bold uppercase tracking-widest mb-1",
"text-[10px] font-medium mb-1",
shoppingListCount > 0 ? "text-[var(--color-error)]" : "text-[var(--color-primary)]"
)}>
Shortages Detected
@ -290,7 +290,7 @@ export default function SuppliesPage() {
<button
onClick={() => setView('all')}
className={cn(
"px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all",
"px-6 py-2 rounded-lg text-xs font-medium transition-all",
view === 'all'
? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
: "text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300"
@ -301,7 +301,7 @@ export default function SuppliesPage() {
<button
onClick={() => setView('shopping')}
className={cn(
"px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all relative",
"px-6 py-2 rounded-lg text-xs font-medium transition-all relative",
view === 'shopping'
? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
: "text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300"
@ -315,7 +315,7 @@ export default function SuppliesPage() {
<button
onClick={() => setCategoryFilter('ALL')}
className={cn(
"px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all border",
"px-4 py-2 rounded-lg text-[10px] font-medium transition-all border",
categoryFilter === 'ALL'
? "bg-indigo-500 text-white border-indigo-500"
: "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)] border-[var(--color-border-subtle)]"
@ -328,7 +328,7 @@ export default function SuppliesPage() {
key={cat}
onClick={() => setCategoryFilter(cat)}
className={cn(
"px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all border whitespace-nowrap",
"px-4 py-2 rounded-lg text-[10px] font-medium transition-all border whitespace-nowrap",
categoryFilter === cat
? "bg-indigo-500 text-white border-indigo-500"
: "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)] border-[var(--color-border-subtle)]"

2
frontend/src/pages/TasksPage.tsx
View file

@ -126,7 +126,7 @@ export default function TasksPage() {
</Card>
<Card className="p-4 bg-[var(--color-bg-tertiary)]/50 border-[var(--color-border-subtle)] border-dashed">
<p className="text-[10px] text-[var(--color-text-tertiary)] font-bold uppercase tracking-widest leading-relaxed">
<p className="text-[10px] text-[var(--color-text-tertiary)] font-medium leading-relaxed">
<AlertCircle size={10} className="inline mr-1 mb-0.5" />
System Note:
</p>

6
frontend/src/pages/VisitorManagementPage.tsx
View file

@ -137,7 +137,7 @@ export default function VisitorManagementPage() {
<div className="flex justify-end gap-2">
<button
onClick={(e) => { e.stopPropagation(); handleCheckOut(v); }}
className="text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 transition-all"
className="text-[10px] font-medium px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 transition-all"
>
Sign Out
</button>
@ -261,7 +261,7 @@ export default function VisitorManagementPage() {
key={tab.id}
onClick={() => setActiveTab(tab.id as TabType)}
className={cn(
"px-5 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all flex items-center gap-2",
"px-5 py-2 rounded-lg text-xs font-medium transition-all flex items-center gap-2",
activeTab === tab.id
? "bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] shadow-sm"
: "text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300"
@ -396,7 +396,7 @@ export default function VisitorManagementPage() {
))}
<button className="card border-dashed p-8 flex flex-col items-center justify-center gap-3 text-[var(--color-text-tertiary)] hover:text-indigo-500 hover:border-indigo-500/50 transition-all">
<Plus className="animate-pulse" />
<span className="text-xs font-bold uppercase tracking-widest">Register Access Zone</span>
<span className="text-xs font-medium">Register Access Zone</span>
</button>
</motion.div>
)}