Add titles to action buttons in DocumentCard, DraggableTaskCard, and TaskTableView components.

This commit is contained in:
Daniel Jankowski 2025-08-22 16:40:51 -04:00 committed by Wirasm
parent 27fd562909
commit 8cfdd91a82
3 changed files with 9 additions and 1 deletions

View File

@ -118,6 +118,7 @@ export const DocumentCard: React.FC<DocumentCardProps> = ({
}}
className="absolute top-2 right-2 p-1 rounded-md bg-red-500/10 hover:bg-red-500/20 text-red-600 dark:text-red-400 transition-colors"
aria-label={`Delete ${document.title}`}
title="Delete document"
>
<X className="w-4 h-4" />
</button>

View File

@ -150,6 +150,7 @@ export const DraggableTaskCard = ({
onDelete(task);
}}
className="w-5 h-5 rounded-full flex items-center justify-center bg-red-100/80 dark:bg-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-500/30 hover:shadow-[0_0_10px_rgba(239,68,68,0.3)] transition-all duration-300"
title="Delete task"
>
<Trash2 className="w-3 h-3" />
</button>
@ -159,12 +160,14 @@ export const DraggableTaskCard = ({
onView();
}}
className="w-5 h-5 rounded-full flex items-center justify-center bg-cyan-100/80 dark:bg-cyan-500/20 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-500/30 hover:shadow-[0_0_10px_rgba(34,211,238,0.3)] transition-all duration-300"
title="Edit task"
>
<Edit className="w-3 h-3" />
</button>
<button
onClick={toggleFlip}
className="w-5 h-5 rounded-full flex items-center justify-center bg-cyan-100/80 dark:bg-cyan-500/20 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-500/30 hover:shadow-[0_0_10px_rgba(34,211,238,0.3)] transition-all duration-300"
title="View task details"
>
<RefreshCw className="w-3 h-3" />
</button>
@ -224,6 +227,7 @@ export const DraggableTaskCard = ({
<button
onClick={toggleFlip}
className="ml-auto w-5 h-5 rounded-full flex items-center justify-center bg-cyan-100/80 dark:bg-cyan-500/20 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-500/30 hover:shadow-[0_0_10px_rgba(34,211,238,0.3)] transition-all duration-300"
title="Flip back to front"
>
<RefreshCw className="w-3 h-3" />
</button>
@ -237,7 +241,7 @@ export const DraggableTaskCard = ({
</div>
</div>
</div>
</div>
</div>
</div>
);
};

View File

@ -368,18 +368,21 @@ const DraggableTaskRow = ({
<button
onClick={() => onTaskDelete(task)}
className="p-1.5 rounded-full bg-red-500/20 text-red-500 hover:bg-red-500/30 hover:shadow-[0_0_10px_rgba(239,68,68,0.3)] transition-all duration-300"
title="Delete task"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
<button
onClick={() => onTaskComplete(task.id)}
className="p-1.5 rounded-full bg-green-500/20 text-green-500 hover:bg-green-500/30 hover:shadow-[0_0_10px_rgba(34,197,94,0.3)] transition-all duration-300"
title="Mark task as complete"
>
<Check className="w-3.5 h-3.5" />
</button>
<button
onClick={() => onTaskView(task)}
className="p-1.5 rounded-full bg-cyan-500/20 text-cyan-500 hover:bg-cyan-500/30 hover:shadow-[0_0_10px_rgba(34,211,238,0.3)] transition-all duration-300"
title="Edit task"
>
<Edit className="w-3.5 h-3.5" />
</button>