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
This commit is contained in:
Claudio Ortolina
2026-03-16 11:37:29 +00:00
parent 028f111300
commit 654b172ddb
13 changed files with 59 additions and 30 deletions
@@ -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">