nikdoof/leggen
1
1
Fork 0
mirror of https://github.com/elisiariocouto/leggen.git synced 2025-12-26 10:59:27 +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

32
frontend/src/components/Settings.tsx
View File

@@ -403,24 +403,28 @@ export default function Settings() {
}}
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}
@@ -434,13 +438,15 @@ export default function Settings() {
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}
@@ -579,7 +585,7 @@ export default function Settings() {
Created {formatDate(connection.created_at)}
</p>
</div>
<button
<Button
onClick={() => {
const isWorking =
connection.status.toLowerCase() === "ln";
@@ -594,11 +600,13 @@ export default function Settings() {
}
}}
disabled={deleteBankConnectionMutation.isPending}
className="p-1 text-muted-foreground hover:text-destructive transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
size="icon"
variant="ghost"
className="h-8 w-8 text-muted-foreground hover:text-destructive"
title="Delete connection"
>
<Trash2 className="h-4 w-4" />
</button>
</Button>
</div>
</div>
</div>