NeilClack
d97ed88031
layout.css - Change .dark → :root.dark so variable overrides match Tailwind's :root, :host specificity and actually take effect - Add global dark mode styles for input/select/textarea elements All .svelte files: - bg-white → bg-white dark:bg-gray-100 (cards, tables, containers) - text-white → text-white dark:text-gray-950 (button text) - Add dark:bg-gray-950 to main page containers (dashboard, account, license-keys, proclamations, proclamations/[id]) - Add dark:border-gray-300 to bordered elements (cards, tables, forms) - Add dark:bg-gray-200 to secondary backgrounds (table headers, address form, price badges) - Add dark:hover:bg-gray-300 / dark:hover:bg-gray-700 to hover states (sidebar nav links, clear button, admin categories table)
41 lines
1.1 KiB
Svelte
41 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { PageProps } from './$types';
|
|
|
|
let { form }: PageProps = $props();
|
|
</script>
|
|
|
|
<div class="mx-auto mt-12 max-w-md">
|
|
<h1 class="mb-6 text-2xl font-semibold text-gray-900">Reset Password</h1>
|
|
|
|
{#if form?.error}
|
|
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
|
|
{form.error}
|
|
</div>
|
|
{/if}
|
|
|
|
<form method="POST" class="flex flex-col gap-4">
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
placeholder="New Password"
|
|
required
|
|
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"
|
|
/>
|
|
<input
|
|
type="password"
|
|
name="password2"
|
|
placeholder="Confirm New Password"
|
|
required
|
|
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"
|
|
/>
|
|
<button
|
|
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"
|
|
>
|
|
Reset Password
|
|
</button>
|
|
</form>
|
|
</div>
|