Add subtle background tint to cards based on status 🎨
File: client/src/components/Board/TaskCard.jsx
All cards look identical regardless
of which column they're in 💀 fr!!
Fix: add status-based subtle tint:
const STATUS_TINTS = {
backlog: '',
inprogress: 'border-l-2 border-l-purple-500/50',
review: 'border-l-2 border-l-yellow-500/50',
done: 'border-l-2 border-l-green-500/50 opacity-75',
}
// add to card className:
className={bg-[#1a1a1f] border rounded-lg p-3 cursor-pointer transition-all ${STATUS_TINTS[task.status] || ''} ${snapshot.isDragging ? '...' : '...'}}
~5 lines! No backend needed 🎯
Super subtle but looks premium!! ✨
Add subtle background tint to cards based on status 🎨
File: client/src/components/Board/TaskCard.jsx
All cards look identical regardless
of which column they're in 💀 fr!!
Fix: add status-based subtle tint:
const STATUS_TINTS = {
backlog: '',
inprogress: 'border-l-2 border-l-purple-500/50',
review: 'border-l-2 border-l-yellow-500/50',
done: 'border-l-2 border-l-green-500/50 opacity-75',
}
// add to card className:
className={
bg-[#1a1a1f] border rounded-lg p-3 cursor-pointer transition-all ${STATUS_TINTS[task.status] || ''} ${snapshot.isDragging ? '...' : '...'}}~5 lines! No backend needed 🎯
Super subtle but looks premium!! ✨