diff --git a/web/src/app.css b/web/src/app.css index e9e960232fffb..57a11126a5afe 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 5136f41785dea..b5f19dfba539c 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 ff8910f4876cf..abc3e83e7d583 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 0fa058bdbb698..5af64d38bc808 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 f29ef27023e8b..b385af1d95efb 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 36fd52a268bd3..df1d60a9b8a24 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 2f2c2d2823f8b..087d043078535 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 d9e35aebb5758..c44282e3ffc8a 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 ae76340a26abd..b0fbd13ed002b 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 2fcee7ded9595..9a8d2405e4028 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 80441aedea967..ef8ae5e155dd1 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 4a42b37ee427d..f8036af4fd70b 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 68ea9dd61a06c..01d5ed5b8efdf 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 d393183ebffe2..ac214867ca00a 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 8037723ba2fd1..299f3dad3518b 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 b16ad7b2ae31e..f41cd7e30f349 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 615a4a011e493..a2ef07682b76f 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}