From e4d0560d49130a0d945cf3bcfafe5387e34798d3 Mon Sep 17 00:00:00 2001
From: Andrew Roberts <66187991+azroberts8@users.noreply.github.com>
Date: Thu, 1 Feb 2024 18:50:14 -0800
Subject: [PATCH] feat(web): improved album view UI & album card UI (#6822)

* Modified album card to show gray background instead of purple outline on hover

* Expanded margins in album viewer

* Applied prettier to modified files
---
 web/src/lib/components/album-page/album-card.svelte  | 12 ++++--------
 .../lib/components/album-page/album-viewer.svelte    |  4 +---
 web/src/routes/(user)/albums/[albumId]/+page.svelte  |  2 +-
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
index e04a8f1f06..a9e94c4dd8 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/album-card.svelte
@@ -60,7 +60,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="group relative mt-4 rounded-3xl border-[3px] border-transparent p-5 hover:cursor-pointer hover:border-immich-primary/75 dark:hover:border-immich-dark-primary/75"
+  class="group relative mt-4 rounded-2xl border-[1px] border-transparent p-5 hover:cursor-pointer hover:bg-gray-100 hover:border-gray-200 dark:hover:border-gray-800 dark:hover:bg-gray-900"
   on:click={() => dispatchClick('click', album)}
   on:keydown={() => dispatchClick('click', album)}
   on:mouseenter={() => (showVerticalDots = true)}
@@ -87,20 +87,16 @@
       loading={preload ? 'eager' : 'lazy'}
       src={imageData}
       alt={album.id}
-      class={`z-0 h-full w-full rounded-3xl object-cover transition-all duration-300 hover:shadow-lg`}
+      class={`z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg`}
       data-testid="album-image"
       draggable="false"
     />
-    <div
-      class="absolute top-0 h-full w-full rounded-3xl {isSharingView
-        ? 'group-hover:bg-yellow-800/25'
-        : 'group-hover:bg-indigo-800/25'} "
-    />
+    <div class="absolute top-0 h-full w-full rounded-3xl" />
   </div>
 
   <div class="mt-4">
     <p
-      class="w-full truncate text-lg font-semibold text-immich-primary dark:text-immich-dark-primary"
+      class="w-full truncate text-lg font-semibold text-black dark:text-white group-hover:text-immich-primary dark:group-hover:text-immich-dark-primary"
       data-testid="album-name"
       title={album.albumName}
     >
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 7feb3c7aa9..23cf5959c5 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -137,9 +137,7 @@
   {/if}
 </header>
 
-<main
-  class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
->
+<main class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
   <AssetGrid {album} {assetStore} {assetInteractionStore}>
     <section class="pt-24">
       <!-- ALBUM TITLE -->
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
index 9808474e0e..f15ff6411c 100644
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@@ -572,7 +572,7 @@
     {/if}
 
     <main
-      class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
+      class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
       style={`width:${assetGridWidth}px`}
     >
       {#if viewMode === ViewMode.SELECT_ASSETS}