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