Add titles to action buttons in DocumentCard, DraggableTaskCard, and TaskTableView components.
This commit is contained in:
parent
27fd562909
commit
8cfdd91a82
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user