fix(miniapp): tighten add and delete controls

apps/miniapp/src/screens/house-screen.tsx

@@ -716,10 +716,12 @@ export function HouseScreen(props: Props) {
                 </header>
                 <p>{props.copy.utilityBillsEditorBody ?? ''}</p>
                 <div class="panel-toolbar">
-                  <Button variant="secondary" onClick={props.onOpenAddUtilityBill}>
+                  <IconButton
+                    label={props.copy.addUtilityBillAction ?? ''}
+                    onClick={props.onOpenAddUtilityBill}
+                  >
                     <PlusIcon />
-                    {props.copy.addUtilityBillAction ?? ''}
+                  </IconButton>
-                  </Button>
                 </div>
                 <div class="ledger-list">
                   {props.cycleState?.utilityBills.length ? (
@@ -762,10 +764,12 @@ export function HouseScreen(props: Props) {
                 </header>
                 <p>{props.copy.utilityCategoriesBody ?? ''}</p>
                 <div class="panel-toolbar">
-                  <Button variant="secondary" onClick={() => props.onOpenCategoryEditor('__new__')}>
+                  <IconButton
+                    label={props.copy.addCategoryAction ?? ''}
+                    onClick={() => props.onOpenCategoryEditor('__new__')}
+                  >
                     <PlusIcon />
-                    {props.copy.addCategoryAction ?? ''}
+                  </IconButton>
-                  </Button>
                 </div>
                 <div class="ledger-list">
                   <For each={props.adminSettings?.categories ?? []}>
@@ -874,15 +878,18 @@ export function HouseScreen(props: Props) {
                 }
                 return (
                   <div class="modal-action-row">
-                    <Button
+                    <IconButton
-                      variant="danger"
+                      label={
+                        props.deletingUtilityBillId === bill.id
+                          ? (props.copy.deletingUtilityBill ?? '')
+                          : (props.copy.deleteUtilityBillAction ?? '')
+                      }
+                      class="ui-button--danger"
+                      disabled={props.deletingUtilityBillId === bill.id}
                       onClick={() => void props.onDeleteUtilityBill(bill.id)}
                     >
                       <TrashIcon />
-                      {props.deletingUtilityBillId === bill.id
+                    </IconButton>
-                        ? props.copy.deletingUtilityBill
-                        : props.copy.deleteUtilityBillAction}
-                    </Button>
                     <div class="modal-action-row__primary">
                       <Button variant="ghost" onClick={props.onCloseUtilityBillEditor}>
                         {props.copy.closeEditorAction ?? ''}

apps/miniapp/src/screens/ledger-screen.tsx

@@ -199,12 +199,18 @@ export function LedgerScreen(props: Props) {
 
             return (
               <div class="modal-action-row">
-                <Button variant="danger" onClick={() => void props.onDeletePurchase(entry.id)}>
+                <IconButton
+                  label={
+                    props.deletingPurchaseId === entry.id
+                      ? (props.copy.deletingPurchase ?? '')
+                      : (props.copy.purchaseDeleteAction ?? '')
+                  }
+                  class="ui-button--danger"
+                  disabled={props.deletingPurchaseId === entry.id}
+                  onClick={() => void props.onDeletePurchase(entry.id)}
+                >
                   <TrashIcon />
-                  {props.deletingPurchaseId === entry.id
+                </IconButton>
-                    ? props.copy.deletingPurchase
-                    : props.copy.purchaseDeleteAction}
-                </Button>
                 <div class="modal-action-row__primary">
                   <Button variant="ghost" onClick={props.onClosePurchaseEditor}>
                     {props.copy.closeEditorAction ?? ''}
@@ -400,10 +406,12 @@ export function LedgerScreen(props: Props) {
           <Show when={props.readyIsAdmin}>
             <p>{props.copy.paymentsAdminBody ?? ''}</p>
             <div class="panel-toolbar">
-              <Button variant="secondary" onClick={props.onOpenAddPayment}>
+              <IconButton
+                label={props.copy.paymentsAddAction ?? ''}
+                onClick={props.onOpenAddPayment}
+              >
                 <PlusIcon />
-                {props.copy.paymentsAddAction ?? ''}
+              </IconButton>
-              </Button>
             </div>
           </Show>
           {props.paymentEntries.length === 0 ? (
@@ -529,12 +537,18 @@ export function LedgerScreen(props: Props) {
 
             return (
               <div class="modal-action-row">
-                <Button variant="danger" onClick={() => void props.onDeletePayment(entry.id)}>
+                <IconButton
+                  label={
+                    props.deletingPaymentId === entry.id
+                      ? (props.copy.deletingPayment ?? '')
+                      : (props.copy.paymentDeleteAction ?? '')
+                  }
+                  class="ui-button--danger"
+                  disabled={props.deletingPaymentId === entry.id}
+                  onClick={() => void props.onDeletePayment(entry.id)}
+                >
                   <TrashIcon />
-                  {props.deletingPaymentId === entry.id
+                </IconButton>
-                    ? props.copy.deletingPayment
-                    : props.copy.paymentDeleteAction}
-                </Button>
                 <div class="modal-action-row__primary">
                   <Button variant="ghost" onClick={props.onClosePaymentEditor}>
                     {props.copy.closeEditorAction ?? ''}