Fix UI inconsistencies across templates

- Replace .separator with .dropdown_separator in 4 dropdown menus
- Change gray-* to zinc-* color classes in online store templates
- Wrap hardcoded page titles in gettext() in online store templates
- Add consistent dark:text-zinc-200 to maintenance h3 subsections
- Add text-zinc-900 dark:text-zinc-200 to scrobble section headers
- Fix heading hierarchy (h1/h2 → h2/h3) in record set items
- Align artist form modal header to text-lg font-semibold
- Use size="xs" prop instead of class override on format badge
- Add external link icon to wishlist online store buttons

lib/music_library_web/components/record_components.ex

@@ -407,7 +407,7 @@ defmodule MusicLibraryWeb.RecordComponents do
 
   defp format_badge(assigns) do
     ~H"""
-    <.badge class="text-xs md:text-sm">
+    <.badge size="xs">
       {@release |> ReleaseSearchResult.format() |> format_label()}
     </.badge>
     """

lib/music_library_web/live/artist_live/form.ex

@@ -20,7 +20,7 @@ defmodule MusicLibraryWeb.ArtistLive.Form do
     ~H"""
     <div class="w-full">
       <header>
-        <h1 class="text-base font-medium leading-6 text-zinc-700 dark:text-zinc-300">
+        <h1 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
           {@artist.name}
         </h1>
       </header>

lib/music_library_web/live/maintenance_live/index.ex

@@ -21,7 +21,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
         <h1 class="mt-2 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
           {gettext("Maintenance")}
         </h1>
-        <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
+        <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-200">
           {gettext("Records")}
         </h3>
         <p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
@@ -61,7 +61,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
             </.button_group>
           </li>
         </ul>
-        <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
+        <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-200">
           {gettext("Artists")}
         </h3>
         <p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
@@ -127,7 +127,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
             </.button_group>
           </li>
         </ul>
-        <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
+        <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-200">
           {gettext("Database")}
         </h3>
         <p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
@@ -156,7 +156,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
             </.button_group>
           </li>
         </ul>
-        <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
+        <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-200">
           {gettext("Assets")}
         </h3>
         <p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
@@ -187,7 +187,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
             </.button_group>
           </li>
         </ul>
-        <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
+        <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-200">
           {gettext("Emails")}
         </h3>
         <p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">

lib/music_library_web/live/online_store_template_live/index.ex

@@ -27,7 +27,7 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
       <div class="mt-6 space-y-4">
         <ul
           role="list"
-          class="divide-y divide-gray-200 dark:divide-gray-800"
+          class="divide-y divide-zinc-100 dark:divide-zinc-300/20"
           phx-update="stream"
           id="templates"
         >
@@ -42,7 +42,7 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
                   src={favicon_url(template.url_template)}
                   alt={template.name}
                 />
-                <p class="text-sm font-semibold text-gray-900 dark:text-white">
+                <p class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
                   {template.name}
                 </p>
                 <.badge :if={template.enabled} color="success">
@@ -52,10 +52,10 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
                   {gettext("Disabled")}
                 </.badge>
               </div>
-              <div class="mt-1 flex items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400">
+              <div class="mt-1 flex items-center gap-x-2 text-xs text-zinc-500 dark:text-zinc-400">
                 <p class="truncate font-mono">{template.url_template}</p>
               </div>
-              <p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              <p :if={template.description} class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
                 {template.description}
               </p>
             </div>
@@ -83,7 +83,7 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
                 >
                   {gettext("Edit")}
                 </.dropdown_link>
-                <.separator />
+                <.dropdown_separator />
                 <.dropdown_button
                   phx-click="delete"
                   phx-value-id={template.id}
@@ -133,19 +133,19 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
 
   defp apply_action(socket, :edit, %{"id" => id}) do
     socket
-    |> assign(:page_title, "Edit Online Store Template")
+    |> assign(:page_title, gettext("Edit Online Store Template"))
     |> assign(:template, OnlineStoreTemplates.get_template!(id))
   end
 
   defp apply_action(socket, :new, _params) do
     socket
-    |> assign(:page_title, "New Online Store Template")
+    |> assign(:page_title, gettext("New Online Store Template"))
     |> assign(:template, %OnlineStoreTemplate{})
   end
 
   defp apply_action(socket, :index, _params) do
     socket
-    |> assign(:page_title, "Online Store Templates")
+    |> assign(:page_title, gettext("Online Store Templates"))
     |> assign(:template, nil)
   end
 

lib/music_library_web/live/record_set_live/index.ex

@@ -311,7 +311,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
             >
               {gettext("Edit")}
             </.dropdown_link>
-            <.separator />
+            <.dropdown_separator />
             <.dropdown_button
               phx-click="delete_set"
               phx-value-id={@record_set.id}
@@ -387,12 +387,12 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
               aria-hidden="true"
             />
           </button>
-          <h1 class="mt-1 text-sm sm:text-sm leading-6 text-zinc-700">
+          <h2 class="mt-1 text-sm leading-6 text-zinc-700">
             <.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
-          </h1>
-          <h2 class="flex font-semibold text-sm sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-            {item.record.title}
           </h2>
+          <h3 class="flex font-semibold text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+            {item.record.title}
+          </h3>
           <p class="pointer-events-none block text-sm font-medium text-zinc-500">
             {format_label(item.record.format)} · {type_label(item.record.type)}
           </p>

lib/music_library_web/live/record_set_live/show.ex

@@ -41,7 +41,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
               >
                 {gettext("Edit")}
               </.dropdown_link>
-              <.separator />
+              <.dropdown_separator />
               <.dropdown_button
                 phx-click="delete_set"
                 data-confirm={gettext("Are you sure?")}
@@ -122,12 +122,12 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
                   aria-hidden="true"
                 />
               </button>
-              <h1 class="mt-1 text-sm sm:text-sm leading-6 text-zinc-700">
+              <h2 class="mt-1 text-sm leading-6 text-zinc-700">
                 <.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
-              </h1>
-              <h2 class="flex font-semibold text-sm sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-                {item.record.title}
               </h2>
+              <h3 class="flex font-semibold text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+                {item.record.title}
+              </h3>
               <p class="pointer-events-none block text-sm font-medium text-zinc-500">
                 {format_label(item.record.format)} · {type_label(item.record.type)}
               </p>

lib/music_library_web/live/scrobble_live/index.ex

@@ -22,7 +22,9 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
         </header>
         <%= if @search_results != [] && @selected_release_group == nil do %>
           <div class="space-y-3">
-            <h3 class="text-lg font-semibold">{gettext("Release Groups")}</h3>
+            <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-200">
+              {gettext("Release Groups")}
+            </h3>
             <ul class={[
               "mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
               "max-h-125 overflow-y-auto"

lib/music_library_web/live/scrobble_live/show.ex

@@ -74,7 +74,9 @@ defmodule MusicLibraryWeb.ScrobbleLive.Show do
 
             <div :if={@release.media != []} class="mt-6 space-y-4">
               <div class="flex justify-between items-center">
-                <h3 class="text-lg font-semibold">{gettext("Tracks")}</h3>
+                <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-200">
+                  {gettext("Tracks")}
+                </h3>
 
                 <.button
                   :if={@can_scrobble}

lib/music_library_web/live/scrobble_rules_live/index.ex

@@ -134,7 +134,7 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
                 >
                   {gettext("Edit")}
                 </.dropdown_link>
-                <.separator />
+                <.dropdown_separator />
                 <.dropdown_button
                   phx-click="delete"
                   phx-value-id={scrobble_rule.id}

lib/music_library_web/live/wishlist_live/show.ex

@@ -234,6 +234,11 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
               <span class="text-sm font-medium text-zinc-900 dark:text-white">
                 {template.name}
               </span>
+              <.icon
+                name="hero-arrow-top-right-on-square"
+                class="h-3.5 w-3.5 text-zinc-400"
+                aria-hidden="true"
+              />
             </.button>
           </div>
         </details>