From 89759abcca4c4f9ca29a883953f3692537839cd1 Mon Sep 17 00:00:00 2001
From: Spencer Twaddle <7374698+stwaddle@users.noreply.github.com>
Date: Sun, 3 May 2026 07:12:25 -0500
Subject: [PATCH] Replaced word buttons with icons

---
 src/Budget.Client/package-lock.json          | 10 ++++++++++
 src/Budget.Client/package.json               |  1 +
 src/Budget.Client/src/index.css              |  3 ++-
 src/Budget.Client/src/pages/IncomePage.tsx   | 21 +++++++++-----------
 src/Budget.Client/src/pages/OutgoPage.tsx    | 21 +++++++++-----------
 src/Budget.Client/src/pages/SettingsPage.tsx |  3 ++-
 update-budget-site.ps1                       |  5 +++++
 7 files changed, 38 insertions(+), 26 deletions(-)
 create mode 100644 update-budget-site.ps1

diff --git a/src/Budget.Client/package-lock.json b/src/Budget.Client/package-lock.json
index d3e5824..eba4286 100644
--- a/src/Budget.Client/package-lock.json
+++ b/src/Budget.Client/package-lock.json
@@ -13,6 +13,7 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@hookform/resolvers": "^5.2.2",
         "@tanstack/react-query": "^5.100.8",
+        "lucide-react": "^1.14.0",
         "oidc-client-ts": "^3.5.0",
         "react": "^19.2.5",
         "react-dom": "^19.2.5",
@@ -2277,6 +2278,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.14.0.tgz",
+      "integrity": "sha512-+1mdWcfSJVUsaTIjN9zoezmUhfXo5l0vP7ekBMPo3jcS/aIkxHnXqAPsByszMZx/Y8oQBRJxJx5xg+RH3urzxA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "10.2.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
diff --git a/src/Budget.Client/package.json b/src/Budget.Client/package.json
index 4258109..355d2c5 100644
--- a/src/Budget.Client/package.json
+++ b/src/Budget.Client/package.json
@@ -15,6 +15,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.2",
     "@tanstack/react-query": "^5.100.8",
+    "lucide-react": "^1.14.0",
     "oidc-client-ts": "^3.5.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
diff --git a/src/Budget.Client/src/index.css b/src/Budget.Client/src/index.css
index 74e1ae5..65698a4 100644
--- a/src/Budget.Client/src/index.css
+++ b/src/Budget.Client/src/index.css
@@ -225,7 +225,8 @@ a:hover {
 }
 
 .btn-icon {
-  padding: 0.25rem 0.4rem;
+  padding: 0.3rem;
+  line-height: 1;
 }
 
 /* ---- Forms ---- */
diff --git a/src/Budget.Client/src/pages/IncomePage.tsx b/src/Budget.Client/src/pages/IncomePage.tsx
index 5178574..8e71165 100644
--- a/src/Budget.Client/src/pages/IncomePage.tsx
+++ b/src/Budget.Client/src/pages/IncomePage.tsx
@@ -25,6 +25,7 @@ import { BudgetNav } from '../components/BudgetNav';
 import { useIncomes, useCreateIncome, useUpdateIncome, useDeleteIncome, useReorderIncomes } from '../api/incomes';
 import { createIncomeSchema, type CreateIncomeInput } from '../schemas/index';
 import { toMonthly, toAnnually } from '../utils/frequency';
+import { Check, X, Trash2, Plus } from 'lucide-react';
 
 const fmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
 
@@ -90,15 +91,11 @@ function NewIncomeRow({
       </td>
       <td className="col-actions">
         <div style={{ display: 'flex', gap: '4px' }}>
-          <button
-            className="btn btn-primary btn-sm"
-            onClick={handleSubmit(onAdd)}
-            disabled={isSubmitting || isPending}
-          >
-            Add
+          <button className="btn btn-primary btn-icon" title="Add" onClick={handleSubmit(onAdd)} disabled={isSubmitting || isPending}>
+            <Check size={15} />
           </button>
-          <button className="btn btn-secondary btn-sm" onClick={onCancel}>
-            Cancel
+          <button className="btn btn-secondary btn-icon" title="Cancel" onClick={onCancel}>
+            <X size={15} />
           </button>
         </div>
       </td>
@@ -162,8 +159,8 @@ function SortableRow({
         <td className="col-money">—</td>
         <td className="col-actions">
           <div style={{ display: 'flex', gap: '4px' }}>
-            <button className="btn btn-primary btn-sm" onClick={handleSubmit(onSubmit)} disabled={isSubmitting}>Save</button>
-            <button className="btn btn-secondary btn-sm" onClick={cancel}>Cancel</button>
+            <button className="btn btn-primary btn-icon" title="Save" onClick={handleSubmit(onSubmit)} disabled={isSubmitting}><Check size={15} /></button>
+            <button className="btn btn-secondary btn-icon" title="Cancel" onClick={cancel}><X size={15} /></button>
           </div>
         </td>
       </tr>
@@ -179,7 +176,7 @@ function SortableRow({
       <td className="col-money"><MoneyDisplay value={income.monthly} /></td>
       <td className="col-money"><MoneyDisplay value={income.annually} /></td>
       <td className="col-actions">
-        <button className="btn btn-danger btn-sm" onClick={() => onDelete(income.id)}>Delete</button>
+        <button className="btn btn-danger btn-icon" title="Delete" onClick={() => onDelete(income.id)}><Trash2 size={15} /></button>
       </td>
     </tr>
   );
@@ -268,7 +265,7 @@ export function IncomePage() {
       </div>
       {!addingRow && (
         <button className="btn btn-secondary" onClick={() => setAddingRow(true)}>
-          + Add Row
+          <Plus size={15} /> Add Row
         </button>
       )}
     </div>
diff --git a/src/Budget.Client/src/pages/OutgoPage.tsx b/src/Budget.Client/src/pages/OutgoPage.tsx
index b4fe748..c35b82b 100644
--- a/src/Budget.Client/src/pages/OutgoPage.tsx
+++ b/src/Budget.Client/src/pages/OutgoPage.tsx
@@ -29,6 +29,7 @@ import {
 } from '../api/outgos';
 import { createOutgoSchema, type CreateOutgoInput } from '../schemas/index';
 import { toMonthly, toAnnually } from '../utils/frequency';
+import { Check, X, Trash2, Plus } from 'lucide-react';
 
 const fmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
 const OUTGO_TYPES = ['Need', 'Want', 'Save'] as const;
@@ -150,15 +151,11 @@ function NewOutgoRow({
       </td>
       <td className="col-actions">
         <div style={{ display: 'flex', gap: '4px' }}>
-          <button
-            className="btn btn-primary btn-sm"
-            onClick={handleSubmit(onAdd)}
-            disabled={isSubmitting || isPending}
-          >
-            Add
+          <button className="btn btn-primary btn-icon" title="Add" onClick={handleSubmit(onAdd)} disabled={isSubmitting || isPending}>
+            <Check size={15} />
           </button>
-          <button className="btn btn-secondary btn-sm" onClick={onCancel}>
-            Cancel
+          <button className="btn btn-secondary btn-icon" title="Cancel" onClick={onCancel}>
+            <X size={15} />
           </button>
         </div>
       </td>
@@ -277,8 +274,8 @@ function SortableRow({
         <td><input {...register('notes')} /></td>
         <td className="col-actions">
           <div style={{ display: 'flex', gap: '4px' }}>
-            <button className="btn btn-primary btn-sm" onClick={handleSubmit(onSubmit)} disabled={isSubmitting}>Save</button>
-            <button className="btn btn-secondary btn-sm" onClick={cancel}>Cancel</button>
+            <button className="btn btn-primary btn-icon" title="Save" onClick={handleSubmit(onSubmit)} disabled={isSubmitting}><Check size={15} /></button>
+            <button className="btn btn-secondary btn-icon" title="Cancel" onClick={cancel}><X size={15} /></button>
           </div>
         </td>
       </tr>
@@ -301,7 +298,7 @@ function SortableRow({
       <td onClick={startEdit} style={{ cursor: 'pointer' }}>{outgo.paymentSource}</td>
       <td onClick={startEdit} style={{ cursor: 'pointer' }}>{outgo.notes}</td>
       <td className="col-actions">
-        <button className="btn btn-danger btn-sm" onClick={() => onDelete(outgo.id)}>Delete</button>
+        <button className="btn btn-danger btn-icon" title="Delete" onClick={() => onDelete(outgo.id)}><Trash2 size={15} /></button>
       </td>
     </tr>
   );
@@ -418,7 +415,7 @@ export function OutgoPage() {
       </div>
       {!addingRow && (
         <button className="btn btn-secondary" onClick={() => setAddingRow(true)}>
-          + Add Row
+          <Plus size={15} /> Add Row
         </button>
       )}
     </div>
diff --git a/src/Budget.Client/src/pages/SettingsPage.tsx b/src/Budget.Client/src/pages/SettingsPage.tsx
index c480b70..fb42b05 100644
--- a/src/Budget.Client/src/pages/SettingsPage.tsx
+++ b/src/Budget.Client/src/pages/SettingsPage.tsx
@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { SharePermission } from '../types/index';
+import { Trash2 } from 'lucide-react';
 import { BudgetNav } from '../components/BudgetNav';
 import { useBudget, useUpdateBudget } from '../api/budgets';
 import { useUpdateTaxRate } from '../api/summary';
@@ -149,7 +150,7 @@ export function SettingsPage() {
                         : <span className="badge badge-save">Active</span>}
                     </td>
                     <td className="col-actions">
-                      <button className="btn btn-danger btn-sm" onClick={() => revokeShare.mutate(s.id)}>Revoke</button>
+                      <button className="btn btn-danger btn-icon" title="Revoke access" onClick={() => revokeShare.mutate(s.id)}><Trash2 size={15} /></button>
                     </td>
                   </tr>
                 ))}
diff --git a/update-budget-site.ps1 b/update-budget-site.ps1
new file mode 100644
index 0000000..380bfd1
--- /dev/null
+++ b/update-budget-site.ps1
@@ -0,0 +1,5 @@
+$image = "docker.stwaddle.com/budget:latest"
+docker build -t $image .
+if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
+docker push $image
+ssh stwaddle_com "./stwaddlecom/update-budget.sh"
\ No newline at end of file