popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: change partial charge link color from blue to gray

Browse Source 
Changed the 'Partial charge' toggle link color from blue to gray to
match the overall design aesthetic.
This commit is contained in:
popertots
2026-08-22 00:34:51 +01:00
parent bb51c1512f
commit c62ed029b3
1 changed files with 69 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/payments/PaymentModal.svelte
+69 -46
View File
@@ -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}