From c62ed029b3da33abd7450516165d49cfb2c98a5a Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Thu, 20 Aug 2026 14:27:55 +0100
Subject: [PATCH] style: change partial charge link color from blue to gray

Changed the 'Partial charge' toggle link color from blue to gray to
match the overall design aesthetic.
---
 .../components/payments/PaymentModal.svelte   | 115 +++++++++++-------
 1 file changed, 69 insertions(+), 46 deletions(-)

diff --git a/frontend/src/lib/components/payments/PaymentModal.svelte b/frontend/src/lib/components/payments/PaymentModal.svelte
index 1790184..c01a3ef 100644
--- a/frontend/src/lib/components/payments/PaymentModal.svelte
+++ b/frontend/src/lib/components/payments/PaymentModal.svelte
@@ -276,6 +276,7 @@
 	let lastValidCardAmount = $state<string>('');
 	let savedCardPaymentAmount = $state<string>('');
 	let lastValidSavedCardAmount = $state<string>('');
+	let showPartialCharge = $state(false);
 
 	let pollingInterval: ReturnType<typeof setInterval> | null = null;
 
@@ -1539,30 +1540,41 @@
 					</div>
 				{/if}
 
-				<div>
-					<label for="card-amount" class="text-sm font-medium text-gray-700">
-						Amount to Charge
-					</label>
-					<div class="relative mt-1">
-						<span class="absolute top-1/2 left-3 -translate-y-1/2 text-gray-500">£</span>
-						<Input
-							id="card-amount"
-							type="text"
-							inputmode="decimal"
-							step="0.01"
-							placeholder={totalDue.toFixed(2)}
-							value={cardPaymentAmount}
-							oninput={handleCardAmountInput}
-							class="pl-7"
-							disabled={status !== 'selecting'}
-						/>
-					</div>
-					{#if cardValidationError}
-						<p class="mt-1 text-sm text-red-600">{cardValidationError}</p>
+				<div class="border-t pt-3">
+					<button
+						type="button"
+						onclick={() => (showPartialCharge = !showPartialCharge)}
+						class="text-sm text-gray-600 hover:text-gray-800 hover:underline"
+					>
+						{showPartialCharge ? '− Hide partial charge' : '+ Partial charge'}
+					</button>
+					{#if showPartialCharge}
+						<div class="mt-3">
+							<label for="card-amount" class="text-sm font-medium text-gray-700">
+								Amount to Charge
+							</label>
+							<div class="relative mt-1">
+								<span class="absolute top-1/2 left-3 -translate-y-1/2 text-gray-500">£</span>
+								<Input
+									id="card-amount"
+									type="text"
+									inputmode="decimal"
+									step="0.01"
+									placeholder={totalDue.toFixed(2)}
+									value={cardPaymentAmount}
+									oninput={handleCardAmountInput}
+									class="pl-7"
+									disabled={status !== 'selecting'}
+								/>
+							</div>
+							{#if cardValidationError}
+								<p class="mt-1 text-sm text-red-600">{cardValidationError}</p>
+							{/if}
+							<p class="mt-1 text-xs text-gray-500">
+								Leave blank to charge full amount ({formatCurrency(totalDue)})
+							</p>
+						</div>
 					{/if}
-					<p class="mt-1 text-xs text-gray-500">
-						Leave blank to charge full amount ({formatCurrency(totalDue)})
-					</p>
 				</div>
 
 				<div class="flex gap-3">
@@ -1834,30 +1846,41 @@
 				/>
 
 				{#if selectedSavedCardId}
-					<div>
-						<label for="saved-card-amount" class="text-sm font-medium text-gray-700">
-							Amount to Charge
-						</label>
-						<div class="relative mt-1">
-							<span class="absolute top-1/2 left-3 -translate-y-1/2 text-gray-500">£</span>
-							<Input
-								id="saved-card-amount"
-								type="text"
-								inputmode="decimal"
-								step="0.01"
-								placeholder={totalDue.toFixed(2)}
-								value={savedCardPaymentAmount}
-								oninput={handleSavedCardAmountInput}
-								class="pl-7"
-								disabled={status !== 'saved-card-selecting'}
-							/>
-						</div>
-						{#if savedCardValidationError}
-							<p class="mt-1 text-sm text-red-600">{savedCardValidationError}</p>
+					<div class="border-t pt-3">
+						<button
+							type="button"
+							onclick={() => (showPartialCharge = !showPartialCharge)}
+							class="text-sm text-gray-600 hover:text-gray-800 hover:underline"
+						>
+							{showPartialCharge ? '− Hide partial charge' : '+ Partial charge'}
+						</button>
+						{#if showPartialCharge}
+							<div class="mt-3">
+								<label for="saved-card-amount" class="text-sm font-medium text-gray-700">
+									Amount to Charge
+								</label>
+								<div class="relative mt-1">
+									<span class="absolute top-1/2 left-3 -translate-y-1/2 text-gray-500">£</span>
+									<Input
+										id="saved-card-amount"
+										type="text"
+										inputmode="decimal"
+										step="0.01"
+										placeholder={totalDue.toFixed(2)}
+										value={savedCardPaymentAmount}
+										oninput={handleSavedCardAmountInput}
+										class="pl-7"
+										disabled={status !== 'saved-card-selecting'}
+									/>
+								</div>
+								{#if savedCardValidationError}
+									<p class="mt-1 text-sm text-red-600">{savedCardValidationError}</p>
+								{/if}
+								<p class="mt-1 text-xs text-gray-500">
+									Leave blank to charge full amount ({formatCurrency(totalDue)})
+								</p>
+							</div>
 						{/if}
-						<p class="mt-1 text-xs text-gray-500">
-							Leave blank to charge full amount ({formatCurrency(totalDue)})
-						</p>
 					</div>
 				{/if}