delete button more prominent

src/lib/components/PaymentModal.svelte

@@ -85,6 +85,34 @@
       return `Custom split among ${payment.splits.length} people`;
     }
   }
+
+  let deleting = false;
+
+  async function deletePayment() {
+    if (!confirm('Are you sure you want to delete this payment? This action cannot be undone.')) {
+      return;
+    }
+
+    try {
+      deleting = true;
+      const response = await fetch(`/api/cospend/payments/${paymentId}`, {
+        method: 'DELETE'
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to delete payment');
+      }
+
+      // Close modal and dispatch event to refresh data
+      dispatch('paymentDeleted', paymentId);
+      closeModal();
+      
+    } catch (err) {
+      error = err.message;
+    } finally {
+      deleting = false;
+    }
+  }
 </script>
 
 <div class="panel-content" bind:this={modal}>
@@ -187,6 +215,13 @@
           <div class="panel-actions">
             {#if payment && payment.createdBy === session?.user?.nickname}
               <a href="/cospend/payments/edit/{paymentId}" class="btn btn-primary">Edit Payment</a>
+              <button 
+                class="btn btn-danger" 
+                on:click={deletePayment}
+                disabled={deleting}
+              >
+                {deleting ? 'Deleting...' : 'Delete'}
+              </button>
             {/if}
             <button class="btn btn-secondary" on:click={closeModal}>Close</button>
           </div>
@@ -462,6 +497,20 @@
     background-color: #f5f5f5;
   }
 
+  .btn-danger {
+    background-color: #d32f2f;
+    color: white;
+  }
+
+  .btn-danger:hover:not(:disabled) {
+    background-color: #c62828;
+  }
+
+  .btn-danger:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
   @media (max-width: 600px) {
     .payment-header {
       flex-direction: column;

src/routes/cospend/payments/edit/[id]/+page.svelte

@@ -102,6 +102,33 @@
   function formatDate(dateString) {
     return new Date(dateString).toISOString().split('T')[0];
   }
+
+  let deleting = false;
+
+  async function deletePayment() {
+    if (!confirm('Are you sure you want to delete this payment? This action cannot be undone.')) {
+      return;
+    }
+
+    try {
+      deleting = true;
+      const response = await fetch(`/api/cospend/payments/${data.paymentId}`, {
+        method: 'DELETE'
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to delete payment');
+      }
+
+      // Redirect to payments list after successful deletion
+      goto('/cospend/payments');
+      
+    } catch (err) {
+      error = err.message;
+    } finally {
+      deleting = false;
+    }
+  }
 </script>
 
 <svelte:head>
@@ -243,13 +270,23 @@
       {/if}
 
       <div class="form-actions">
+        <button 
+          type="button" 
+          class="btn-danger" 
+          on:click={deletePayment}
+          disabled={deleting || saving}
+        >
+          {deleting ? 'Deleting...' : 'Delete Payment'}
+        </button>
+        <div class="main-actions">
           <button type="button" class="btn-secondary" on:click={() => goto('/cospend/payments')}>
             Cancel
           </button>
-        <button type="submit" class="btn-primary" disabled={saving}>
+          <button type="submit" class="btn-primary" disabled={saving || deleting}>
             {saving ? 'Saving...' : 'Save Changes'}
           </button>
         </div>
+      </div>
     </form>
   {/if}
 </main>
@@ -382,11 +419,17 @@
 
   .form-actions {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
     gap: 1rem;
-    justify-content: flex-end;
   }
 
-  .btn-primary, .btn-secondary {
+  .main-actions {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .btn-primary, .btn-secondary, .btn-danger {
     padding: 0.75rem 1.5rem;
     border-radius: 0.5rem;
     font-size: 1rem;
@@ -419,6 +462,21 @@
     background-color: #e8e8e8;
   }
 
+  .btn-danger {
+    background-color: #d32f2f;
+    color: white;
+    border: none;
+  }
+
+  .btn-danger:hover:not(:disabled) {
+    background-color: #c62828;
+  }
+
+  .btn-danger:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
   .current-image {
     margin-bottom: 1rem;
     text-align: center;
@@ -502,6 +560,11 @@
 
     .form-actions {
       flex-direction: column;
+      align-items: stretch;
+    }
+
+    .main-actions {
+      flex-direction: column;
     }
   }
 </style>

src/routes/cospend/payments/view/[id]/+page.svelte

@@ -53,6 +53,33 @@
       return `Custom split among ${payment.splits.length} people`;
     }
   }
+
+  let deleting = false;
+
+  async function deletePayment() {
+    if (!confirm('Are you sure you want to delete this payment? This action cannot be undone.')) {
+      return;
+    }
+
+    try {
+      deleting = true;
+      const response = await fetch(`/api/cospend/payments/${data.paymentId}`, {
+        method: 'DELETE'
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to delete payment');
+      }
+
+      // Redirect to dashboard after successful deletion
+      goto('/cospend');
+      
+    } catch (err) {
+      error = err.message;
+    } finally {
+      deleting = false;
+    }
+  }
 </script>
 
 <svelte:head>
@@ -66,6 +93,13 @@
       <div class="header-actions">
         {#if payment && payment.createdBy === data.session.user.nickname}
           <a href="/cospend/payments/edit/{data.paymentId}" class="btn btn-secondary">Edit</a>
+          <button 
+            class="btn btn-danger" 
+            on:click={deletePayment}
+            disabled={deleting}
+          >
+            {deleting ? 'Deleting...' : 'Delete'}
+          </button>
         {/if}
         <a href="/cospend/payments" class="btn btn-secondary">All Payments</a>
       </div>
@@ -196,6 +230,8 @@
     text-decoration: none;
     font-size: 0.9rem;
     transition: all 0.2s;
+    border: none;
+    cursor: pointer;
   }
 
   .btn-secondary {
@@ -208,6 +244,20 @@
     background-color: #e8e8e8;
   }
 
+  .btn-danger {
+    background-color: #d32f2f;
+    color: white;
+  }
+
+  .btn-danger:hover:not(:disabled) {
+    background-color: #c62828;
+  }
+
+  .btn-danger:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
   .loading, .error {
     text-align: center;
     padding: 2rem;