From f961acdf0c5dc7505307cadbb031ccb81dcd568e Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 11 May 2023 11:50:48 -0500
Subject: [PATCH] feat(web): album card hover styling (#2424)

* feat(web): album card hover styling

* feedback

* fix delete button not shown

* better color
---
 .../lib/components/album-page/album-card.svelte  | 16 +++++++++-------
 web/src/routes/(user)/albums/+page.svelte        |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
index 6591cceb16..e9d9b025a8 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/album-card.svelte
@@ -61,7 +61,7 @@
 </script>
 
 <div
-	class="hover:cursor-pointer mt-4 relative"
+	class="group hover:cursor-pointer mt-4 border-[3px] border-transparent dark:hover:border-immich-dark-primary/75 hover:border-immich-primary/75 rounded-3xl p-5 relative"
 	on:click={() => dispatchClick('click', album)}
 	on:keydown={() => dispatchClick('click', album)}
 	data-testid="album-card"
@@ -69,32 +69,34 @@
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		id={`icon-${album.id}`}
-		class="absolute top-2 right-2"
+		class="absolute top-6 right-6 z-10"
 		on:click|stopPropagation|preventDefault={showAlbumContextMenu}
 		data-testid="context-button-parent"
 	>
-		<CircleIconButton logo={DotsVertical} size={'20'} hoverColor={'rgba(95,99,104, 0.5)'} />
+		<CircleIconButton logo={DotsVertical} size={'20'} />
 	</div>
 
-	<div class={`aspect-square z-[-1]`}>
+	<div class={`aspect-square relative`}>
 		<img
 			src={imageData}
 			alt={album.id}
-			class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
+			class={`object-cover h-full w-full transition-all z-0 rounded-3xl duration-300 hover:shadow-lg`}
 			data-testid="album-image"
 			draggable="false"
 		/>
+		<div class="w-full h-full absolute top-0 rounded-3xl group-hover:bg-indigo-800/25" />
 	</div>
 
 	<div class="mt-4">
 		<p
-			class="text-sm font-medium text-gray-800 dark:text-immich-dark-primary"
+			class="text-xl font-semibold dark:text-immich-dark-primary text-immich-primary w-full truncate"
 			data-testid="album-name"
+			title={album.albumName}
 		>
 			{album.albumName}
 		</p>
 
-		<span class="text-xs flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
+		<span class="text-sm flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
 			<p>
 				{album.assetCount.toLocaleString($locale)}
 				{album.assetCount == 1 ? `item` : `items`}
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index b87293ed20..e19fd1b930 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -62,7 +62,7 @@
 	</div>
 
 	<!-- Album Card -->
-	<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-8">
+	<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
 		{#each $albums as album (album.id)}
 			<a
 				data-sveltekit-preload-data="hover"