RadiantWaveTech/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace CSS variable inversion with standard Tailwind dark: classes

Browse Source 
The :root.dark CSS variable inversion caused contrast problems -
text-gray-900 and bg-gray-950 both became light in dark mode, making
text invisible on backgrounds.

Fix:
- Remove :root.dark { --color-gray-*: ... } block from layout.css
- Change :root.dark selector to .dark for form element styles
- Add standard Tailwind dark: classes throughout every .svelte page
  - dark:bg-gray-950 (page backgrounds)
  - dark:bg-gray-900 (card/surface backgrounds)
  - dark:bg-gray-800 (table headers, elevated surfaces, active nav links)
  - dark:bg-gray-700 (primary buttons)
  - dark:text-gray-100 (primary text)
  - dark:text-gray-300 (secondary text, labels)
  - dark:text-gray-400 (muted text, inactive nav links, links)
  - dark:border-gray-700 (borders)
  - dark:border-gray-600 (input borders)
  - dark:hover:bg-gray-800 (sidebar hover)
  - dark:hover:bg-gray-600 (button hover)
  - dark:prose-invert (rich text content)
- TopBar: full dark mode support (bg, links, toggle button)
- Sidebar: all nav links, active states, admin submenu get dark mode
- Auth pages (login, register, forgot, reset): full dark mode
- Protected pages (dashboard, account, setup, license-keys,
  proclamations, categories): full dark mode
- Home page, error page, admin page: dark:text-gray-100
This commit is contained in:
NeilClack
2026-07-07 10:27:08 -05:00
parent d97ed88031
commit b87e2b0936
18 changed files with 197 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/ui/topBar/TopBar.svelte
+7 -6
View File
@@ -25,25 +25,26 @@
} }
</script> </script>
<nav class="flex w-full items-center justify-between px-8 py-6"> <nav class="flex w-full items-center justify-between border-b border-gray-200 px-8 py-6 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100">
<span><a href="/">Rhema Wave Technologies</a></span> <span><a href="/" class="dark:text-gray-100">Rhema Wave Technologies</a></span>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<button onclick={toggleTheme} class="border px-3 py-1 text-sm"> <button onclick={toggleTheme} class="border border-gray-300 px-3 py-1 text-sm dark:border-gray-600 dark:text-gray-300">
{dark ? 'Light' : 'Dark'} {dark ? 'Light' : 'Dark'}
</button> </button>
{#if $session.data} {#if $session.data}
{#if isAdmin} {#if isAdmin}
<a href="/admin">Admin Panel</a> <a href="/admin" class="dark:text-gray-300 dark:hover:text-gray-100">Admin Panel</a>
{/if} {/if}
<a href="/dashboard">Dashboard</a> <a href="/dashboard" class="dark:text-gray-300 dark:hover:text-gray-100">Dashboard</a>
<button <button
class="dark:text-gray-300 dark:hover:text-gray-100"
onclick={async () => { onclick={async () => {
await authClient.signOut(); await authClient.signOut();
window.location.href = '/'; window.location.href = '/';
}}>Log Out</button }}>Log Out</button
> >
{:else} {:else}
<span><a href="/login">Log In</a> | <a href="/register">Register</a></span> <span class="dark:text-gray-300"><a href="/login" class="dark:text-gray-300 dark:hover:text-gray-100">Log In</a> | <a href="/register" class="dark:text-gray-300 dark:hover:text-gray-100">Register</a></span>
{/if} {/if}
</div> </div>
</nav> </nav>
src/routes/(protected)/(user)/account/+page.svelte
+35 -35
View File
@@ -23,26 +23,26 @@
} }
</script> </script>
<div class="flex h-full min-h-0 flex-col gap-8 p-6 dark:bg-gray-950"> <div class="flex h-full min-h-0 flex-col gap-8 p-6 dark:text-gray-100">
<h1 class="text-2xl font-semibold text-gray-900">Account</h1> <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Account</h1>
<!-- Email (read-only) --> <!-- Email (read-only) -->
<div> <div>
<p class="text-sm font-medium text-gray-700">Email</p> <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Email</p>
<p class="mt-1 text-gray-900">{data.user.email}</p> <p class="mt-1 text-gray-900 dark:text-gray-100">{data.user.email}</p>
</div> </div>
<!-- Profile Form --> <!-- Profile Form -->
<section> <section>
<h2 class="mb-4 text-lg font-medium text-gray-900">Profile</h2> <h2 class="mb-4 text-lg font-medium text-gray-900 dark:text-gray-100">Profile</h2>
{#if form?.action === 'updateProfile' && form?.success} {#if form?.action === 'updateProfile' && form?.success}
<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700"> <div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
Profile updated successfully. Profile updated successfully.
</div> </div>
{/if} {/if}
{#if form?.action === 'updateProfile' && form?.error} {#if form?.action === 'updateProfile' && form?.error}
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700"> <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
{form.error} {form.error}
</div> </div>
{/if} {/if}
@@ -50,7 +50,7 @@
<form method="POST" action="?/updateProfile" class="flex max-w-lg flex-col gap-4"> <form method="POST" action="?/updateProfile" class="flex max-w-lg flex-col gap-4">
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<div> <div>
<label for="firstName" class="block text-sm font-medium text-gray-700"> <label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
First Name First Name
</label> </label>
<input <input
@@ -59,11 +59,11 @@
name="firstName" name="firstName"
value={data.user.profile?.firstName ?? ''} value={data.user.profile?.firstName ?? ''}
required required
class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
</div> </div>
<div> <div>
<label for="lastName" class="block text-sm font-medium text-gray-700"> <label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Last Name Last Name
</label> </label>
<input <input
@@ -72,12 +72,12 @@
name="lastName" name="lastName"
value={data.user.profile?.lastName ?? ''} value={data.user.profile?.lastName ?? ''}
required required
class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
</div> </div>
</div> </div>
<div> <div>
<label for="phoneNumber" class="block text-sm font-medium text-gray-700"> <label for="phoneNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Phone Number Phone Number
</label> </label>
<input <input
@@ -87,13 +87,13 @@
bind:value={phoneNumber} bind:value={phoneNumber}
oninput={handlePhoneInput} oninput={handlePhoneInput}
required required
class="mt-1 w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="mt-1 w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
</div> </div>
<div> <div>
<button <button
type="submit" type="submit"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700" class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
> >
Save Profile Save Profile
</button> </button>
@@ -104,10 +104,10 @@
<!-- Addresses --> <!-- Addresses -->
<section> <section>
<div class="mb-4 flex items-center justify-between"> <div class="mb-4 flex items-center justify-between">
<h2 class="text-lg font-medium text-gray-900">Addresses</h2> <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Addresses</h2>
<button <button
type="button" type="button"
class="rounded-lg bg-green-600 px-3 py-1.5 text-sm font-medium text-white dark:text-gray-950 transition-colors hover:bg-green-700" class="rounded-lg bg-green-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-green-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
onclick={() => (showAddressForm = !showAddressForm)} onclick={() => (showAddressForm = !showAddressForm)}
> >
{showAddressForm ? 'Cancel' : 'Add Address'} {showAddressForm ? 'Cancel' : 'Add Address'}
@@ -115,12 +115,12 @@
</div> </div>
{#if form?.action === 'addAddress' && form?.success} {#if form?.action === 'addAddress' && form?.success}
<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700"> <div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
Address added successfully. Address added successfully.
</div> </div>
{/if} {/if}
{#if form?.action === 'addAddress' && form?.error} {#if form?.action === 'addAddress' && form?.error}
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700"> <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
{form.error} {form.error}
</div> </div>
{/if} {/if}
@@ -129,44 +129,44 @@
<form <form
method="POST" method="POST"
action="?/addAddress" action="?/addAddress"
class="mb-6 max-w-lg rounded-lg border border-gray-200 dark:border-gray-300 bg-gray-50 dark:bg-gray-200 p-4" class="mb-6 max-w-lg rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800"
> >
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<div> <div>
<label for="street" class="block text-sm font-medium text-gray-700">Street</label> <label for="street" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Street</label>
<input <input
type="text" type="text"
id="street" id="street"
name="street" name="street"
required required
class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
</div> </div>
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<div> <div>
<label for="city" class="block text-sm font-medium text-gray-700">City</label> <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300">City</label>
<input <input
type="text" type="text"
id="city" id="city"
name="city" name="city"
required required
class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
</div> </div>
<div> <div>
<label for="state" class="block text-sm font-medium text-gray-700">State</label> <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300">State</label>
<input <input
type="text" type="text"
id="state" id="state"
name="state" name="state"
required required
class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
</div> </div>
</div> </div>
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<div> <div>
<label for="postalCode" class="block text-sm font-medium text-gray-700"> <label for="postalCode" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Postal Code Postal Code
</label> </label>
<input <input
@@ -174,25 +174,25 @@
id="postalCode" id="postalCode"
name="postalCode" name="postalCode"
required required
class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
</div> </div>
<div> <div>
<label for="country" class="block text-sm font-medium text-gray-700">Country</label> <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
<input <input
type="text" type="text"
id="country" id="country"
name="country" name="country"
required required
value="US" value="US"
class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
</div> </div>
</div> </div>
<div> <div>
<button <button
type="submit" type="submit"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700" class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
> >
Save Address Save Address
</button> </button>
@@ -204,17 +204,17 @@
{#if data.user.profile?.addresses && data.user.profile.addresses.length > 0} {#if data.user.profile?.addresses && data.user.profile.addresses.length > 0}
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
{#each data.user.profile.addresses as address} {#each data.user.profile.addresses as address}
<div class="rounded-lg border border-gray-200 bg-white dark:bg-gray-100 p-4"> <div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
<p class="text-sm text-gray-900">{address.street}</p> <p class="text-sm text-gray-900 dark:text-gray-100">{address.street}</p>
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600 dark:text-gray-400">
{address.city}, {address.state} {address.postalCode} {address.city}, {address.state} {address.postalCode}
</p> </p>
<p class="text-sm text-gray-600">{address.country}</p> <p class="text-sm text-gray-600 dark:text-gray-400">{address.country}</p>
</div> </div>
{/each} {/each}
</div> </div>
{:else if !showAddressForm} {:else if !showAddressForm}
<p class="text-sm text-gray-500">No addresses on file.</p> <p class="text-sm text-gray-500 dark:text-gray-400">No addresses on file.</p>
{/if} {/if}
</section> </section>
</div> </div>
src/routes/(protected)/(user)/account/setup/+page.svelte
+2 -2
View File
@@ -43,7 +43,7 @@
</script> </script>
<Window> <Window>
<form method="POST" class="border shadow-lg p-6 rounded-xl dark:bg-gray-100 dark:border-gray-300"> <form method="POST" class="border p-6 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100">
<p class="mx-auto text-center my-4 italic">Please finish setting up your profile</p> <p class="mx-auto text-center my-4 italic">Please finish setting up your profile</p>
{#if data.user?.image} {#if data.user?.image}
<img src={data.user?.image} class="rounded-full w-[8rem] mx-auto" alt="Profile" /> <img src={data.user?.image} class="rounded-full w-[8rem] mx-auto" alt="Profile" />
@@ -64,6 +64,6 @@
oninput={handlePhoneInput} oninput={handlePhoneInput}
/> />
</div> </div>
<button type="submit" class="p-2 px-4 bg-blue-300 rounded-xl">Submit</button> <button type="submit" class="p-2 px-4 bg-blue-300 dark:bg-gray-700 dark:text-gray-100">Submit</button>
</form> </form>
</Window> </Window>
src/routes/(protected)/(user)/dashboard/+page.svelte
+14 -14
View File
@@ -4,35 +4,35 @@
let { data }: PageProps = $props(); let { data }: PageProps = $props();
</script> </script>
<div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:bg-gray-950"> <div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:text-gray-100">
<h1 class="text-2xl font-semibold text-gray-900">Welcome, {data.firstName}!</h1> <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Welcome, {data.firstName}!</h1>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<a <a
href="/license-keys" href="/license-keys"
class="rounded-lg border border-gray-200 bg-white dark:bg-gray-100 p-6 shadow-sm transition-shadow hover:shadow-md" class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
> >
<p class="text-sm font-medium text-gray-500">Active License Keys</p> <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active License Keys</p>
<p class="mt-2 text-3xl font-bold text-gray-900">{data.activeKeys}</p> <p class="mt-2 text-3xl font-bold text-gray-900 dark:text-gray-100">{data.activeKeys}</p>
<p class="mt-1 text-sm text-gray-400">{data.totalKeys} total</p> <p class="mt-1 text-sm text-gray-400 dark:text-gray-500">{data.totalKeys} total</p>
</a> </a>
<a <a
href="/admin/proclamations" href="/admin/proclamations"
class="rounded-lg border border-gray-200 bg-white dark:bg-gray-100 p-6 shadow-sm transition-shadow hover:shadow-md" class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
> >
<p class="text-sm font-medium text-gray-500">Proclamations</p> <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Proclamations</p>
<p class="mt-2 text-3xl font-bold text-gray-900">{data.proclamationCount}</p> <p class="mt-2 text-3xl font-bold text-gray-900 dark:text-gray-100">{data.proclamationCount}</p>
<p class="mt-1 text-sm text-gray-400">Browse all</p> <p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Browse all</p>
</a> </a>
<a <a
href="/account" href="/account"
class="rounded-lg border border-gray-200 bg-white dark:bg-gray-100 p-6 shadow-sm transition-shadow hover:shadow-md" class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
> >
<p class="text-sm font-medium text-gray-500">Account</p> <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Account</p>
<p class="mt-2 text-lg font-semibold text-gray-900">Manage Profile</p> <p class="mt-2 text-lg font-semibold text-gray-900 dark:text-gray-100">Manage Profile</p>
<p class="mt-1 text-sm text-gray-400">Edit your details</p> <p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Edit your details</p>
</a> </a>
</div> </div>
</div> </div>
src/routes/(protected)/(user)/license-keys/+page.svelte
+14 -14
View File
@@ -4,39 +4,39 @@
let { data }: PageProps = $props(); let { data }: PageProps = $props();
</script> </script>
<div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:bg-gray-950"> <div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:text-gray-100">
<h1 class="text-2xl font-semibold text-gray-900">License Keys</h1> <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">License Keys</h1>
{#if data.licenseKeys.length > 0} {#if data.licenseKeys.length > 0}
<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-300"> <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-300"> <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-200"> <thead class="bg-gray-50 dark:bg-gray-800">
<tr> <tr>
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
Key Key
</th> </th>
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
Level Level
</th> </th>
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
Status Status
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-300 bg-white dark:bg-gray-100"> <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
{#each data.licenseKeys as key} {#each data.licenseKeys as key}
<tr> <tr>
<td class="whitespace-nowrap px-6 py-4 font-mono text-sm text-gray-900"> <td class="whitespace-nowrap px-6 py-4 font-mono text-sm text-gray-900 dark:text-gray-100">
{key.key} {key.key}
</td> </td>
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-700"> <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
{key.level} {key.level}
</td> </td>
<td class="whitespace-nowrap px-6 py-4 text-sm"> <td class="whitespace-nowrap px-6 py-4 text-sm">
<span <span
class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 {key.active class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 {key.active
? 'bg-green-100 text-green-800' ? 'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-gray-200'
: 'bg-red-100 text-red-800'}" : 'bg-red-100 text-red-800 dark:bg-gray-700 dark:text-gray-200'}"
> >
{key.active ? 'Active' : 'Inactive'} {key.active ? 'Active' : 'Inactive'}
</span> </span>
@@ -48,7 +48,7 @@
</div> </div>
{:else} {:else}
<div class="flex flex-1 items-center justify-center"> <div class="flex flex-1 items-center justify-center">
<p class="text-lg text-gray-500">You don't have any license keys yet.</p> <p class="text-lg text-gray-500 dark:text-gray-400">You don't have any license keys yet.</p>
</div> </div>
{/if} {/if}
</div> </div>
src/routes/(protected)/(user)/proclamations/+page.svelte
+14 -14
View File
@@ -34,29 +34,29 @@
} }
</script> </script>
<div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:bg-gray-950"> <div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:text-gray-100">
<h1 class="text-2xl font-semibold text-gray-900">Proclamations</h1> <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Proclamations</h1>
<!-- Filters --> <!-- Filters -->
<div class="flex flex-wrap items-end gap-4"> <div class="flex flex-wrap items-end gap-4">
<div> <div>
<label for="search" class="block text-sm font-medium text-gray-700">Search</label> <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
<input <input
type="text" type="text"
id="search" id="search"
bind:value={search} bind:value={search}
placeholder="Search by name..." placeholder="Search by name..."
class="mt-1 rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="mt-1 rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
onkeydown={(e) => e.key === 'Enter' && applyFilters()} onkeydown={(e) => e.key === 'Enter' && applyFilters()}
/> />
</div> </div>
<div> <div>
<label for="category" class="block text-sm font-medium text-gray-700">Category</label> <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
<select <select
id="category" id="category"
bind:value={categoryId} bind:value={categoryId}
onchange={applyFilters} onchange={applyFilters}
class="mt-1 rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="mt-1 rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
> >
<option value={null}>All Categories</option> <option value={null}>All Categories</option>
{#each data.categories as cat} {#each data.categories as cat}
@@ -66,7 +66,7 @@
</div> </div>
<button <button
type="button" type="button"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700" class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
onclick={applyFilters} onclick={applyFilters}
> >
Search Search
@@ -74,7 +74,7 @@
{#if data.search || data.categoryId} {#if data.search || data.categoryId}
<button <button
type="button" type="button"
class="rounded-lg border border-gray-300 dark:border-gray-400 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:hover:bg-gray-300" class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
onclick={clearFilters} onclick={clearFilters}
> >
Clear Clear
@@ -88,16 +88,16 @@
{#each data.proclamations as proclamation} {#each data.proclamations as proclamation}
<a <a
href="/proclamations/{proclamation.id}" href="/proclamations/{proclamation.id}"
class="flex flex-col rounded-lg border border-gray-200 dark:border-gray-300 bg-white dark:bg-gray-100 p-5 shadow-sm transition-shadow hover:shadow-md" class="flex flex-col rounded-lg border border-gray-200 bg-white p-5 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
> >
<h2 class="text-lg font-medium text-gray-900">{proclamation.name}</h2> <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">{proclamation.name}</h2>
<p class="mt-1 text-sm text-gray-500">{displayCategoryName(proclamation.category)}</p> <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{displayCategoryName(proclamation.category)}</p>
<div class="mt-auto flex items-center justify-between pt-4"> <div class="mt-auto flex items-center justify-between pt-4">
<span class="text-sm text-purple-600"> <span class="text-sm text-purple-600 dark:text-gray-400">
{proclamation.solfeggioFrequency.value} Hz &mdash; {proclamation.solfeggioFrequency.value} Hz &mdash;
{proclamation.solfeggioFrequency.name} {proclamation.solfeggioFrequency.name}
</span> </span>
<span class="font-semibold text-gray-900"> <span class="font-semibold text-gray-900 dark:text-gray-100">
${proclamation.price.toFixed(2)} ${proclamation.price.toFixed(2)}
</span> </span>
</div> </div>
@@ -106,7 +106,7 @@
</div> </div>
{:else} {:else}
<div class="flex flex-1 items-center justify-center"> <div class="flex flex-1 items-center justify-center">
<p class="text-lg text-gray-500">No proclamations found.</p> <p class="text-lg text-gray-500 dark:text-gray-400">No proclamations found.</p>
</div> </div>
{/if} {/if}
</div> </div>
src/routes/(protected)/(user)/proclamations/[id]/+page.svelte
+11 -11
View File
@@ -10,36 +10,36 @@
); );
</script> </script>
<div class="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col gap-6 p-6 dark:bg-gray-950"> <div class="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col gap-6 p-6 dark:text-gray-100">
<a <a
href="/proclamations" href="/proclamations"
class="text-sm text-blue-600 hover:text-blue-800 hover:underline" class="text-sm text-blue-600 hover:text-blue-800 hover:underline dark:text-gray-400 dark:hover:text-gray-200"
> >
&larr; Back to Proclamations &larr; Back to Proclamations
</a> </a>
<div> <div>
<h1 class="text-2xl font-semibold text-gray-900">{data.proclamation.name}</h1> <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{data.proclamation.name}</h1>
<p class="mt-1 text-sm text-gray-500">{categoryBreadcrumb}</p> <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{categoryBreadcrumb}</p>
</div> </div>
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<div class="rounded-lg border border-purple-200 bg-purple-50 px-4 py-2"> <div class="rounded-lg border border-purple-200 bg-purple-50 px-4 py-2 dark:border-gray-700 dark:bg-gray-800">
<p class="text-xs font-medium text-purple-600">Frequency</p> <p class="text-xs font-medium text-purple-600 dark:text-gray-400">Frequency</p>
<p class="text-sm font-semibold text-purple-900"> <p class="text-sm font-semibold text-purple-900 dark:text-gray-100">
{data.proclamation.solfeggioFrequency.value} Hz &mdash; {data.proclamation.solfeggioFrequency.value} Hz &mdash;
{data.proclamation.solfeggioFrequency.name} {data.proclamation.solfeggioFrequency.name}
</p> </p>
</div> </div>
<div class="rounded-lg border border-gray-200 dark:border-gray-300 bg-gray-50 dark:bg-gray-200 px-4 py-2"> <div class="rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 dark:border-gray-700 dark:bg-gray-800">
<p class="text-xs font-medium text-gray-500">Price</p> <p class="text-xs font-medium text-gray-500 dark:text-gray-400">Price</p>
<p class="text-sm font-semibold text-gray-900"> <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
${data.proclamation.price.toFixed(2)} ${data.proclamation.price.toFixed(2)}
</p> </p>
</div> </div>
</div> </div>
<div class="prose max-w-none rounded-lg border border-gray-200 dark:border-gray-300 bg-white dark:bg-gray-100 p-6"> <div class="prose max-w-none rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900 dark:prose-invert">
{@html data.proclamation.content} {@html data.proclamation.content}
</div> </div>
</div> </div>
src/routes/(protected)/+layout.svelte
+6 -6
View File
@@ -28,8 +28,8 @@
<a <a
href={link.href} href={link.href}
class="rounded px-3 py-1.5 text-sm font-medium transition-colors {isActive(link.href) class="rounded px-3 py-1.5 text-sm font-medium transition-colors {isActive(link.href)
? 'bg-blue-50 text-blue-700' ? 'bg-blue-50 text-blue-700 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:hover:bg-gray-300 dark:hover:text-gray-100'}" : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100'}"
> >
{link.label} {link.label}
</a> </a>
@@ -39,8 +39,8 @@
<a <a
href="/admin" href="/admin"
class="rounded px-3 py-1.5 text-sm font-medium transition-colors {isActive('/admin') class="rounded px-3 py-1.5 text-sm font-medium transition-colors {isActive('/admin')
? 'bg-blue-50 text-blue-700' ? 'bg-blue-50 text-blue-700 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:hover:bg-gray-300 dark:hover:text-gray-100'}" : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100'}"
> >
Admin Panel Admin Panel
</a> </a>
@@ -51,8 +51,8 @@
class="rounded px-3 py-1 text-sm transition-colors {isActive( class="rounded px-3 py-1 text-sm transition-colors {isActive(
'/admin/' + model.slug '/admin/' + model.slug
) )
? 'bg-blue-50 text-blue-700' ? 'bg-blue-50 text-blue-700 dark:bg-gray-800 dark:text-gray-100'
: 'text-blue-600 hover:bg-gray-50 hover:text-blue-800 dark:hover:bg-gray-300 dark:hover:text-gray-100'}" : 'text-blue-600 hover:bg-gray-50 hover:text-blue-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100'}"
> >
{model.displayName} {model.displayName}
</a> </a>
src/routes/(protected)/admin/+page.svelte
+1 -1
View File
@@ -1 +1 @@
<h1>Admin Dashboard</h1> <h1 class="p-6 dark:text-gray-100">Admin Dashboard</h1>
src/routes/(protected)/admin/categories/+page.svelte
+10 -8
View File
@@ -13,27 +13,29 @@
</script> </script>
<!-- Display a list of categories --> <!-- Display a list of categories -->
<table> <div class="p-6 dark:text-gray-100">
<table class="w-full">
<thead> <thead>
<tr> <tr class="border-b border-gray-200 dark:border-gray-700">
<th class="hidden">ID</th> <th class="hidden">ID</th>
<th>Name</th> <th class="px-4 py-2 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Name</th>
<th>Parent Category</th> <th class="px-4 py-2 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Parent Category</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#if data.categories} {#if data.categories}
{#each data.categories as category, i (category.id)} {#each data.categories as category, i (category.id)}
<tr class="hover:bg-gray-300 dark:hover:bg-gray-700"> <tr class="border-b border-gray-200 hover:bg-gray-300 dark:border-gray-700 dark:hover:bg-gray-800">
<td class="hidden">{i}</td> <td class="hidden">{i}</td>
<td>{category.name}</td> <td class="px-4 py-2 text-gray-900 dark:text-gray-100">{category.name}</td>
{#if category.parentId} {#if category.parentId}
<td>{getCategoryNameFromId(category.parentId)}</td> <td class="px-4 py-2 text-gray-700 dark:text-gray-300">{getCategoryNameFromId(category.parentId)}</td>
{:else} {:else}
<td></td> <td class="px-4 py-2"></td>
{/if} {/if}
</tr> </tr>
{/each} {/each}
{/if} {/if}
</tbody> </tbody>
</table> </table>
</div>
src/routes/+error.svelte
+3 -3
View File
@@ -5,9 +5,9 @@
<Window> <Window>
{#if $page.status === 403} {#if $page.status === 403}
<h1>Not Authorized</h1> <h1 class="dark:text-gray-100">Not Authorized</h1>
<p> <p class="dark:text-gray-300">
You don't have permission to view this page. <a href="/">Go home</a>. You don't have permission to view this page. <a href="/" class="dark:text-gray-400 dark:hover:text-gray-200">Go home</a>.
</p> </p>
{/if} {/if}
</Window> </Window>
src/routes/+layout.svelte
+1 -1
View File
@@ -19,6 +19,6 @@
</svelte:head> </svelte:head>
<TopBar userRoleId={data.userRoleId} /> <TopBar userRoleId={data.userRoleId} />
<div class="flex min-h-0 flex-1 px-8 dark:bg-gray-950 dark:text-gray-100"> <div class="flex min-h-0 flex-1 px-8 dark:bg-gray-950">
{@render children()} {@render children()}
</div> </div>
src/routes/+page.svelte
+1 -1
View File
@@ -3,5 +3,5 @@
</script> </script>
<Center> <Center>
<h1>Hello</h1> <h1 class="dark:text-gray-100">Hello</h1>
</Center> </Center>
src/routes/forgot-password/+page.svelte
+7 -7
View File
@@ -5,17 +5,17 @@
let { form }: PageProps = $props(); let { form }: PageProps = $props();
</script> </script>
<div class="mx-auto mt-12 max-w-md"> <div class="mx-auto mt-12 max-w-md dark:text-gray-100">
<h1 class="mb-6 text-2xl font-semibold text-gray-900">Forgot Password</h1> <h1 class="mb-6 text-2xl font-semibold text-gray-900 dark:text-gray-100">Forgot Password</h1>
{#if form?.success} {#if form?.success}
<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-4 text-green-700"> <div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-4 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
If an account with that email exists, we've sent a password reset link. If an account with that email exists, we've sent a password reset link.
</div> </div>
{/if} {/if}
{#if form?.error && !form?.success} {#if form?.error && !form?.success}
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700"> <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
{form.error} {form.error}
</div> </div>
{/if} {/if}
@@ -26,17 +26,17 @@
name="email" name="email"
placeholder="Email Address" placeholder="Email Address"
required required
class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
<button <button
type="submit" type="submit"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700" class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
> >
Send Reset Link Send Reset Link
</button> </button>
</form> </form>
<a href={resolve('/login')} class="mt-4 block text-sm text-blue-600 hover:text-blue-800"> <a href={resolve('/login')} class="mt-4 block text-sm text-blue-600 hover:text-blue-800 dark:text-gray-400 dark:hover:text-gray-200">
Back to Login Back to Login
</a> </a>
</div> </div>
src/routes/layout.css
+3 -20
View File
@@ -74,29 +74,12 @@
--shadow-2xl: 0 0 #0000; --shadow-2xl: 0 0 #0000;
} }
/* ------------------------------------------------------------------ */
/* Dark mode — invert the gray scale */
/* Use :root.dark so specificity matches Tailwind's :root, :host */
/* ------------------------------------------------------------------ */
:root.dark {
--color-gray-50: #030712;
--color-gray-100: #111827;
--color-gray-200: #1f2937;
--color-gray-300: #374151;
--color-gray-400: #4b5563;
--color-gray-500: #6b7280;
--color-gray-600: #9ca3af;
--color-gray-700: #d1d5db;
--color-gray-800: #e5e7eb;
--color-gray-900: #f9fafb;
}
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
/* Dark mode form elements */ /* Dark mode form elements */
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
:root.dark input, .dark input,
:root.dark select, .dark select,
:root.dark textarea { .dark textarea {
background-color: #1f2937; background-color: #1f2937;
color: #f9fafb; color: #f9fafb;
border-color: #374151; border-color: #374151;
src/routes/login/+page.svelte
+6 -6
View File
@@ -26,16 +26,16 @@
</script> </script>
<Window> <Window>
<div> <div class="dark:text-gray-100">
{#if verified} {#if verified}
<div <div
class="mb-4 rounded-lg border border-green-200 bg-green-50 p-4 text-green-700" class="mb-4 rounded-lg border border-green-200 bg-green-50 p-4 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
> >
Your email has been verified. You can now log in. Your email has been verified. You can now log in.
</div> </div>
{/if} {/if}
{#if error} {#if error}
<span class="text-red-600">{error}</span> <span class="text-red-600 dark:text-gray-300">{error}</span>
{/if} {/if}
<form <form
onsubmit={handleSubmit} onsubmit={handleSubmit}
@@ -44,13 +44,13 @@
<p>Login</p> <p>Login</p>
<input type="email" placeholder="Email Address" bind:value={email} required class="my-2" /> <input type="email" placeholder="Email Address" bind:value={email} required class="my-2" />
<input type="password" placeholder="Password" bind:value={password} required class="my-2" /> <input type="password" placeholder="Password" bind:value={password} required class="my-2" />
<button class="mt-4 rounded bg-blue-200 px-4 py-2" type="submit">Sign In</button> <button class="mt-4 rounded bg-blue-200 px-4 py-2 dark:bg-gray-700 dark:text-gray-100" type="submit">Sign In</button>
</form> </form>
<div class="mt-2 flex flex-col items-center gap-2"> <div class="mt-2 flex flex-col items-center gap-2">
<a href="/forgot-password" class="text-sm text-blue-600 hover:text-blue-800" <a href="/forgot-password" class="text-sm text-blue-600 hover:text-blue-800 dark:text-gray-400 dark:hover:text-gray-200"
>Forgot Password?</a >Forgot Password?</a
> >
<a href="/register" class="text-sm text-blue-600 hover:text-blue-800" <a href="/register" class="text-sm text-blue-600 hover:text-blue-800 dark:text-gray-400 dark:hover:text-gray-200"
>Don't have an account? Register</a >Don't have an account? Register</a
> >
</div> </div>
src/routes/register/+page.svelte
+5 -3
View File
@@ -7,10 +7,11 @@
</script> </script>
<Window> <Window>
<div class="dark:text-gray-100">
{#if form?.success} {#if form?.success}
<div class="mx-auto max-w-md text-center"> <div class="mx-auto max-w-md text-center">
<div <div
class="rounded-lg border border-green-200 bg-green-50 p-6 text-green-700" class="rounded-lg border border-green-200 bg-green-50 p-6 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
> >
<p class="text-lg font-medium">Account created!</p> <p class="text-lg font-medium">Account created!</p>
<p class="mt-2"> <p class="mt-2">
@@ -22,7 +23,7 @@
{:else} {:else}
<div class="flex flex-col items-start justify-center"> <div class="flex flex-col items-start justify-center">
{#if form?.error} {#if form?.error}
<div class="mb-4 w-full rounded-lg border border-red-200 bg-red-50 p-3 text-red-700"> <div class="mb-4 w-full rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
{form.error} {form.error}
</div> </div>
{/if} {/if}
@@ -32,7 +33,7 @@
<input type="email" name="email" placeholder="Email Address" required class="mb-2" /> <input type="email" name="email" placeholder="Email Address" required class="mb-2" />
<input type="password" name="password" placeholder="Password" required class="mb-2" /> <input type="password" name="password" placeholder="Password" required class="mb-2" />
<input type="password" name="password2" placeholder="Verify Password" required class="mb-2" /> <input type="password" name="password2" placeholder="Verify Password" required class="mb-2" />
<button type="submit" class="mx-auto rounded-full bg-blue-600 px-6 py-2 text-white dark:text-gray-950" <button type="submit" class="mx-auto rounded-full bg-blue-600 px-6 py-2 text-white dark:bg-gray-700 dark:text-gray-100"
>Submit</button >Submit</button
> >
</form> </form>
@@ -45,4 +46,5 @@
> >
</div> </div>
{/if} {/if}
</div>
</Window> </Window>
src/routes/reset-password/+page.svelte
+6 -6
View File
@@ -4,11 +4,11 @@
let { form }: PageProps = $props(); let { form }: PageProps = $props();
</script> </script>
<div class="mx-auto mt-12 max-w-md"> <div class="mx-auto mt-12 max-w-md dark:text-gray-100">
<h1 class="mb-6 text-2xl font-semibold text-gray-900">Reset Password</h1> <h1 class="mb-6 text-2xl font-semibold text-gray-900 dark:text-gray-100">Reset Password</h1>
{#if form?.error} {#if form?.error}
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700"> <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
{form.error} {form.error}
</div> </div>
{/if} {/if}
@@ -20,7 +20,7 @@
placeholder="New Password" placeholder="New Password"
required required
minlength="8" minlength="8"
class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
<input <input
type="password" type="password"
@@ -28,11 +28,11 @@
placeholder="Confirm New Password" placeholder="Confirm New Password"
required required
minlength="8" minlength="8"
class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/> />
<button <button
type="submit" type="submit"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700" class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
> >
Reset Password Reset Password
</button> </button>