self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-24 04:46:50 +02:00
Code Issues Releases Activity

feat(web) dark mode (#867)

Browse Source
This commit is contained in:
Alex
2022-10-26 11:10:48 -05:00
committed by GitHub
parent ae96508e15
commit f94176a910
39 changed files with 362 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/lib/components/shared-components/navigation-bar.svelte
View File

@ -6,6 +6,7 @@
import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
import { clickOutside } from '../../utils/click-outside';
import { api, UserResponseDto } from '@api';
import ThemeButton from './theme-button.svelte';
export let user: UserResponseDto;
export let shouldShowUploadButton = true;
@ -42,28 +43,35 @@
};
</script>
<section id="dashboard-navbar" class="fixed w-screen z-[100] bg-immich-bg text-sm">
<div class="flex border-b place-items-center px-6 py-2 ">
<section
id="dashboard-navbar"
class="fixed w-screen z-[100] bg-immich-bg dark:bg-immich-dark-bg text-sm"
>
<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
<a
data-sveltekit-prefetch
class="flex gap-2 place-items-center hover:cursor-pointer"
href="/photos"
>
<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" />
<h1 class="font-immich-title text-2xl text-immich-primary">IMMICH</h1>
<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
IMMICH
</h1>
</a>
<div class="flex-1 ml-24">
<input
class="w-[50%] border rounded-md bg-gray-200 px-8 py-4"
class="w-[50%] rounded-md bg-gray-200 dark:bg-immich-dark-gray px-8 py-4"
placeholder="Search - Coming soon"
/>
</div>
<section class="flex gap-4 place-items-center">
<ThemeButton />
{#if $page.url.pathname !== '/admin' && shouldShowUploadButton}
<button
in:fly={{ x: 50, duration: 250 }}
on:click={() => dispatch('uploadClicked')}
class="immich-text-button"
class="immich-text-button dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
>
<TrayArrowUp size="20" />
<span> Upload </span>
@ -73,8 +81,9 @@
{#if user.isAdmin}
<a data-sveltekit-prefetch href={`admin`}>
<button
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium ${
$page.url.pathname == '/admin' && 'text-immich-primary underline'
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
$page.url.pathname == '/admin' &&
'text-immich-primary dark:immich-dark-primary underline'
}`}>Administration</button
>
</a>
@ -87,7 +96,7 @@
on:click={showAccountInfoPanel}
>
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary/80 h-12 w-12 text-gray-100 hover:bg-immich-primary"
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
>
{#if shouldShowProfileImage}
<img
@ -104,7 +113,7 @@
<div
in:fade={{ delay: 500, duration: 150 }}
out:fade={{ delay: 200, duration: 150 }}
class="absolute -bottom-12 right-5 border bg-gray-500 text-[12px] text-gray-100 p-2 rounded-md shadow-md"
class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
>
<p>{user.firstName} {user.lastName}</p>
<p>{user.email}</p>
@ -119,13 +128,13 @@
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] bg-white shadow-lg rounded-2xl w-[360px] text-center z-[100]"
class="absolute right-[25px] top-[75px] bg-immich-bg dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-2xl w-[360px] text-center z-[100]"
use:clickOutside
on:out-click={() => (shouldShowAccountInfoPanel = false)}
>
<div class="flex place-items-center place-content-center mt-6">
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary"
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg"
>
{#if shouldShowProfileImage}
<img
@ -141,20 +150,21 @@
</button>
</div>
<p class="text-lg text-immich-primary font-medium mt-4">
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
{user.firstName}
{user.lastName}
</p>
<p class="text-sm text-gray-500">{user.email}</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
<div class="my-4">
<hr />
<hr class="dark:border-immich-dark-bg" />
</div>
<div class="mb-6">
<button class="border rounded-3xl px-6 py-2 hover:bg-gray-50" on:click={logOut}
>Sign Out</button
<button
class="border rounded-3xl px-6 py-2 hover:bg-gray-50 dark:border-immich-dark-gray dark:bg-gray-300 dark:hover:bg-immich-dark-primary"
on:click={logOut}>Sign Out</button
>
</div>
</div>