Enable dark mode
This commit is contained in:
dtonon
parent
b3e6533748
commit
dcd3857c80
26 changed files with 410 additions and 220 deletions
|
|
@ -5,6 +5,7 @@
|
|||
import { resourcesStore } from "$lib/resources.svelte";
|
||||
import { draftState, resumeDraft } from "$lib/draft.svelte";
|
||||
import { GROUP_ID, TITLE } from "$lib/config";
|
||||
import ThemeToggle from "$lib/components/ThemeToggle.svelte";
|
||||
|
||||
type Props = {
|
||||
mode: "simple" | "full";
|
||||
|
|
@ -45,37 +46,37 @@
|
|||
class="max-w-[90%] shrink-0 object-cover"
|
||||
/>
|
||||
{/if}
|
||||
<span class="mt-2 text-[1.3rem] leading-6 font-medium text-neutral-900"
|
||||
<span class="mt-2 text-[1.3rem] leading-6 font-medium text-neutral-900 dark:text-neutral-100"
|
||||
>{name}</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/"
|
||||
class="flex items-center gap-2 py-1 text-neutral-700 hover:bg-neutral-100"
|
||||
class="flex items-center gap-2 py-1 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"
|
||||
>
|
||||
{mode === "simple" ? "Discussions" : "Home"}
|
||||
</a>
|
||||
|
||||
{#if mode === "simple"}
|
||||
<div class="mt-6 flex">
|
||||
<p class="text-sm text-neutral-500">{groupStore.data?.about ?? ""}</p>
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">{groupStore.data?.about ?? ""}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<nav class="mt-6 flex-auto" aria-label="Rooms">
|
||||
<p
|
||||
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase"
|
||||
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 dark:text-neutral-500 uppercase"
|
||||
>
|
||||
Rooms
|
||||
</p>
|
||||
{#if groupsStore.list.length === 0 && !groupsStore.loaded}
|
||||
<p class="py-1 text-sm text-neutral-400">Loading rooms…</p>
|
||||
<p class="py-1 text-sm text-neutral-400 dark:text-neutral-500">Loading rooms…</p>
|
||||
{/if}
|
||||
{#each groupsStore.list as room}
|
||||
<a
|
||||
href="/room/{room.id}"
|
||||
class="flex items-center gap-2 py-1 hover:bg-neutral-100
|
||||
{activeRoom === room.id ? ' text-brand' : 'text-neutral-700'}"
|
||||
class="flex items-center gap-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-800
|
||||
{activeRoom === room.id ? ' text-brand' : 'text-neutral-700 dark:text-neutral-300'}"
|
||||
>
|
||||
{room.name}
|
||||
</a>
|
||||
|
|
@ -84,18 +85,18 @@
|
|||
{#if activeAbout}
|
||||
<div class="mt-6">
|
||||
<p
|
||||
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase"
|
||||
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 dark:text-neutral-500 uppercase"
|
||||
>
|
||||
About
|
||||
</p>
|
||||
<p class="text-sm text-neutral-500">{activeAbout}</p>
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">{activeAbout}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<nav class="mt-6 flex-auto" aria-label="Resources">
|
||||
<p
|
||||
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase"
|
||||
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 dark:text-neutral-500 uppercase"
|
||||
>
|
||||
Resources
|
||||
</p>
|
||||
|
|
@ -103,16 +104,16 @@
|
|||
<a
|
||||
href="/resource/{r.slug}"
|
||||
aria-current={activeResource === r.slug ? "page" : undefined}
|
||||
class="block py-1 hover:text-neutral-900
|
||||
{activeResource === r.slug ? 'text-brand' : 'text-neutral-500'}"
|
||||
class="block py-1 hover:text-neutral-900 dark:hover:text-neutral-100
|
||||
{activeResource === r.slug ? 'text-brand' : 'text-neutral-500 dark:text-neutral-400'}"
|
||||
>{r.title}</a
|
||||
>
|
||||
{/each}
|
||||
<a
|
||||
href="/contacts"
|
||||
aria-current={contactsActive ? "page" : undefined}
|
||||
class="block py-1 hover:text-neutral-900
|
||||
{contactsActive ? 'text-brand' : 'text-neutral-500'}">Contacts</a
|
||||
class="block py-1 hover:text-neutral-900 dark:hover:text-neutral-100
|
||||
{contactsActive ? 'text-brand' : 'text-neutral-500 dark:text-neutral-400'}">Contacts</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -128,36 +129,42 @@
|
|||
</button>
|
||||
{/if}
|
||||
{#if auth.user}
|
||||
<button
|
||||
onclick={() => {
|
||||
if (confirm("Log out?")) logout();
|
||||
}}
|
||||
class="mt-3 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-200"
|
||||
aria-label="Account options"
|
||||
>
|
||||
{#if auth.user.metadata.picture}
|
||||
<img
|
||||
src={auth.user.metadata.picture}
|
||||
alt=""
|
||||
class="h-7 w-7 rounded-full object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<span
|
||||
class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-xs font-semibold text-neutral-600"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{auth.user.shortName.slice(0, 1).toUpperCase()}
|
||||
</span>
|
||||
{/if}
|
||||
<span class="truncate font-medium">{auth.user.shortName}</span>
|
||||
</button>
|
||||
<div class="mt-3 flex items-center gap-1">
|
||||
<button
|
||||
onclick={() => {
|
||||
if (confirm("Log out?")) logout();
|
||||
}}
|
||||
class="flex min-w-0 flex-1 items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-700"
|
||||
aria-label="Account options"
|
||||
>
|
||||
{#if auth.user.metadata.picture}
|
||||
<img
|
||||
src={auth.user.metadata.picture}
|
||||
alt=""
|
||||
class="h-7 w-7 rounded-full object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<span
|
||||
class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-xs font-semibold text-neutral-600 dark:text-neutral-400 dark:bg-neutral-600"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{auth.user.shortName.slice(0, 1).toUpperCase()}
|
||||
</span>
|
||||
{/if}
|
||||
<span class="truncate font-medium">{auth.user.shortName}</span>
|
||||
</button>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
onclick={openLogin}
|
||||
class="bg-brand hover:bg-brand-hover mt-3 w-full rounded px-3 py-1.5 text-sm font-medium text-white"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<div class="mt-3 flex items-center gap-1">
|
||||
<button
|
||||
onclick={openLogin}
|
||||
class="bg-brand hover:bg-brand-hover min-w-0 flex-1 rounded px-3 py-1.5 text-sm font-medium text-white"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue