From 7a01dc558976cc9d0a861a35cedc91ddcf15cc83 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 27 Dec 2025 12:57:10 -0800
Subject: [PATCH] style: Clean up Tasks page - remove italics and excessive
 uppercase

- Remove italic styling from header and task titles
- Reduce excessive uppercase and tracking-widest
- Use cleaner font weights throughout
- Replace hardcoded emerald with CSS variables
---
 frontend/src/pages/TasksPage.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/TasksPage.tsx b/frontend/src/pages/TasksPage.tsx
index 59bb0d9..4de7d73 100644
--- a/frontend/src/pages/TasksPage.tsx
+++ b/frontend/src/pages/TasksPage.tsx
@@ -63,12 +63,12 @@ export default function TasksPage() {
             {/* Page Header */}
             <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                 <div>
-                    <h1 className="text-3xl font-extra-bold tracking-tight text-[var(--color-text-primary)] uppercase italic">
+                    <h1 className="text-2xl font-bold tracking-tight text-[var(--color-text-primary)]">
                         Operational Tasks
                     </h1>
                     <div className="flex items-center gap-3 mt-2">
-                        <div className="flex items-center gap-1.5 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">
-                            {pendingTasks.length} Pending Actions
+                        <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-[10px] font-bold uppercase tracking-wider border border-[var(--color-primary)]/20">
+                            {pendingTasks.length} Pending
                         </div>
                         <span className="text-[var(--color-text-tertiary)] text-sm">
                             Real-time workflow management
@@ -89,7 +89,7 @@ export default function TasksPage() {
                     </div>
                     <button
                         onClick={() => setIsCreateOpen(true)}
-                        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"
+                        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 Task
@@ -109,7 +109,7 @@ export default function TasksPage() {
                 {/* Left Column: Filters & View Switching */}
                 <div className="lg:col-span-3 space-y-6">
                     <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)]">
-                        <h4 className="text-[10px] font-black uppercase tracking-widest text-[var(--color-text-tertiary)] mb-4 px-2">Focus Mode</h4>
+                        <h4 className="text-[10px] font-bold uppercase tracking-wider text-[var(--color-text-tertiary)] mb-4 px-2">Focus</h4>
                         <div className="space-y-1">
                             <SidebarFilterButton active={filter === 'mine'} onClick={() => setFilter('mine')} label="My Work" icon={CheckSquare} count={tasks.filter(t => t.assigneeId === user?.id).length} />
                             <SidebarFilterButton active={filter === 'all'} onClick={() => setFilter('all')} label="Facility All" icon={LayoutGrid} count={tasks.length} />
@@ -117,7 +117,7 @@ export default function TasksPage() {
 
                         <div className="h-px bg-slate-100 dark:bg-slate-800 my-4 mx-2" />
 
-                        <h4 className="text-[10px] font-black uppercase tracking-widest text-[var(--color-text-tertiary)] mb-4 px-2">By Category</h4>
+                        <h4 className="text-[10px] font-bold uppercase tracking-wider text-[var(--color-text-tertiary)] mb-4 px-2">Category</h4>
                         <div className="space-y-1">
                             <SidebarFilterButton active={false} onClick={() => { }} label="Irrigation" icon={Droplets} />
                             <SidebarFilterButton active={false} onClick={() => { }} label="IPM & Health" icon={Bug} />
@@ -166,7 +166,7 @@ export default function TasksPage() {
                             {pendingTasks.length === 0 && (
                                 <div className="py-12 text-center rounded-2xl border-2 border-dashed border-[var(--color-border-subtle)]">
                                     <CheckCircle2 size={32} className="mx-auto text-[var(--color-primary)]/20 mb-3" />
-                                    <p className="text-sm font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">All Actions Complete</p>
+                                    <p className="text-sm font-medium text-[var(--color-text-tertiary)]">All Actions Complete</p>
                                 </div>
                             )}
                         </div>
@@ -219,8 +219,8 @@ function MetricCard({ label, value, icon: Icon, color }: any) {
         <Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] relative group overflow-hidden">
             <div className="flex items-center justify-between">
                 <div className="space-y-1">
-                    <p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-[0.1em]">{label}</p>
-                    <div className="text-2xl font-black italic tracking-tighter text-[var(--color-text-primary)]">
+                    <p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">{label}</p>
+                    <div className="text-2xl font-bold text-[var(--color-text-primary)]">
                         {value}
                     </div>
                 </div>
@@ -245,7 +245,7 @@ function SidebarFilterButton({ active, label, icon: Icon, count, onClick }: any)
         >
             <div className="flex items-center gap-3">
                 <Icon size={16} className={active ? "text-[var(--color-primary)]" : "text-[var(--color-text-tertiary)] transition-colors group-hover:text-[var(--color-primary)]"} />
-                <span className="uppercase tracking-[0.1em]">{label}</span>
+                <span>{label}</span>
             </div>
             {count !== undefined && (
                 <span className={cn(
@@ -259,10 +259,10 @@ function SidebarFilterButton({ active, label, icon: Icon, count, onClick }: any)
 
 function TaskRow({ task, onComplete }: any) {
     return (
-        <div className="group flex items-center gap-4 p-5 bg-white bg-[var(--color-bg-elevated)] border border-[var(--color-border-subtle)] rounded-2xl hover:border-emerald-500/50 transition-all">
+        <div className="group flex items-center gap-4 p-5 bg-[var(--color-bg-elevated)] border border-[var(--color-border-subtle)] rounded-2xl hover:border-[var(--color-primary)]/50 transition-all">
             <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-3 mb-2">
-                    <h4 className="text-sm font-black text-[var(--color-text-primary)] uppercase italic tracking-tight underline-offset-4 decoration-emerald-500/20">
+                    <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">
                         {task.title}
                     </h4>
                     {task.priority === 'URGENT' && (
@@ -272,7 +272,7 @@ function TaskRow({ task, onComplete }: any) {
                     )}
                 </div>
 
-                <div className="flex items-center gap-6 text-[10px] font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">
+                <div className="flex items-center gap-6 text-xs text-[var(--color-text-tertiary)]">
                     <div className="flex items-center gap-1.5">
                         <MapPin size={12} className="text-[var(--color-primary)]/50" />
                         <span>{task.room?.name || 'GEN-01'}</span>
@@ -294,7 +294,7 @@ function TaskRow({ task, onComplete }: any) {
                 </button>
                 <button
                     onClick={onComplete}
-                    className="flex items-center gap-2 h-10 px-4 rounded-xl bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] hover:border-emerald-500 hover:bg-[var(--color-primary)] hover:text-white transition-all text-xs font-bold uppercase tracking-widest group/btn"
+                    className="flex items-center gap-2 h-10 px-4 rounded-xl bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)] hover:bg-[var(--color-primary)] hover:text-[var(--color-text-inverse)] transition-all text-xs font-medium group/btn"
                 >
                     <CheckCircle2 size={16} className="text-[var(--color-text-tertiary)] group-hover/btn:text-white" />
                     <span className="opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Finalize Action</span>