Address Tailwind deprecations and renames

lib/music_library_web/components/barcode_scanner_component.ex

@@ -71,7 +71,7 @@ defmodule MusicLibraryWeb.BarcodeScannerComponent do
         |> JS.dispatch("camera_request", to: "#barcode-scanner")
         |> JS.hide(to: "#camera-button")
       }
-      class="relative block w-full h-96 rounded-lg border-2 border-dashed border-zinc-300 p-12 text-center hover:border-zinc-400 outline-none"
+      class="relative block w-full h-96 rounded-lg border-2 border-dashed border-zinc-300 p-12 text-center hover:border-zinc-400 outline-hidden"
     >
       <svg
         class="mx-auto size-12 text-zinc-400"

lib/music_library_web/components/core_components.ex

@@ -51,7 +51,11 @@ defmodule MusicLibraryWeb.CoreComponents do
       data-cancel={JS.exec(@on_cancel, "phx-remove")}
       class="relative z-50 hidden"
     >
-      <div id={"#{@id}-bg"} class="backdrop-blur fixed inset-0 transition-opacity" aria-hidden="true" />
+      <div
+        id={"#{@id}-bg"}
+        class="backdrop-blur-sm fixed inset-0 transition-opacity"
+        aria-hidden="true"
+      />
       <div
         class="fixed inset-0 overflow-y-auto"
         aria-labelledby={"#{@id}-title"}
@@ -322,7 +326,7 @@ defmodule MusicLibraryWeb.CoreComponents do
           name={@name}
           value="true"
           checked={@checked}
-          class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
+          class="rounded-sm border-zinc-300 text-zinc-900 focus:ring-0"
           {@rest}
         />
         {@label}

lib/music_library_web/components/data_components.ex

@@ -9,14 +9,14 @@ defmodule MusicLibraryWeb.DataComponents do
     ~H"""
     <div
       class={[
-        "relative overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6 cursor-pointer",
+        "relative overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow-sm sm:px-6 sm:pt-6 cursor-pointer",
         @class
       ]}
       phx-click={JS.navigate(~p"/collection/#{@record}")}
     >
       <dt>
         <img
-          class="absolute w-20 rounded-md shadow"
+          class="absolute w-20 rounded-md shadow-sm"
           src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
           alt={@record.title}
         />
@@ -48,7 +48,7 @@ defmodule MusicLibraryWeb.DataComponents do
 
   def counter(assigns) do
     ~H"""
-    <div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
+    <div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow-sm sm:px-6 sm:pt-6">
       <dt class="sm:mt-3">
         <p class="truncate text-sm font-medium text-center text-zinc-500 dark:text-zinc-400">
           {@title}

lib/music_library_web/components/import_component.ex

@@ -98,7 +98,7 @@ defmodule MusicLibraryWeb.ImportComponent do
           <.focus_wrap
             id={"actions-#{@release_group.id}"}
             class={[
-              "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
+              "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
             ]}
             role="menu"
             aria-orientation="vertical"

lib/music_library_web/components/pagination.ex

@@ -54,7 +54,7 @@ defmodule MusicLibraryWeb.Pagination do
       </div>
       <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-items-center sm:justify-center">
         <div>
-          <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+          <nav class="isolate inline-flex -space-x-px rounded-md shadow-xs" aria-label="Pagination">
             <.prev_link
               :if={@page_links.prev_page}
               page_number={@page_links.prev_page}

lib/music_library_web/components/record_components.ex

@@ -124,7 +124,7 @@ defmodule MusicLibraryWeb.RecordComponents do
             <.focus_wrap
               id={"actions-#{record.id}"}
               class={[
-                "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
+                "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
               ]}
               role="menu"
               aria-orientation="vertical"
@@ -241,7 +241,7 @@ defmodule MusicLibraryWeb.RecordComponents do
             />
             <button
               type="button"
-              class="absolute inset-0 focus:outline-none"
+              class="absolute inset-0 focus:outline-hidden"
               phx-click={JS.navigate(@record_path.(record))}
             >
               <span class="sr-only">{gettext("View details")}</span>

lib/music_library_web/controllers/session_html/new.html.heex

@@ -6,7 +6,7 @@
       </h2>
     </div>
     <.form class="space-y-6" for={@form} action={~p"/sessions/create"}>
-      <div class="relative -space-y-px rounded-md shadow-sm">
+      <div class="relative -space-y-px rounded-md shadow-xs">
         <div>
           <label for="password" class="sr-only">{gettext("Password")}</label>
           <input

lib/music_library_web/live/collection_live/index.html.heex

@@ -2,7 +2,7 @@
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
       <.search_form query={@record_list_params.query} />
-      <nav class="mt-2 isolate inline-flex rounded-md shadow-sm">
+      <nav class="mt-2 isolate inline-flex rounded-md shadow-xs">
         <.link
           class={[
             "relative inline-flex items-center rounded-l-md",
@@ -34,7 +34,7 @@
   </header>
 
   <div class="flex items-end justify-between gap-6 mt-8">
-    <span class="isolate inline-flex rounded-md shadow-sm">
+    <span class="isolate inline-flex rounded-md shadow-xs">
       <.link
         patch={order_path(@record_list_params, :alphabetical)}
         class={[

lib/music_library_web/live/collection_live/show.html.heex

@@ -1,7 +1,7 @@
 <div class="md:columns-2 mt-4 px-4">
-  <div class="drop-shadow md:max-w-[38rem]">
+  <div class="drop-shadow-sm md:max-w-[38rem]">
     <img
-      class="w-full rounded-lg drop-shadow"
+      class="w-full rounded-lg drop-shadow-sm"
       src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
       alt={@record.title}
     />
@@ -46,7 +46,7 @@
       <.focus_wrap
         id={"actions-#{@record.id}"}
         class={[
-          "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
+          "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
         ]}
         role="menu"
         aria-orientation="vertical"

lib/music_library_web/live/stats_live/index.html.heex

@@ -24,7 +24,7 @@
   </h1>
   <%!-- TODO: replace with OSS version --%>
   <dl class={[
-    "mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow divide-x-2",
+    "mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm divide-x-2",
     stats_class(@collection_count_by_format)
   ]}>
     <div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
@@ -49,7 +49,7 @@
   </h1>
   <%!-- TODO: replace with OSS version --%>
   <dl class={[
-    "mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow divide-x-2",
+    "mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm divide-x-2",
     stats_class(@collection_count_by_type)
   ]}>
     <div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
@@ -86,7 +86,7 @@
   <ul
     id="scrobble-activity"
     role="list"
-    class="mt-5 rounded-md px-4 py-5 shadow"
+    class="mt-5 rounded-md px-4 py-5 shadow-sm"
     phx-update="stream"
   >
     <li :for={{id, track} <- @streams.recent_tracks} id={id} class="group">
@@ -98,7 +98,7 @@
         </span>
         <div class="relative flex space-x-3 items-center justify-between">
           <div class="flex min-w-0 justify-between space-x-4 items-center">
-            <img class="h-12 w-12 rounded-md shadow" src={track.cover_url} alt={track.title} />
+            <img class="h-12 w-12 rounded-md shadow-sm" src={track.cover_url} alt={track.title} />
             <div>
               <p
                 :if={track.artist.musicbrainz_id not in @artist_ids}
@@ -182,7 +182,7 @@
             <.focus_wrap
               id={"actions-#{track.scrobbled_at_uts}"}
               class={[
-                "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
+                "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
               ]}
               role="menu"
               aria-orientation="vertical"

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -1,7 +1,7 @@
 <div class="md:columns-2 mt-4 px-4">
-  <div class="drop-shadow md:max-w-[38rem]">
+  <div class="drop-shadow-sm md:max-w-[38rem]">
     <img
-      class="w-full rounded-lg drop-shadow"
+      class="w-full rounded-lg drop-shadow-sm"
       src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
       alt={@record.title}
     />
@@ -48,7 +48,7 @@
       <.focus_wrap
         id={"actions-#{@record.id}"}
         class={[
-          "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
+          "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
         ]}
         role="menu"
         aria-orientation="vertical"

priv/gettext/default.pot

@@ -11,7 +11,7 @@
 msgid ""
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:507
+#: lib/music_library_web/components/core_components.ex:511
 #, elixir-autogen, elixir-format
 msgid "Actions"
 msgstr ""
@@ -69,7 +69,7 @@ msgstr ""
 msgid "Error importing record"
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:162
+#: lib/music_library_web/components/core_components.ex:166
 #, elixir-autogen, elixir-format
 msgid "Error!"
 msgstr ""
@@ -90,7 +90,7 @@ msgstr ""
 msgid "Genres"
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:171
+#: lib/music_library_web/components/core_components.ex:175
 #, elixir-autogen, elixir-format
 msgid "Hang in there while we get back on track"
 msgstr ""
@@ -241,7 +241,7 @@ msgstr ""
 msgid "Showing <b>%{visible}</b> of <b>%{total}</b> records"
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:166
+#: lib/music_library_web/components/core_components.ex:170
 #, elixir-autogen, elixir-format
 msgid "Something went wrong!"
 msgstr ""
@@ -252,7 +252,7 @@ msgstr ""
 msgid "Stats"
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:161
+#: lib/music_library_web/components/core_components.ex:165
 #, elixir-autogen, elixir-format
 msgid "Success!"
 msgstr ""
@@ -314,8 +314,8 @@ msgstr ""
 msgid "You must be logged in to access this page"
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:82
+#: lib/music_library_web/components/core_components.ex:86
-#: lib/music_library_web/components/core_components.ex:138
+#: lib/music_library_web/components/core_components.ex:142
 #, elixir-autogen, elixir-format
 msgid "close"
 msgstr ""