stwaddle/budget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced word buttons with icons

Browse Source
This commit is contained in:
Spencer Twaddle
2026-05-03 07:12:25 -05:00
parent 2f165487d3
commit 89759abcca
7 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Budget.Client/package-lock.json
Generated
+10
View File
@@ -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",
src/Budget.Client/package.json
+1
View File
@@ -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",
src/Budget.Client/src/index.css
+2 -1
View File
@@ -225,7 +225,8 @@ a:hover {
}
.btn-icon {
padding: 0.25rem 0.4rem;
padding: 0.3rem;
line-height: 1;
}
/* ---- Forms ---- */
src/Budget.Client/src/pages/IncomePage.tsx
+9 -12
View File
@@ -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>
src/Budget.Client/src/pages/OutgoPage.tsx
+9 -12
View File
@@ -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>
src/Budget.Client/src/pages/SettingsPage.tsx
+2 -1
View File
@@ -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>
))}