From 654b172ddb68734dfc70116ecaf042a6fe677aaa Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 16 Mar 2026 11:37:29 +0000
Subject: [PATCH] Fix UI inconsistencies across templates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../components/record_components.ex              |  2 +-
 lib/music_library_web/live/artist_live/form.ex   |  2 +-
 .../live/maintenance_live/index.ex               | 10 +++++-----
 .../live/online_store_template_live/index.ex     | 16 ++++++++--------
 .../live/record_set_live/index.ex                | 10 +++++-----
 .../live/record_set_live/show.ex                 | 10 +++++-----
 .../live/scrobble_live/index.ex                  |  4 +++-
 lib/music_library_web/live/scrobble_live/show.ex |  4 +++-
 .../live/scrobble_rules_live/index.ex            |  2 +-
 lib/music_library_web/live/wishlist_live/show.ex |  5 +++++
 priv/gettext/default.pot                         | 10 ++++++++++
 priv/gettext/en/LC_MESSAGES/default.po           | 10 ++++++++++
 .../live/record_set_live/show_test.exs           |  4 ++--
 13 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex
index 8c82c796..e1aef7e0 100644
--- a/lib/music_library_web/components/record_components.ex
+++ b/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>
     """
diff --git a/lib/music_library_web/live/artist_live/form.ex b/lib/music_library_web/live/artist_live/form.ex
index 64a3a7a2..314bb087 100644
--- a/lib/music_library_web/live/artist_live/form.ex
+++ b/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>
diff --git a/lib/music_library_web/live/maintenance_live/index.ex b/lib/music_library_web/live/maintenance_live/index.ex
index c8f36e20..04b9bb98 100644
--- a/lib/music_library_web/live/maintenance_live/index.ex
+++ b/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">
diff --git a/lib/music_library_web/live/online_store_template_live/index.ex b/lib/music_library_web/live/online_store_template_live/index.ex
index 6d02b865..403904f3 100644
--- a/lib/music_library_web/live/online_store_template_live/index.ex
+++ b/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
 
diff --git a/lib/music_library_web/live/record_set_live/index.ex b/lib/music_library_web/live/record_set_live/index.ex
index 53642540..437cfc65 100644
--- a/lib/music_library_web/live/record_set_live/index.ex
+++ b/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>
diff --git a/lib/music_library_web/live/record_set_live/show.ex b/lib/music_library_web/live/record_set_live/show.ex
index 672a8762..bfb8de0b 100644
--- a/lib/music_library_web/live/record_set_live/show.ex
+++ b/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>
diff --git a/lib/music_library_web/live/scrobble_live/index.ex b/lib/music_library_web/live/scrobble_live/index.ex
index e6e200e4..7658acc4 100644
--- a/lib/music_library_web/live/scrobble_live/index.ex
+++ b/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"
diff --git a/lib/music_library_web/live/scrobble_live/show.ex b/lib/music_library_web/live/scrobble_live/show.ex
index 68284d3a..e1f1b4fa 100644
--- a/lib/music_library_web/live/scrobble_live/show.ex
+++ b/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}
diff --git a/lib/music_library_web/live/scrobble_rules_live/index.ex b/lib/music_library_web/live/scrobble_rules_live/index.ex
index 0b779cd6..560637f9 100644
--- a/lib/music_library_web/live/scrobble_rules_live/index.ex
+++ b/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}
diff --git a/lib/music_library_web/live/wishlist_live/show.ex b/lib/music_library_web/live/wishlist_live/show.ex
index 435c6365..ade0ff80 100644
--- a/lib/music_library_web/live/wishlist_live/show.ex
+++ b/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>
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 0285a483..7fb2ba8a 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -2293,3 +2293,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Timestamp"
 msgstr ""
+
+#: lib/music_library_web/live/online_store_template_live/index.ex
+#, elixir-autogen, elixir-format
+msgid "Edit Online Store Template"
+msgstr ""
+
+#: lib/music_library_web/live/online_store_template_live/index.ex
+#, elixir-autogen, elixir-format
+msgid "New Online Store Template"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index 4520c3ed..31a2bbfd 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -2293,3 +2293,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Timestamp"
 msgstr ""
+
+#: lib/music_library_web/live/online_store_template_live/index.ex
+#, elixir-autogen, elixir-format
+msgid "Edit Online Store Template"
+msgstr ""
+
+#: lib/music_library_web/live/online_store_template_live/index.ex
+#, elixir-autogen, elixir-format
+msgid "New Online Store Template"
+msgstr ""
diff --git a/test/music_library_web/live/record_set_live/show_test.exs b/test/music_library_web/live/record_set_live/show_test.exs
index ca5e9586..5512a6ec 100644
--- a/test/music_library_web/live/record_set_live/show_test.exs
+++ b/test/music_library_web/live/record_set_live/show_test.exs
@@ -28,8 +28,8 @@ defmodule MusicLibraryWeb.RecordSetLive.ShowTest do
 
       conn
       |> visit(~p"/record-sets/#{set}")
-      |> assert_has("h2", escape(r1.title))
-      |> assert_has("h2", escape(r2.title))
+      |> assert_has("h3", escape(r1.title))
+      |> assert_has("h3", escape(r2.title))
     end
 
     test "shows add record tile when set has no records", %{conn: conn} do