style: remove hover requirement for action buttons across all tables
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m6s

- Action buttons (Edit, Delete, Impersonate) are now permanently visible for better UX and discoverability.
This commit is contained in:
Cauê Faleiros
2026-03-11 14:37:23 -03:00
parent bff54def9f
commit 671633b813
4 changed files with 4 additions and 4 deletions

View File

@@ -505,7 +505,7 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
await deleteNotification(n.id); await deleteNotification(n.id);
loadNotifications(); loadNotifications();
}} }}
className="absolute top-4 right-4 p-1 text-zinc-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all rounded-md hover:bg-red-50 dark:hover:bg-red-900/30" className="absolute top-4 right-4 p-1 text-zinc-300 hover:text-red-500 transition-all rounded-md hover:bg-red-50 dark:hover:bg-red-900/30"
title="Remover notificação" title="Remover notificação"
> >
<X size={14} /> <X size={14} />

View File

@@ -248,7 +248,7 @@ export const SuperAdmin: React.FC = () => {
<td className="px-6 py-4 text-center font-medium text-zinc-700 dark:text-zinc-300">{tenant.user_count}</td> <td className="px-6 py-4 text-center font-medium text-zinc-700 dark:text-zinc-300">{tenant.user_count}</td>
<td className="px-6 py-4 text-center font-medium text-zinc-700 dark:text-zinc-300">{tenant.attendance_count?.toLocaleString()}</td> <td className="px-6 py-4 text-center font-medium text-zinc-700 dark:text-zinc-300">{tenant.attendance_count?.toLocaleString()}</td>
<td className="px-6 py-4 text-right"> <td className="px-6 py-4 text-right">
<div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="flex items-center justify-end gap-2 transition-opacity">
{tenant.id !== 'system' && ( {tenant.id !== 'system' && (
<button onClick={() => handleImpersonate(tenant.id)} title="Entrar na Organização" className="p-2 text-zinc-400 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-900/30 rounded-lg transition-colors"> <button onClick={() => handleImpersonate(tenant.id)} title="Entrar na Organização" className="p-2 text-zinc-400 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-900/30 rounded-lg transition-colors">
<LogIn size={16} /> <LogIn size={16} />

View File

@@ -194,7 +194,7 @@ export const TeamManagement: React.FC = () => {
</td> </td>
{canManage && ( {canManage && (
<td className="px-6 py-4 text-right"> <td className="px-6 py-4 text-right">
<div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="flex justify-end gap-2 transition-opacity">
<button onClick={() => { setEditingUser(user); setFormData({name:user.name, email:user.email, role:user.role as any, team_id:user.team_id||'', status:user.status as any, tenant_id: user.tenant_id||''}); setIsModalOpen(true); }} className="p-2 hover:bg-zinc-100 dark:hover:bg-dark-border text-zinc-400 hover:text-zinc-900 dark:hover:text-dark-text rounded-lg transition-colors"><Edit size={16} /></button> <button onClick={() => { setEditingUser(user); setFormData({name:user.name, email:user.email, role:user.role as any, team_id:user.team_id||'', status:user.status as any, tenant_id: user.tenant_id||''}); setIsModalOpen(true); }} className="p-2 hover:bg-zinc-100 dark:hover:bg-dark-border text-zinc-400 hover:text-zinc-900 dark:hover:text-dark-text rounded-lg transition-colors"><Edit size={16} /></button>
<button onClick={() => { setUserToDelete(user); setDeleteConfirmName(''); setIsDeleteModalOpen(true); }} className="p-2 hover:bg-red-50 dark:hover:bg-red-900/30 text-zinc-400 hover:text-red-600 dark:hover:text-red-400 rounded-lg transition-colors"><Trash2 size={16} /></button> <button onClick={() => { setUserToDelete(user); setDeleteConfirmName(''); setIsDeleteModalOpen(true); }} className="p-2 hover:bg-red-50 dark:hover:bg-red-900/30 text-zinc-400 hover:text-red-600 dark:hover:text-red-400 rounded-lg transition-colors"><Trash2 size={16} /></button>
</div> </div>

View File

@@ -81,7 +81,7 @@ export const Teams: React.FC = () => {
<div className="flex justify-between mb-6"> <div className="flex justify-between mb-6">
<div className="p-3 bg-zinc-50 dark:bg-dark-bg text-zinc-600 dark:text-dark-muted rounded-xl border border-zinc-100 dark:border-dark-border"><Building2 size={24} /></div> <div className="p-3 bg-zinc-50 dark:bg-dark-bg text-zinc-600 dark:text-dark-muted rounded-xl border border-zinc-100 dark:border-dark-border"><Building2 size={24} /></div>
{canManage && ( {canManage && (
<button onClick={() => { setEditingTeam(t); setFormData({name:t.name, description:t.description||''}); setIsModalOpen(true); }} className="text-zinc-400 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text opacity-0 group-hover:opacity-100 p-2 rounded-lg hover:bg-zinc-50 dark:hover:bg-dark-bg transition-all"><Edit2 size={18} /></button> <button onClick={() => { setEditingTeam(t); setFormData({name:t.name, description:t.description||''}); setIsModalOpen(true); }} className="text-zinc-400 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text p-2 rounded-lg hover:bg-zinc-50 dark:hover:bg-dark-bg transition-all"><Edit2 size={18} /></button>
)} )}
</div> </div>
<h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50 mb-1">{t.name}</h3> <h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50 mb-1">{t.name}</h3>