From f94176a910236c1e9a6281bc2263107a152a259a Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 26 Oct 2022 11:10:48 -0500 Subject: [PATCH] feat(web) dark mode (#867) --- web/src/app.css | 6 +- web/src/app.html | 4 +- .../admin-page/jobs/job-tile.svelte | 18 +++-- .../server-stats/server-stats-panel.svelte | 14 ++-- .../admin-page/server-stats/stats-card.svelte | 14 ++-- .../admin-page/user-management.svelte | 14 ++-- .../components/album-page/album-card.svelte | 14 ++-- .../components/album-page/album-viewer.svelte | 22 +++--- .../album-page/asset-selection.svelte | 12 +-- .../album-page/share-info-modal.svelte | 7 +- .../album-page/user-selection-modal.svelte | 10 +-- .../asset-viewer/asset-viewer.svelte | 2 +- .../asset-viewer/detail-panel.svelte | 14 ++-- .../forms/admin-registration-form.svelte | 14 +++- .../forms/change-password-form.svelte | 14 +++- .../components/forms/create-user-form.svelte | 14 +++- .../components/forms/edit-user-form.svelte | 17 ++-- .../lib/components/forms/login-form.svelte | 10 ++- .../photos-page/asset-date-group.svelte | 4 +- .../shared-components/base-modal.svelte | 2 +- .../circle-icon-button.svelte | 5 +- .../context-menu/context-menu.svelte | 2 +- .../context-menu/menu-option.svelte | 2 +- .../shared-components/control-app-bar.svelte | 9 +-- .../shared-components/immich-thumbnail.svelte | 2 +- .../shared-components/navigation-bar.svelte | 42 ++++++---- .../scrollbar/scrollbar.svelte | 6 +- .../side-bar/side-bar-button.svelte | 9 ++- .../side-bar/side-bar.svelte | 5 +- .../shared-components/status-box.svelte | 24 +++--- .../shared-components/theme-button.svelte | 77 +++++++++++++++++++ .../shared-album-list-tile.svelte | 11 ++- web/src/routes/+layout.svelte | 53 ++++++++----- web/src/routes/+page.svelte | 8 +- web/src/routes/admin/+page.svelte | 8 +- web/src/routes/albums/+page.svelte | 22 ++++-- web/src/routes/photos/+page.svelte | 8 +- web/src/routes/sharing/+page.svelte | 17 ++-- web/tailwind.config.cjs | 12 ++- 39 files changed, 362 insertions(+), 186 deletions(-) create mode 100644 web/src/lib/components/shared-components/theme-button.svelte diff --git a/web/src/app.css b/web/src/app.css index e9e960232f..57a11126a5 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -59,15 +59,15 @@ input:focus-visible { @layer utilities { .immich-form-input { - @apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm; + @apply bg-slate-100 p-2 rounded-md dark:text-immich-dark-bg focus:border-immich-primary text-sm; } .immich-form-label { - @apply font-medium text-sm text-gray-500; + @apply font-medium text-sm text-gray-500 dark:text-gray-300; } .immich-btn-primary { - @apply bg-immich-primary text-gray-100 border rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary hover:shadow-lg text-sm font-medium; + @apply bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray text-gray-100 border dark:border-immich-dark-gray rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary dark:hover:bg-immich-dark-primary/90 hover:shadow-lg text-sm font-medium; } .immich-text-button { diff --git a/web/src/app.html b/web/src/app.html index 5136f41785..b5f19dfba5 100644 --- a/web/src/app.html +++ b/web/src/app.html @@ -1,5 +1,5 @@ - + @@ -7,7 +7,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/web/src/lib/components/admin-page/jobs/job-tile.svelte b/web/src/lib/components/admin-page/jobs/job-tile.svelte index ff8910f487..abc3e83e7d 100644 --- a/web/src/lib/components/admin-page/jobs/job-tile.svelte +++ b/web/src/lib/components/admin-page/jobs/job-tile.svelte @@ -11,17 +11,17 @@ const dispatch = createEventDispatcher(); -
+
-

{title.toUpperCase()}

-

{subtitle}

-

+

{title.toUpperCase()}

+

{subtitle}

+

@@ -29,8 +29,10 @@ - - + + @@ -41,7 +43,7 @@
StatusWaiting
{jobStatus ? 'Active' : 'Idle'} {activeJobCount} {waitingJobCount}
- + @@ -44,11 +46,13 @@ - + {#each stats.usageByUser as user, i} diff --git a/web/src/lib/components/admin-page/server-stats/stats-card.svelte b/web/src/lib/components/admin-page/server-stats/stats-card.svelte index 0fa058bdbb..5af64d38bc 100644 --- a/web/src/lib/components/admin-page/server-stats/stats-card.svelte +++ b/web/src/lib/components/admin-page/server-stats/stats-card.svelte @@ -17,15 +17,17 @@ }; -
-
- -

{title}

+
+
+ +

{title}

- {zeros()}{parseInt(value)}{zeros()}{parseInt(value)} {#if unit} {unit} diff --git a/web/src/lib/components/admin-page/user-management.svelte b/web/src/lib/components/admin-page/user-management.svelte index f29ef27023..b385af1d95 100644 --- a/web/src/lib/components/admin-page/user-management.svelte +++ b/web/src/lib/components/admin-page/user-management.svelte @@ -9,7 +9,9 @@
User PhotosSize
{getFullName(user.userId)}
- + @@ -17,11 +19,13 @@ - + {#each allUsers as user, i} @@ -32,7 +36,7 @@ on:click={() => { dispatch('edit-user', { user }); }} - class="bg-immich-primary text-gray-100 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75" + class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75" > diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte index 36fd52a268..df1d60a9b8 100644 --- a/web/src/lib/components/album-page/album-card.svelte +++ b/web/src/lib/components/album-page/album-card.svelte @@ -60,12 +60,7 @@ on:click|stopPropagation|preventDefault={showAlbumContextMenu} data-testid="context-button-parent" > - +
@@ -78,11 +73,14 @@
-

+

{album.albumName}

- +

{album.assetCount} items

{#if album.shared} diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte index 2f2c2d2823..087d043078 100644 --- a/web/src/lib/components/album-page/album-viewer.svelte +++ b/web/src/lib/components/album-page/album-viewer.svelte @@ -331,7 +331,7 @@ }; -
+
{#if isMultiSelectionMode} -

Selected {multiSelectAsset.size}

+

+ Selected {multiSelectAsset.size} +

{#if isOwned} @@ -386,7 +388,7 @@ {/if} @@ -404,9 +406,9 @@ }} on:focus={() => (isEditingTitle = true)} on:blur={() => (isEditingTitle = false)} - class={`transition-all text-6xl text-immich-primary w-[99%] border-b-2 border-transparent outline-none ${ + class={`transition-all text-6xl text-immich-primary dark:text-immich-dark-primary w-[99%] border-b-2 border-transparent outline-none ${ isOwned ? 'hover:border-gray-400' : 'hover:border-transparent' - } focus:outline-none focus:border-b-2 focus:border-immich-primary bg-immich-bg`} + } focus:outline-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary bg-immich-bg dark:bg-immich-dark-bg dark:focus:bg-immich-dark-gray`} type="text" bind:value={album.albumName} disabled={!isOwned} @@ -468,13 +470,15 @@
-

ADD PHOTOS

+

ADD PHOTOS

diff --git a/web/src/lib/components/album-page/asset-selection.svelte b/web/src/lib/components/album-page/asset-selection.svelte index d9e35aebb5..c44282e3ff 100644 --- a/web/src/lib/components/album-page/asset-selection.svelte +++ b/web/src/lib/components/album-page/asset-selection.svelte @@ -70,7 +70,7 @@
{ @@ -80,28 +80,28 @@ > {#if $selectedAssets.size == 0} -

Add to album

+

Add to album

{:else} -

{$selectedAssets.size} selected

+

{$selectedAssets.size} selected

{/if} -
+
diff --git a/web/src/lib/components/album-page/share-info-modal.svelte b/web/src/lib/components/album-page/share-info-modal.svelte index ae76340a26..b0fbd13ed0 100644 --- a/web/src/lib/components/album-page/share-info-modal.svelte +++ b/web/src/lib/components/album-page/share-info-modal.svelte @@ -68,14 +68,14 @@ dispatch('close')}> -

Options

+

Options
{#each album.sharedUsers as user}
@@ -88,14 +88,13 @@ on:click={() => showContextMenu(user.id)} logo={DotsVertical} backgroundColor={'transparent'} - logoColor={'#5f6368'} hoverColor={'#e2e7e9'} size={'20'} /> {:else if user.id == currentUser?.id} {/if} diff --git a/web/src/lib/components/album-page/user-selection-modal.svelte b/web/src/lib/components/album-page/user-selection-modal.svelte index 2fcee7ded9..9a8d2405e4 100644 --- a/web/src/lib/components/album-page/user-selection-modal.svelte +++ b/web/src/lib/components/album-page/user-selection-modal.svelte @@ -38,7 +38,7 @@ Immich -

Invite to album

+

Invite to album

 @@ -51,7 +51,7 @@ {#key user.id} -

Info

+

Info

@@ -202,10 +202,10 @@
-
+
{#if albums.length > 0} -

APPEARS IN

+

APPEARS IN

{/if} {#each albums as album} @@ -219,7 +219,7 @@
-

{album.albumName}

+

{album.albumName}

{album.assetCount} items

{#if album.shared} diff --git a/web/src/lib/components/forms/admin-registration-form.svelte b/web/src/lib/components/forms/admin-registration-form.svelte index 80441aedea..ef8ae5e155 100644 --- a/web/src/lib/components/forms/admin-registration-form.svelte +++ b/web/src/lib/components/forms/admin-registration-form.svelte @@ -51,11 +51,17 @@ } -
+
immich-logo -

Admin Registration

-

+

+ Admin Registration +

+

Since you are the first user on the system, you will be assigned as the Admin and are responsible for administrative tasks, and additional users will be created by you.

@@ -117,7 +123,7 @@
diff --git a/web/src/lib/components/forms/change-password-form.svelte b/web/src/lib/components/forms/change-password-form.svelte index 4a42b37ee4..f8036af4fd 100644 --- a/web/src/lib/components/forms/change-password-form.svelte +++ b/web/src/lib/components/forms/change-password-form.svelte @@ -43,12 +43,18 @@ } -
+
immich-logo -

Change Password

+

+ Change Password +

-

+

Hi {user.firstName} {user.lastName} ({user.email}),
@@ -93,7 +99,7 @@

diff --git a/web/src/lib/components/forms/create-user-form.svelte b/web/src/lib/components/forms/create-user-form.svelte index 68ea9dd61a..01d5ed5b8e 100644 --- a/web/src/lib/components/forms/create-user-form.svelte +++ b/web/src/lib/components/forms/create-user-form.svelte @@ -53,11 +53,17 @@ } -
+
immich-logo -

Create new user

-

+

+ Create new user +

+

Please provide your user with the password, they will have to change it on their first sign in.

@@ -113,7 +119,7 @@
diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte index d393183ebf..ac214867ca 100644 --- a/web/src/lib/components/forms/edit-user-form.svelte +++ b/web/src/lib/components/forms/edit-user-form.svelte @@ -65,11 +65,16 @@ }; -
-
- - -

Edit user

+
+
+ +

+ Edit user +

@@ -124,7 +129,7 @@
diff --git a/web/src/lib/components/forms/login-form.svelte b/web/src/lib/components/forms/login-form.svelte index 8037723ba2..299f3dad35 100644 --- a/web/src/lib/components/forms/login-form.svelte +++ b/web/src/lib/components/forms/login-form.svelte @@ -32,15 +32,17 @@ }; -
+
immich-logo -

Login

+

Login

{#if loginPageMessage}

{@html loginPageMessage}

@@ -78,7 +80,7 @@
diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte index b16ad7b2ae..f41cd7e30f 100644 --- a/web/src/lib/components/photos-page/asset-date-group.svelte +++ b/web/src/lib/components/photos-page/asset-date-group.svelte @@ -115,7 +115,9 @@ on:mouseleave={() => (isMouseOverGroup = false)} > -

+

{#if (hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle)}

dispatch('close')} - class="bg-white w-[450px] min-h-[200px] max-h-[500px] rounded-lg shadow-md" + class="bg-immich-bg dark:bg-immich-dark-gray dark:text-immich-dark-fg w-[450px] min-h-[200px] max-h-[500px] rounded-lg shadow-md" >
diff --git a/web/src/lib/components/shared-components/circle-icon-button.svelte b/web/src/lib/components/shared-components/circle-icon-button.svelte index 615a4a011e..a2ef07682b 100644 --- a/web/src/lib/components/shared-components/circle-icon-button.svelte +++ b/web/src/lib/components/shared-components/circle-icon-button.svelte @@ -9,7 +9,6 @@ export let logo: any; export let backgroundColor = 'transparent'; export let hoverColor = '#e2e7e9'; - export let logoColor = '#5f6368'; export let size = '24'; export let title = ''; let iconButton: HTMLButtonElement; @@ -26,10 +25,10 @@
Email First nameEdit
{user.email}