From 832084687dd56699c176dd5ce5e737fe81e64dce Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Mon, 27 May 2024 21:10:53 -0500
Subject: [PATCH] fix(web): update password-protected share logo size (#9567)

---
 .../lib/components/album-page/album-viewer.svelte    | 12 +++++-------
 .../share-page/individual-shared-viewer.svelte       |  6 ++----
 .../shared-components/immich-logo-small-link.svelte  |  9 +++++++++
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte    |  9 +++++----
 4 files changed, 21 insertions(+), 15 deletions(-)
 create mode 100644 web/src/lib/components/shared-components/immich-logo-small-link.svelte

diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 43fbe8e7e3..0be3d66398 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -4,15 +4,15 @@
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
-  import { createAssetInteractionStore } from '../../stores/asset-interaction.store';
-  import { AssetStore } from '../../stores/assets.store';
-  import { downloadAlbum } from '../../utils/asset-utils';
+  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
+  import { AssetStore } from '$lib/stores/assets.store';
+  import { downloadAlbum } from '$lib/utils/asset-utils';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
   import AssetGrid from '../photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
   import { shortcut } from '$lib/actions/shortcut';
   import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
@@ -66,9 +66,7 @@
   {:else}
     <ControlAppBar showBackButton={false}>
       <svelte:fragment slot="leading">
-        <a data-sveltekit-preload-data="hover" class="ml-4" href="/">
-          <ImmichLogo class="h-[24px] w-[24px] max-w-none md:w-auto md:h-10 md:max-w-full" noText={innerWidth < 768} />
-        </a>
+        <ImmichLogoSmallLink width={innerWidth} />
       </svelte:fragment>
 
       <svelte:fragment slot="trailing">
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte
index e9265f3ad3..8a3b6e7cab 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte
@@ -14,7 +14,7 @@
   import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
-  import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import type { Viewport } from '$lib/stores/assets.store';
 
@@ -85,9 +85,7 @@
   {:else}
     <ControlAppBar on:close={() => goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}>
       <svelte:fragment slot="leading">
-        <a data-sveltekit-preload-data="hover" class="ml-4" href="/">
-          <ImmichLogo class="h-[24px] w-[24px] max-w-none md:w-auto md:h-10 md:max-w-full" noText={innerWidth < 768} />
-        </a>
+        <ImmichLogoSmallLink width={innerWidth} />
       </svelte:fragment>
 
       <svelte:fragment slot="trailing">
diff --git a/web/src/lib/components/shared-components/immich-logo-small-link.svelte b/web/src/lib/components/shared-components/immich-logo-small-link.svelte
new file mode 100644
index 0000000000..9f1dd9714e
--- /dev/null
+++ b/web/src/lib/components/shared-components/immich-logo-small-link.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+
+  export let width: number;
+</script>
+
+<a data-sveltekit-preload-data="hover" class="ml-4" href="/">
+  <ImmichLogo class="h-[24px] w-[24px] max-w-none md:w-auto md:h-10 md:max-w-full" noText={width < 768} />
+</a>
diff --git a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 28ebbc6c8e..1a975650c4 100644
--- a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -3,7 +3,7 @@
   import Button from '$lib/components/elements/buttons/button.svelte';
   import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
   import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
   import { user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
@@ -16,6 +16,7 @@
   let { title, description } = meta;
   let isOwned = $user ? $user.id === sharedLink?.userId : false;
   let password = '';
+  let innerWidth: number;
 
   const handlePasswordSubmit = async () => {
     try {
@@ -31,6 +32,8 @@
   };
 </script>
 
+<svelte:window bind:innerWidth />
+
 <svelte:head>
   <title>{title}</title>
   <meta name="description" content={description} />
@@ -39,9 +42,7 @@
   <header>
     <ControlAppBar showBackButton={false}>
       <svelte:fragment slot="leading">
-        <a data-sveltekit-preload-data="hover" class="ml-4" href="/">
-          <ImmichLogo class="h-10" />
-        </a>
+        <ImmichLogoSmallLink width={innerWidth} />
       </svelte:fragment>
 
       <svelte:fragment slot="trailing">