Add a site-wide dark mode
This commit is contained in:
@@ -16,8 +16,12 @@
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Dashboard</h1>
|
||||
<p class="mt-1 text-sm text-slate-500 sm:text-base">Manage your account and license keys.</p>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-slate-100">
|
||||
Dashboard
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-slate-500 sm:text-base dark:text-slate-400">
|
||||
Manage your account and license keys.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
@@ -31,11 +35,13 @@
|
||||
|
||||
<DashboardSection title="License Keys" description="Your active and inactive license keys.">
|
||||
{#if data.licenseKeys.length > 0}
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
>
|
||||
<!-- Desktop / tablet: table -->
|
||||
<table class="hidden w-full text-left text-sm sm:table">
|
||||
<thead
|
||||
class="border-b border-slate-200 bg-slate-50 text-xs tracking-wide text-slate-500 uppercase"
|
||||
class="border-b border-slate-200 bg-slate-50 text-xs tracking-wide text-slate-500 uppercase dark:border-slate-800 dark:bg-slate-950 dark:text-slate-400"
|
||||
>
|
||||
<tr>
|
||||
<th class="px-6 py-3 font-semibold">Key</th>
|
||||
@@ -46,19 +52,27 @@
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
{#each data.licenseKeys as key (key.key)}
|
||||
<tr class="hover:bg-slate-50">
|
||||
<td class="px-6 py-4 font-mono text-slate-800">{key.key}</td>
|
||||
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800">
|
||||
<td class="px-6 py-4 font-mono text-slate-800 dark:text-slate-200">{key.key}</td>
|
||||
<td class="px-6 py-4">
|
||||
{#if key.active}
|
||||
<span class="text-lg text-green-600" title="Active" aria-label="Active">☑</span>
|
||||
<span
|
||||
class="text-lg text-green-600 dark:text-green-400"
|
||||
title="Active"
|
||||
aria-label="Active">☑</span
|
||||
>
|
||||
{:else}
|
||||
<span class="text-lg text-slate-300" title="Inactive" aria-label="Inactive"
|
||||
>☐</span
|
||||
<span
|
||||
class="text-lg text-slate-300 dark:text-slate-600"
|
||||
title="Inactive"
|
||||
aria-label="Inactive">☐</span
|
||||
>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-600">{formatDate(key.createdAt)}</td>
|
||||
<td class="px-6 py-4 text-slate-600">
|
||||
<td class="px-6 py-4 text-slate-600 dark:text-slate-400"
|
||||
>{formatDate(key.createdAt)}</td
|
||||
>
|
||||
<td class="px-6 py-4 text-slate-600 dark:text-slate-400">
|
||||
{key.lastValidatedAt ? formatDate(key.lastValidatedAt) : 'Never'}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -71,19 +85,29 @@
|
||||
{#each data.licenseKeys as key (key.key)}
|
||||
<li class="flex flex-col gap-2 px-4 py-4">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span class="min-w-0 font-mono text-sm break-all text-slate-800">{key.key}</span>
|
||||
<span class="min-w-0 font-mono text-sm break-all text-slate-800 dark:text-slate-200"
|
||||
>{key.key}</span
|
||||
>
|
||||
<span class="shrink-0">
|
||||
{#if key.active}
|
||||
<span class="text-lg text-green-600" title="Active" aria-label="Active">☑</span>
|
||||
<span
|
||||
class="text-lg text-green-600 dark:text-green-400"
|
||||
title="Active"
|
||||
aria-label="Active">☑</span
|
||||
>
|
||||
{:else}
|
||||
<span class="text-lg text-slate-300" title="Inactive" aria-label="Inactive"
|
||||
>☐</span
|
||||
<span
|
||||
class="text-lg text-slate-300 dark:text-slate-600"
|
||||
title="Inactive"
|
||||
aria-label="Inactive">☐</span
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500">Created {formatDate(key.createdAt)}</span>
|
||||
<span class="text-xs text-slate-500">
|
||||
<span class="text-xs text-slate-500 dark:text-slate-400"
|
||||
>Created {formatDate(key.createdAt)}</span
|
||||
>
|
||||
<span class="text-xs text-slate-500 dark:text-slate-400">
|
||||
Last verified {key.lastValidatedAt ? formatDate(key.lastValidatedAt) : 'Never'}
|
||||
</span>
|
||||
</li>
|
||||
@@ -91,8 +115,12 @@
|
||||
</ul>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center">
|
||||
<p class="text-sm text-slate-600">You don't have any license keys yet.</p>
|
||||
<div
|
||||
class="rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
||||
You don't have any license keys yet.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</DashboardSection>
|
||||
|
||||
Reference in New Issue
Block a user