From 38fddeb281588de41d8ff6292c1dd48443a059a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elisi=C3=A1rio=20Couto?= <elisiario@couto.io>
Date: Sun, 5 Oct 2025 23:14:19 +0100
Subject: [PATCH] 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
---
 frontend/src/components/AccountSettings.tsx   | 24 ++++++++------
 frontend/src/components/AccountsOverview.tsx  | 24 ++++++++------
 .../components/NotificationFiltersDrawer.tsx  | 16 ++++++----
 frontend/src/components/Settings.tsx          | 32 ++++++++++++-------
 frontend/src/components/TransactionsTable.tsx | 14 ++++----
 5 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/AccountSettings.tsx b/frontend/src/components/AccountSettings.tsx
index b3594d2..04ea5f0 100644
--- a/frontend/src/components/AccountSettings.tsx
+++ b/frontend/src/components/AccountSettings.tsx
@@ -234,24 +234,28 @@ export default function AccountSettings() {
                                   }}
                                   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}
@@ -265,13 +269,15 @@ export default function AccountSettings() {
                                     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}
diff --git a/frontend/src/components/AccountsOverview.tsx b/frontend/src/components/AccountsOverview.tsx
index a6d47c7..07ea005 100644
--- a/frontend/src/components/AccountsOverview.tsx
+++ b/frontend/src/components/AccountsOverview.tsx
@@ -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}
diff --git a/frontend/src/components/NotificationFiltersDrawer.tsx b/frontend/src/components/NotificationFiltersDrawer.tsx
index 4777ca5..a00bb0d 100644
--- a/frontend/src/components/NotificationFiltersDrawer.tsx
+++ b/frontend/src/components/NotificationFiltersDrawer.tsx
@@ -166,13 +166,15 @@ export default function NotificationFiltersDrawer({
                       className="flex items-center space-x-1 bg-secondary text-secondary-foreground px-2 py-1 rounded-md text-sm"
                     >
                       <span>{filter}</span>
-                      <button
+                      <Button
                         type="button"
                         onClick={() => removeCaseInsensitiveFilter(index)}
-                        className="text-secondary-foreground hover:text-foreground"
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5 hover:bg-secondary-foreground/10"
                       >
                         <X className="h-3 w-3" />
-                      </button>
+                      </Button>
                     </div>
                   ))
                 ) : (
@@ -222,13 +224,15 @@ export default function NotificationFiltersDrawer({
                       className="flex items-center space-x-1 bg-secondary text-secondary-foreground px-2 py-1 rounded-md text-sm"
                     >
                       <span>{filter}</span>
-                      <button
+                      <Button
                         type="button"
                         onClick={() => removeCaseSensitiveFilter(index)}
-                        className="text-secondary-foreground hover:text-foreground"
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5 hover:bg-secondary-foreground/10"
                       >
                         <X className="h-3 w-3" />
-                      </button>
+                      </Button>
                     </div>
                   ))
                 ) : (
diff --git a/frontend/src/components/Settings.tsx b/frontend/src/components/Settings.tsx
index fbb1ea3..94f4a6b 100644
--- a/frontend/src/components/Settings.tsx
+++ b/frontend/src/components/Settings.tsx
@@ -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>
diff --git a/frontend/src/components/TransactionsTable.tsx b/frontend/src/components/TransactionsTable.tsx
index 794b00c..1feb559 100644
--- a/frontend/src/components/TransactionsTable.tsx
+++ b/frontend/src/components/TransactionsTable.tsx
@@ -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>