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 */}
<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>