Restyle all grid-like items to just have a shadow on hover

lib/music_library_web/components/record_components.ex

@@ -230,7 +230,7 @@ defmodule MusicLibraryWeb.RecordComponents do
           >
             <.record_cover
               record={record}
-              class="aspect-square object-cover rounded-lg hover:opacity-85 hover:animate-pulse hover:outline-2 outline-red-500"
+              class="aspect-square object-cover rounded-lg hover:shadow-lg/20"
               width={460}
             />
             <span
@@ -430,7 +430,7 @@ defmodule MusicLibraryWeb.RecordComponents do
         >
           <.record_cover
             record={record}
-            class="aspect-square object-cover rounded-lg hover:opacity-85 hover:animate-pulse hover:outline-2 outline-red-500"
+            class="aspect-square object-cover rounded-lg hover:shadow-lg/20"
             width={300}
           />
           <span class="absolute top-2 right-2 rounded-full px-2 py-0.5 text-xs font-medium bg-zinc-900/75 text-white backdrop-blur-sm">

lib/music_library_web/live/artist_live/show.ex

@@ -62,24 +62,18 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
         class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
       >
         <li :for={artist <- @artists} class="relative">
-          <div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
-            <div class="relative">
-              <.artist_image
-                class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
-                artist={artist}
-                image_hash={artist.image_data_hash}
-              />
-            </div>
-            <button
-              type="button"
-              class="absolute inset-0 focus:outline-hidden"
+          <div
+            class="relative cursor-pointer"
             phx-click={
               JS.patch(~p"/artists/#{artist.musicbrainz_id}")
               |> JS.dispatch("music_library:scroll_top")
             }
           >
-              <span class="sr-only">{gettext("View details")}</span>
-            </button>
+            <.artist_image
+              class="aspect-square object-cover rounded-lg hover:shadow-lg/20"
+              artist={artist}
+              image_hash={artist.image_data_hash}
+            />
           </div>
           <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
             {artist.name}

priv/gettext/default.pot

@@ -334,11 +334,6 @@ msgstr ""
 msgid "Made by"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "View details"
-msgstr ""
-
 #: lib/music_library_web/live/artist_live/show.html.heex
 #, elixir-autogen, elixir-format
 msgid "Loading biography"

priv/gettext/en/LC_MESSAGES/default.po

@@ -334,11 +334,6 @@ msgstr ""
 msgid "Made by"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.ex
-#, elixir-autogen, elixir-format
-msgid "View details"
-msgstr ""
-
 #: lib/music_library_web/live/artist_live/show.html.heex
 #, elixir-autogen, elixir-format
 msgid "Loading biography"