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

style: Clean up Tasks page - remove italics and excessive uppercase
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 header and task titles
- Reduce excessive uppercase and tracking-widest
- Use cleaner font weights throughout
- Replace hardcoded emerald with CSS variables
This commit is contained in:
fullsizemalt 2025-12-27 12:57:10 -08:00
parent 1363333746
commit 7a01dc5589
1 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -63,12 +63,12 @@ export default function TasksPage() {
{/* Page Header */} {/* Page Header */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div> <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 Operational Tasks
</h1> </h1>
<div className="flex items-center gap-3 mt-2"> <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"> <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 Actions {pendingTasks.length} Pending
</div> </div>
<span className="text-[var(--color-text-tertiary)] text-sm"> <span className="text-[var(--color-text-tertiary)] text-sm">
Real-time workflow management Real-time workflow management
@ -89,7 +89,7 @@ export default function TasksPage() {
</div> </div>
<button <button
onClick={() => setIsCreateOpen(true)} 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} /> <Plus size={18} />
New Task New Task
@ -109,7 +109,7 @@ export default function TasksPage() {
{/* Left Column: Filters & View Switching */} {/* Left Column: Filters & View Switching */}
<div className="lg:col-span-3 space-y-6"> <div className="lg:col-span-3 space-y-6">
<Card className="p-4 bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)]"> <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"> <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 === '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} /> <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" /> <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"> <div className="space-y-1">
<SidebarFilterButton active={false} onClick={() => { }} label="Irrigation" icon={Droplets} /> <SidebarFilterButton active={false} onClick={() => { }} label="Irrigation" icon={Droplets} />
<SidebarFilterButton active={false} onClick={() => { }} label="IPM & Health" icon={Bug} /> <SidebarFilterButton active={false} onClick={() => { }} label="IPM & Health" icon={Bug} />
@ -166,7 +166,7 @@ export default function TasksPage() {
{pendingTasks.length === 0 && ( {pendingTasks.length === 0 && (
<div className="py-12 text-center rounded-2xl border-2 border-dashed border-[var(--color-border-subtle)]"> <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" /> <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>
)} )}
</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"> <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="flex items-center justify-between">
<div className="space-y-1"> <div className="space-y-1">
<p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-[0.1em]">{label}</p> <p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-wider">{label}</p>
<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} {value}
</div> </div>
</div> </div>
@ -245,7 +245,7 @@ function SidebarFilterButton({ active, label, icon: Icon, count, onClick }: any)
> >
<div className="flex items-center gap-3"> <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)]"} /> <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> </div>
{count !== undefined && ( {count !== undefined && (
<span className={cn( <span className={cn(
@ -259,10 +259,10 @@ function SidebarFilterButton({ active, label, icon: Icon, count, onClick }: any)
function TaskRow({ task, onComplete }: any) { function TaskRow({ task, onComplete }: any) {
return ( 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-1 min-w-0">
<div className="flex items-center gap-3 mb-2"> <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} {task.title}
</h4> </h4>
{task.priority === 'URGENT' && ( {task.priority === 'URGENT' && (
@ -272,7 +272,7 @@ function TaskRow({ task, onComplete }: any) {
)} )}
</div> </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"> <div className="flex items-center gap-1.5">
<MapPin size={12} className="text-[var(--color-primary)]/50" /> <MapPin size={12} className="text-[var(--color-primary)]/50" />
<span>{task.room?.name || 'GEN-01'}</span> <span>{task.room?.name || 'GEN-01'}</span>
@ -294,7 +294,7 @@ function TaskRow({ task, onComplete }: any) {
</button> </button>
<button <button
onClick={onComplete} 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" /> <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> <span className="opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Finalize Action</span>