nikdoof/leggen
1
1
Fork 0
mirror of https://github.com/elisiariocouto/leggen.git synced 2025-12-18 10:29:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/AccountsOverview.tsx
View File

@@ -273,24 +273,28 @@ export default function AccountsOverview() {
}}
autoFocus
/>
<button
<Button
onClick={handleEditSave}
disabled={
!editingName.trim() ||
updateAccountMutation.isPending
}
className="p-1 text-green-600 hover:text-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
size="icon"
variant="ghost"
className="h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-100"
title="Save changes"
>
<Check className="h-4 w-4" />
</button>
<button
</Button>
<Button
onClick={handleEditCancel}
className="p-1 text-gray-600 hover:text-gray-700"
size="icon"
variant="ghost"
className="h-8 w-8"
title="Cancel editing"
>
<X className="h-4 w-4" />
</button>
</Button>
</div>
<p className="text-sm text-muted-foreground truncate">
{account.institution_id}
@@ -304,13 +308,15 @@ export default function AccountsOverview() {
account.name ||
"Unnamed Account"}
</h4>
<button
<Button
onClick={() => handleEditStart(account)}
className="flex-shrink-0 p-1 text-muted-foreground hover:text-foreground transition-colors"
size="icon"
variant="ghost"
className="h-7 w-7 flex-shrink-0"
title="Edit account name"
>
<Edit2 className="h-4 w-4" />
</button>
</Button>
</div>
<p className="text-sm text-muted-foreground truncate">
{account.institution_id}