style: update TaskCard for visual feedback on task status
- Added opacity adjustment for completed tasks in TaskCard to enhance visual distinction. - Improved hover effects and interaction feedback for better user experience.
This commit is contained in:
@@ -114,6 +114,8 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
|
|||||||
style={style}
|
style={style}
|
||||||
className={`p-2 hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group ${
|
className={`p-2 hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group ${
|
||||||
isDragging ? 'opacity-50 rotate-3 scale-105' : ''
|
isDragging ? 'opacity-50 rotate-3 scale-105' : ''
|
||||||
|
} ${
|
||||||
|
task.status === 'done' ? 'opacity-60' : ''
|
||||||
}`}
|
}`}
|
||||||
{...attributes}
|
{...attributes}
|
||||||
{...(isEditingTitle ? {} : listeners)}
|
{...(isEditingTitle ? {} : listeners)}
|
||||||
@@ -196,6 +198,8 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
|
|||||||
style={style}
|
style={style}
|
||||||
className={`p-3 hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group ${
|
className={`p-3 hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group ${
|
||||||
isDragging ? 'opacity-50 rotate-3 scale-105' : ''
|
isDragging ? 'opacity-50 rotate-3 scale-105' : ''
|
||||||
|
} ${
|
||||||
|
task.status === 'done' ? 'opacity-60' : ''
|
||||||
}`}
|
}`}
|
||||||
{...attributes}
|
{...attributes}
|
||||||
{...(isEditingTitle ? {} : listeners)}
|
{...(isEditingTitle ? {} : listeners)}
|
||||||
|
|||||||
Reference in New Issue
Block a user