Add a site-wide dark mode
This commit is contained in:
@@ -148,14 +148,8 @@ export const actions = {
|
||||
};
|
||||
}
|
||||
|
||||
const {
|
||||
id,
|
||||
profileId,
|
||||
isDefaultMailing,
|
||||
isDefaultBilling,
|
||||
isDefaultShipping,
|
||||
...addressData
|
||||
} = form.data;
|
||||
const { id, profileId, isDefaultMailing, isDefaultBilling, isDefaultShipping, ...addressData } =
|
||||
form.data;
|
||||
|
||||
if (!profileId) {
|
||||
return { success: false, action: 'upsertAddress', addressError: 'Missing profile ID' };
|
||||
|
||||
@@ -71,13 +71,15 @@
|
||||
<AdminModal title="Create Profile" {open} {onClose}>
|
||||
{#if successMessage}
|
||||
<div
|
||||
class="mb-4 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700"
|
||||
class="mb-4 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700 dark:border-green-900 dark:bg-green-950/50 dark:text-green-300"
|
||||
>
|
||||
{successMessage}
|
||||
</div>
|
||||
{/if}
|
||||
{#if formError}
|
||||
<div class="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
||||
<div
|
||||
class="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600 dark:border-red-900 dark:bg-red-950/50 dark:text-red-400"
|
||||
>
|
||||
{formError}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -89,7 +91,7 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={onClose}
|
||||
class="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
|
||||
class="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@@ -156,13 +156,15 @@
|
||||
<AdminModal title="Edit Profile" {open} {onClose} {canDelete} recordId={String(record.id ?? '')}>
|
||||
{#if successMessage}
|
||||
<div
|
||||
class="mb-4 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700"
|
||||
class="mb-4 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700 dark:border-green-900 dark:bg-green-950/50 dark:text-green-300"
|
||||
>
|
||||
{successMessage}
|
||||
</div>
|
||||
{/if}
|
||||
{#if formError}
|
||||
<div class="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
||||
<div
|
||||
class="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600 dark:border-red-900 dark:bg-red-950/50 dark:text-red-400"
|
||||
>
|
||||
{formError}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -176,7 +178,7 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={onClose}
|
||||
class="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
|
||||
class="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -189,13 +191,13 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-8 border-t border-slate-200 pt-6">
|
||||
<div class="mt-8 border-t border-slate-200 pt-6 dark:border-slate-800">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-semibold text-slate-900">Addresses</h3>
|
||||
<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Addresses</h3>
|
||||
<button
|
||||
type="button"
|
||||
onclick={toggleAddressForm}
|
||||
class="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-50"
|
||||
class="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
{addressFormOpen ? 'Cancel' : 'Add Address +'}
|
||||
</button>
|
||||
@@ -208,13 +210,17 @@
|
||||
<input type="hidden" name="id" value={editingAddressId} />
|
||||
{/if}
|
||||
{#if addressError}
|
||||
<div class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
||||
<div
|
||||
class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600 dark:border-red-900 dark:bg-red-950/50 dark:text-red-400"
|
||||
>
|
||||
{addressError}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="addr-street" class="mb-1 block text-sm font-medium text-slate-700"
|
||||
<label
|
||||
for="addr-street"
|
||||
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||
>Street</label
|
||||
>
|
||||
<input
|
||||
@@ -223,11 +229,13 @@
|
||||
name="street"
|
||||
required
|
||||
bind:value={addrStreet}
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none"
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="addr-city" class="mb-1 block text-sm font-medium text-slate-700">City</label
|
||||
<label
|
||||
for="addr-city"
|
||||
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">City</label
|
||||
>
|
||||
<input
|
||||
id="addr-city"
|
||||
@@ -235,12 +243,13 @@
|
||||
name="city"
|
||||
required
|
||||
bind:value={addrCity}
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none"
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="addr-state" class="mb-1 block text-sm font-medium text-slate-700"
|
||||
>State</label
|
||||
<label
|
||||
for="addr-state"
|
||||
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">State</label
|
||||
>
|
||||
<input
|
||||
id="addr-state"
|
||||
@@ -248,11 +257,13 @@
|
||||
name="state"
|
||||
required
|
||||
bind:value={addrState}
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none"
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="addr-postal" class="mb-1 block text-sm font-medium text-slate-700"
|
||||
<label
|
||||
for="addr-postal"
|
||||
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||
>Postal Code</label
|
||||
>
|
||||
<input
|
||||
@@ -261,11 +272,13 @@
|
||||
name="postalCode"
|
||||
required
|
||||
bind:value={addrPostal}
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none"
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="addr-country" class="mb-1 block text-sm font-medium text-slate-700"
|
||||
<label
|
||||
for="addr-country"
|
||||
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||
>Country</label
|
||||
>
|
||||
<input
|
||||
@@ -274,11 +287,11 @@
|
||||
name="country"
|
||||
required
|
||||
bind:value={addrCountry}
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none"
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 text-sm text-slate-700">
|
||||
<div class="flex flex-wrap gap-4 text-sm text-slate-700 dark:text-slate-300">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" name="isDefaultMailing" bind:checked={addrMailing} />
|
||||
Default Mailing
|
||||
@@ -295,7 +308,7 @@
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-md bg-slate-800 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-700"
|
||||
class="rounded-md bg-slate-800 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
|
||||
>
|
||||
{editingAddressId ? 'Update Address' : 'Save Address'}
|
||||
</button>
|
||||
@@ -304,11 +317,11 @@
|
||||
{/if}
|
||||
|
||||
{#if addresses.length > 0}
|
||||
<div class="mt-4 overflow-x-auto rounded-md border border-slate-200">
|
||||
<table class="w-full min-w-max text-left text-sm text-slate-700">
|
||||
<div class="mt-4 overflow-x-auto rounded-md border border-slate-200 dark:border-slate-800">
|
||||
<table class="w-full min-w-max text-left text-sm text-slate-700 dark:text-slate-300">
|
||||
<thead>
|
||||
<tr
|
||||
class="border-b border-slate-200 bg-slate-100 text-xs font-semibold tracking-wide text-slate-500"
|
||||
class="border-b border-slate-200 bg-slate-100 text-xs font-semibold tracking-wide text-slate-500 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400"
|
||||
>
|
||||
<th scope="col" class="px-3 py-2">Street</th>
|
||||
<th scope="col" class="px-3 py-2">City</th>
|
||||
@@ -323,7 +336,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each addresses as addr, i (String(addr.id ?? i))}
|
||||
<tr class="bg-white">
|
||||
<tr class="bg-white dark:bg-slate-900">
|
||||
<td class="px-3 py-2 whitespace-nowrap">{addr.street as string}</td>
|
||||
<td class="px-3 py-2 whitespace-nowrap">{addr.city as string}</td>
|
||||
<td class="px-3 py-2 whitespace-nowrap">{addr.state as string}</td>
|
||||
@@ -337,7 +350,7 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => openEditAddress(addr)}
|
||||
class="rounded-md border border-slate-300 bg-white px-2 py-1 text-xs font-medium text-slate-700 transition hover:bg-slate-50"
|
||||
class="rounded-md border border-slate-300 bg-white px-2 py-1 text-xs font-medium text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
@@ -345,7 +358,7 @@
|
||||
<input type="hidden" name="id" value={String(addr.id ?? '')} />
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-md border border-red-300 bg-white px-2 py-1 text-xs font-medium text-red-600 transition hover:bg-red-50"
|
||||
class="rounded-md border border-red-300 bg-white px-2 py-1 text-xs font-medium text-red-600 transition hover:bg-red-50 dark:border-red-800 dark:bg-slate-900 dark:text-red-400 dark:hover:bg-red-950/50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@@ -358,7 +371,7 @@
|
||||
</table>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="mt-2 text-sm text-slate-600">No addresses on file.</p>
|
||||
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">No addresses on file.</p>
|
||||
{/if}
|
||||
</div>
|
||||
</AdminModal>
|
||||
|
||||
@@ -24,7 +24,10 @@
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label for="field-email" class="mb-1 block text-sm font-medium text-slate-700">Email</label>
|
||||
<label
|
||||
for="field-email"
|
||||
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Email</label
|
||||
>
|
||||
<input
|
||||
id="field-email"
|
||||
type="email"
|
||||
@@ -32,16 +35,17 @@
|
||||
required
|
||||
bind:value={email}
|
||||
placeholder="user@example.com"
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none"
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
{#if fieldErrors.email}
|
||||
<p class="mt-1 text-sm text-red-600">{fieldErrors.email}</p>
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{fieldErrors.email}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="field-firstName" class="mb-1 block text-sm font-medium text-slate-700"
|
||||
>First Name</label
|
||||
<label
|
||||
for="field-firstName"
|
||||
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">First Name</label
|
||||
>
|
||||
<input
|
||||
id="field-firstName"
|
||||
@@ -49,16 +53,17 @@
|
||||
name="firstName"
|
||||
required
|
||||
bind:value={firstName}
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none"
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
{#if fieldErrors.firstName}
|
||||
<p class="mt-1 text-sm text-red-600">{fieldErrors.firstName}</p>
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{fieldErrors.firstName}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="field-lastName" class="mb-1 block text-sm font-medium text-slate-700"
|
||||
>Last Name</label
|
||||
<label
|
||||
for="field-lastName"
|
||||
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Last Name</label
|
||||
>
|
||||
<input
|
||||
id="field-lastName"
|
||||
@@ -66,15 +71,18 @@
|
||||
name="lastName"
|
||||
required
|
||||
bind:value={lastName}
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none"
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
{#if fieldErrors.lastName}
|
||||
<p class="mt-1 text-sm text-red-600">{fieldErrors.lastName}</p>
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{fieldErrors.lastName}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="field-phoneNumber" class="mb-1 block text-sm font-medium text-slate-700">
|
||||
<label
|
||||
for="field-phoneNumber"
|
||||
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
@@ -83,10 +91,10 @@
|
||||
name="phoneNumber"
|
||||
required
|
||||
bind:value={phoneNumber}
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none"
|
||||
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
{#if fieldErrors.phoneNumber}
|
||||
<p class="mt-1 text-sm text-red-600">{fieldErrors.phoneNumber}</p>
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{fieldErrors.phoneNumber}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user