From e88814afef0d62ab97dc5ab972fc7a8cb2fcddcb Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 27 Dec 2025 15:03:36 -0800
Subject: [PATCH] fix: Expose Generate Zone button and refine styling (remove
 italics/caps, improve contrast)

---
 frontend/src/index.css                 |  2 +-
 frontend/src/pages/AuditLogPage.tsx    | 14 +++++-----
 frontend/src/pages/BatchDetailPage.tsx |  8 +++---
 frontend/src/pages/BatchesPage.tsx     |  2 +-
 frontend/src/pages/RoomDetailPage.tsx  |  4 +--
 frontend/src/pages/RoomsPage.tsx       | 38 +++++++++++++-------------
 frontend/src/pages/TasksPage.tsx       |  6 ++--
 7 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 909dcee..ddb114e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -40,7 +40,7 @@
     /* Light mode text */
     --color-text-primary: #0F172A;
     --color-text-secondary: #334155;
-    --color-text-tertiary: #64748B;
+    --color-text-tertiary: #475569;
     --color-text-quaternary: #94A3B8;
     --color-text-inverse: #F9FAFB;
 
diff --git a/frontend/src/pages/AuditLogPage.tsx b/frontend/src/pages/AuditLogPage.tsx
index cce8f59..a49b105 100644
--- a/frontend/src/pages/AuditLogPage.tsx
+++ b/frontend/src/pages/AuditLogPage.tsx
@@ -91,7 +91,7 @@ export default function AuditLogPage() {
             header: 'Timestamp',
             cell: (log) => (
                 <div className="flex flex-col">
-                    <span className="text-xs font-extra-bold text-[var(--color-text-primary)] font-mono tracking-tight">
+                    <span className="text-xs font-bold text-[var(--color-text-primary)] font-mono tracking-tight">
                         {new Date(log.timestamp).toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                     </span>
                     <span className="text-[10px] text-[var(--color-text-tertiary)] font-bold uppercase tracking-tighter">
@@ -122,7 +122,7 @@ export default function AuditLogPage() {
                 const Icon = config.icon;
                 return (
                     <div className={cn(
-                        "inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-black uppercase tracking-[0.15em]",
+                        "inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-bold uppercase tracking-[0.15em]",
                         config.color
                     )}>
                         <Icon size={10} />
@@ -136,7 +136,7 @@ export default function AuditLogPage() {
             header: 'Resource',
             cell: (log) => (
                 <div className="flex flex-col">
-                    <span className="text-xs font-bold text-[var(--color-text-primary)] uppercase italic tracking-tight">
+                    <span className="text-xs font-bold text-[var(--color-text-primary)]  tracking-tight">
                         {ENTITY_LABELS[log.entity] || log.entity}
                     </span>
                     {log.entityName && (
@@ -218,7 +218,7 @@ export default function AuditLogPage() {
                         >
                             <Terminal size={14} className="rotate-180" />
                         </button>
-                        <div className="flex items-center px-4 text-xs font-black text-[var(--color-text-primary)] bg-slate-100 dark:bg-slate-800 rounded border border-[var(--color-border-subtle)]">
+                        <div className="flex items-center px-4 text-xs font-bold text-[var(--color-text-primary)] bg-slate-100 dark:bg-slate-800 rounded border border-[var(--color-border-subtle)]">
                             {pagination.page} / {pagination.pages}
                         </div>
                         <button
@@ -254,9 +254,9 @@ export default function AuditLogPage() {
                                 <div>
                                     <div className="flex items-center gap-2 mb-1">
                                         <Terminal size={14} className="text-[var(--color-accent)]" />
-                                        <h3 className="text-xs font-black text-[var(--color-text-tertiary)] uppercase tracking-[0.2em]">Transaction_Inspector</h3>
+                                        <h3 className="text-xs font-bold text-[var(--color-text-tertiary)] uppercase tracking-wide">Transaction_Inspector</h3>
                                     </div>
-                                    <h3 className="text-xl font-extra-bold text-white uppercase italic tracking-tight">Record Object Detail</h3>
+                                    <h3 className="text-xl font-bold text-white  tracking-tight">Record Object Detail</h3>
                                 </div>
                                 <button onClick={() => setSelectedLog(null)} className="p-2 text-[var(--color-text-tertiary)] hover:text-white transition-colors">
                                     <X size={20} />
@@ -283,7 +283,7 @@ export default function AuditLogPage() {
                                         <div className="space-y-3">
                                             {Object.entries(selectedLog.changes).map(([key, val]: [string, any]) => (
                                                 <div key={key} className="p-4 bg-slate-900/50 rounded-xl border border-slate-800/50">
-                                                    <div className="text-[10px] font-black text-[var(--color-text-tertiary)] mb-3 uppercase tracking-widest italic">{key}</div>
+                                                    <div className="text-[10px] font-bold text-[var(--color-text-tertiary)] mb-3 uppercase tracking-widest italic">{key}</div>
                                                     <div className="grid grid-cols-1 md:grid-cols-[1fr,24px,1fr] items-center gap-4">
                                                         <div className="p-3 bg-[var(--color-error)]/5 border border-rose-500/10 rounded font-mono text-xs text-[var(--color-error)]/80 whitespace-pre-wrap break-all">
                                                             <div className="text-[8px] uppercase font-bold text-[var(--color-error)]/50 mb-1">Previous_State</div>
diff --git a/frontend/src/pages/BatchDetailPage.tsx b/frontend/src/pages/BatchDetailPage.tsx
index 5f1482d..5cae2dc 100644
--- a/frontend/src/pages/BatchDetailPage.tsx
+++ b/frontend/src/pages/BatchDetailPage.tsx
@@ -66,11 +66,11 @@ export default function BatchDetailPage() {
 
                     <div>
                         <div className="flex items-center gap-3">
-                            <h1 className="text-4xl font-black tracking-tight text-[var(--color-text-primary)] uppercase italic">
+                            <h1 className="text-4xl font-bold tracking-tight text-[var(--color-text-primary)] ">
                                 {batch.name}
                             </h1>
                             <span className={cn(
-                                "px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-[0.2em] border shadow-sm",
+                                "px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide border shadow-sm",
                                 batch.stage === 'FLOWERING'
                                     ? "bg-purple-500/10 border-purple-500/20 text-purple-500"
                                     : "bg-[var(--color-primary)]/10 border-emerald-500/20 text-[var(--color-primary)]"
@@ -122,7 +122,7 @@ export default function BatchDetailPage() {
                 {/* Vertical Timeline - Left Column */}
                 <div className="xl:col-span-3 space-y-6">
                     <div className="flex items-center justify-between px-2">
-                        <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">Batch Lifecycle</h3>
+                        <h3 className="text-xs font-bold uppercase tracking-wide text-[var(--color-text-tertiary)]">Batch Lifecycle</h3>
                         <History size={14} className="text-[var(--color-text-tertiary)]" />
                     </div>
 
@@ -347,7 +347,7 @@ function TimelineEvent({ status, title, date, desc, icon: Icon }: any) {
                 <div className="flex items-center gap-2">
                     <Icon size={12} className={status === 'completed' ? "text-[var(--color-primary)]" : "text-[var(--color-text-tertiary)]"} />
                     <h5 className={cn(
-                        "text-[11px] font-black uppercase tracking-widest",
+                        "text-[11px] font-bold uppercase tracking-widest",
                         status === 'completed' ? "text-[var(--color-text-primary)]" : "text-[var(--color-text-tertiary)]"
                     )}>{title}</h5>
                 </div>
diff --git a/frontend/src/pages/BatchesPage.tsx b/frontend/src/pages/BatchesPage.tsx
index 7a6219c..5e4e693 100644
--- a/frontend/src/pages/BatchesPage.tsx
+++ b/frontend/src/pages/BatchesPage.tsx
@@ -29,7 +29,7 @@ function StageBadge({ stage }: { stage: string }) {
     const Icon = info.icon;
 
     return (
-        <span className={cn("inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-black uppercase tracking-widest", info.color)}>
+        <span className={cn("inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-bold uppercase tracking-widest", info.color)}>
             {Icon && <Icon size={10} />}
             {info.label}
         </span>
diff --git a/frontend/src/pages/RoomDetailPage.tsx b/frontend/src/pages/RoomDetailPage.tsx
index 6c229db..a2cf453 100644
--- a/frontend/src/pages/RoomDetailPage.tsx
+++ b/frontend/src/pages/RoomDetailPage.tsx
@@ -65,11 +65,11 @@ export default function RoomDetailPage() {
 
                     <div>
                         <div className="flex items-center gap-3">
-                            <h1 className="text-4xl font-black tracking-tight text-[var(--color-text-primary)] uppercase italic">
+                            <h1 className="text-4xl font-bold tracking-tight text-[var(--color-text-primary)] ">
                                 {room.name?.replace('[DEMO] ', '')}
                             </h1>
                             <span className={cn(
-                                "px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-[0.2em] border shadow-sm",
+                                "px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide border shadow-sm",
                                 room.type === 'FLOWER'
                                     ? "bg-purple-500/10 border-purple-500/20 text-purple-500"
                                     : "bg-[var(--color-primary)]/10 border-emerald-500/20 text-[var(--color-primary)]"
diff --git a/frontend/src/pages/RoomsPage.tsx b/frontend/src/pages/RoomsPage.tsx
index f9e0692..9647c08 100644
--- a/frontend/src/pages/RoomsPage.tsx
+++ b/frontend/src/pages/RoomsPage.tsx
@@ -60,21 +60,21 @@ export default function RoomsPage() {
                     </div>
                 </div>
 
-                {isManager && (
-                    <div className="flex gap-3">
-                        <button
-                            onClick={() => setIsWizardOpen(true)}
-                            className="flex items-center gap-2 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/50 px-4 py-2.5 rounded-xl font-bold text-sm shadow-lg transition-all"
-                        >
-                            <Wand2 size={18} />
-                            Generate Zone
-                        </button>
+                <div className="flex gap-3">
+                    <button
+                        onClick={() => setIsWizardOpen(true)}
+                        className="flex items-center gap-2 bg-[var(--color-primary)]/10 hover:bg-[var(--color-primary)]/20 text-[var(--color-primary)] border border-[var(--color-primary)]/20 px-4 py-2.5 rounded-xl font-bold text-sm shadow-sm transition-all"
+                    >
+                        <Wand2 size={18} />
+                        Generate Zone
+                    </button>
+                    {isManager && (
                         <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>
-                    </div>
-                )}
+                    )}
+                </div>
             </div>
 
             {/* KPI Strip */}
@@ -171,7 +171,7 @@ export default function RoomsPage() {
                                     <div className={cn("px-5 py-4 border-b border-[var(--color-border-subtle)] flex items-center justify-between", accentClasses[accent as keyof typeof accentClasses])}>
                                         <div className="flex items-center gap-3">
                                             <Icon size={16} />
-                                            <span className="text-[10px] font-black uppercase tracking-[0.2em]">{room.type}</span>
+                                            <span className="text-xs font-bold">{room.type}</span>
                                         </div>
                                         <ArrowRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
                                     </div>
@@ -179,10 +179,10 @@ export default function RoomsPage() {
                                     {/* Body */}
                                     <div className="p-5 space-y-4">
                                         <div>
-                                            <h3 className="text-lg font-extra-bold text-[var(--color-text-primary)] uppercase italic tracking-tight">
+                                            <h3 className="text-lg font-bold text-[var(--color-text-primary)]">
                                                 {room.name?.replace('[DEMO] ', '')}
                                             </h3>
-                                            <p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest mt-1">
+                                            <p className="text-xs font-medium text-[var(--color-text-tertiary)] mt-1">
                                                 {room.sqft?.toLocaleString()} sqft • Capacity {room.capacity || '—'}
                                             </p>
                                         </div>
@@ -190,18 +190,18 @@ export default function RoomsPage() {
                                         {/* Environmental Vitals */}
                                         <div className="grid grid-cols-2 gap-4 py-4 border-y border-[var(--color-border-subtle)]">
                                             <div className="text-center">
-                                                <div className="flex items-center justify-center gap-1.5 text-xl font-black tracking-tighter text-[var(--color-text-primary)]">
+                                                <div className="flex items-center justify-center gap-1.5 text-xl font-bold tracking-tight text-[var(--color-text-primary)]">
                                                     <Thermometer size={14} className="text-[var(--color-error)]" />
                                                     {room.targetTemp || '—'}°F
                                                 </div>
-                                                <span className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">Target Temp</span>
+                                                <span className="text-xs font-medium text-[var(--color-text-tertiary)]">Target Temp</span>
                                             </div>
                                             <div className="text-center">
-                                                <div className="flex items-center justify-center gap-1.5 text-xl font-black tracking-tighter text-[var(--color-text-primary)]">
+                                                <div className="flex items-center justify-center gap-1.5 text-xl font-bold tracking-tight text-[var(--color-text-primary)]">
                                                     <Droplets size={14} className="text-[var(--color-accent)]" />
                                                     {room.targetHumidity || '—'}%
                                                 </div>
-                                                <span className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">Target RH</span>
+                                                <span className="text-xs font-medium text-[var(--color-text-tertiary)]">Target RH</span>
                                             </div>
                                         </div>
 
@@ -213,7 +213,7 @@ export default function RoomsPage() {
                                                     {room.batches?.length || 0} Active Batch{room.batches?.length === 1 ? '' : 'es'}
                                                 </span>
                                             </div>
-                                            <span className="text-[10px] font-bold text-[var(--color-primary)] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">
+                                            <span className="text-xs font-bold text-[var(--color-primary)] opacity-0 group-hover:opacity-100 transition-opacity">
                                                 Enter →
                                             </span>
                                         </div>
diff --git a/frontend/src/pages/TasksPage.tsx b/frontend/src/pages/TasksPage.tsx
index d5116ca..2a58f1c 100644
--- a/frontend/src/pages/TasksPage.tsx
+++ b/frontend/src/pages/TasksPage.tsx
@@ -141,7 +141,7 @@ export default function TasksPage() {
                     {/* Active Tasks Section */}
                     <div className="space-y-4">
                         <div className="flex items-center justify-between px-2">
-                            <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">Active Board</h3>
+                            <h3 className="text-xs font-bold uppercase tracking-wide text-[var(--color-text-tertiary)]">Active Board</h3>
                             <span className="text-[10px] font-bold text-[var(--color-text-tertiary)]">{pendingTasks.length} ITEMS</span>
                         </div>
 
@@ -176,7 +176,7 @@ export default function TasksPage() {
                     {completedTasks.length > 0 && (
                         <div className="space-y-4 pt-4 border-t border-[var(--color-border-subtle)]">
                             <div className="flex items-center justify-between px-2">
-                                <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">Archive / Verification</h3>
+                                <h3 className="text-xs font-bold uppercase tracking-wide text-[var(--color-text-tertiary)]">Archive / Verification</h3>
                                 <button className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest hover:text-[var(--color-primary)]">View History</button>
                             </div>
                             <div className="opacity-60 saturate-50 hover:opacity-100 transition-all duration-500 space-y-2">
@@ -266,7 +266,7 @@ function TaskRow({ task, onComplete }: any) {
                         {task.title}
                     </h4>
                     {task.priority === 'URGENT' && (
-                        <span className="px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-[0.2em] bg-[var(--color-error)] text-white animate-pulse">
+                        <span className="px-2 py-0.5 rounded text-[8px] font-bold uppercase tracking-wide bg-[var(--color-error)] text-white animate-pulse">
                             Priority: High
                         </span>
                     )}