refactor(frontend): Standardize button styling using shadcn Button component.

Replace inconsistent native HTML button elements with shadcn/ui Button
component across all components for consistent styling and behavior.

Changes:
- TransactionsTable: Use Button with ghost variant for Raw action buttons
- Settings: Standardize edit, save, cancel, and delete buttons with icon variant
- AccountsOverview: Apply consistent Button component for account actions
- AccountSettings: Update account editing buttons to use Button component
- NotificationFiltersDrawer: Convert filter removal buttons to Button component

Benefits:
- Consistent design system throughout the app
- Better accessibility and keyboard navigation
- Proper theme support and state handling
- Reduced custom CSS and improved maintainability
This commit is contained in:
Elisiário Couto
2025-10-05 23:14:19 +01:00
parent 0205e5be0d
commit 38fddeb281
5 changed files with 68 additions and 42 deletions

View File

@@ -259,14 +259,15 @@ export default function TransactionsTable() {
cell: ({ row }) => {
const transaction = row.original;
return (
<button
<Button
onClick={() => handleViewRaw(transaction)}
className="inline-flex items-center px-2 py-1 text-xs bg-muted text-muted-foreground rounded hover:bg-accent transition-colors"
variant="ghost"
size="sm"
title="View raw transaction data"
>
<Eye className="h-3 w-3 mr-1" />
Raw
</button>
</Button>
);
},
},
@@ -530,14 +531,15 @@ export default function TransactionsTable() {
transaction.transaction_currency,
)}
</p>
<button
<Button
onClick={() => handleViewRaw(transaction)}
className="inline-flex items-center px-2 py-1 text-xs bg-muted text-muted-foreground rounded hover:bg-accent transition-colors"
variant="ghost"
size="sm"
title="View raw transaction data"
>
<Eye className="h-3 w-3 mr-1" />
Raw
</button>
</Button>
</div>
</div>
</div>