Use zinc everywhere

This commit is contained in:
Claudio Ortolina
2024-11-05 08:42:30 +00:00
parent 678e61ecbc
commit c9cf3360d2
10 changed files with 45 additions and 45 deletions
+2 -2
View File
@@ -13,8 +13,8 @@ defmodule MusicLibraryWeb.Layouts do
embed_templates "layouts/*" embed_templates "layouts/*"
@nav_base_classes "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium" @nav_base_classes "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
@nav_inactive_classes "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200" @nav_inactive_classes "border-transparent text-zinc-500 hover:border-zinc-300 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200"
@nav_active_classes "border-zinc-500 text-gray-900 dark:text-gray-100" @nav_active_classes "border-zinc-500 text-zinc-900 dark:text-zinc-100"
def section_link_classes(current_section, section) when current_section == section do def section_link_classes(current_section, section) when current_section == section do
[@nav_base_classes, @nav_active_classes] [@nav_base_classes, @nav_active_classes]
@@ -28,7 +28,7 @@ defmodule MusicLibraryWeb.Pagination do
"relative inline-flex items-center rounded-md border", "relative inline-flex items-center rounded-md border",
"px-3 py-2 text-sm font-medium", "px-3 py-2 text-sm font-medium",
"bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400", "bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400",
"text-white active:text-white/80 dark:text-gray-900 dark:active:text-gray-900/80", "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600" "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
]} ]}
> >
@@ -41,7 +41,7 @@ defmodule MusicLibraryWeb.Pagination do
"relative ml-3 inline-flex items-center rounded-md border", "relative ml-3 inline-flex items-center rounded-md border",
"px-3 py-2 text-sm font-medium", "px-3 py-2 text-sm font-medium",
"bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400", "bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400",
"text-white active:text-white/80 dark:text-gray-900 dark:active:text-gray-900/80", "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600" "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
]} ]}
> >
@@ -1,7 +1,7 @@
<div class="flex min-h-full items-center justify-center px-4 py-12 sm:px-6 lg:px-8"> <div class="flex min-h-full items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
<div class="w-full max-w-sm space-y-10"> <div class="w-full max-w-sm space-y-10">
<div> <div>
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-200"> <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-zinc-900 dark:text-zinc-200">
<%= gettext("Welcome to your Music Library") %> <%= gettext("Welcome to your Music Library") %>
</h2> </h2>
</div> </div>
@@ -19,10 +19,10 @@
"relative block w-full rounded-md border-0 py-1.5", "relative block w-full rounded-md border-0 py-1.5",
"sm:text-sm sm:leading-6", "sm:text-sm sm:leading-6",
"ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset", "ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
"text-gray-900 dark:text-gray-200", "text-zinc-900 dark:text-zinc-200",
"dark:bg-zinc-700", "dark:bg-zinc-700",
"ring-gray-200 dark:ring-gray-400", "ring-zinc-200 dark:ring-zinc-400",
"placeholder:text-gray-400 dark:placeholder:text-gray-400", "placeholder:text-zinc-400 dark:placeholder:text-zinc-400",
"focus:ring-zinc-400 dark:focus:ring-zinc-300" "focus:ring-zinc-400 dark:focus:ring-zinc-300"
]} ]}
placeholder="Password" placeholder="Password"
@@ -37,7 +37,7 @@
"flex w-full justify-center rounded-md", "flex w-full justify-center rounded-md",
"bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400", "bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400",
"px-3 py-1.5 text-sm font-semibold leading-6", "px-3 py-1.5 text-sm font-semibold leading-6",
"text-white dark:text-gray-900", "text-white dark:text-zinc-900",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600" "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
]} ]}
> >
@@ -30,7 +30,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
<ul <ul
:if={@release_groups !== []} :if={@release_groups !== []}
role="list" role="list"
class="divide-y divide-gray-100 dark:divide-slate-300/30 mt-5" class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5"
> >
<.result :for={release_group <- @release_groups} release_group={release_group} /> <.result :for={release_group <- @release_groups} release_group={release_group} />
</ul> </ul>
@@ -48,7 +48,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
~H""" ~H"""
<li <li
id={"musicbrainz_" <> @release_group.id} id={"musicbrainz_" <> @release_group.id}
class="flex justify-between gap-x-6 py-5 hover:bg-gray-50 dark:hover:bg-zinc-700" class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700"
> >
<div class="shrink-0 flex items-center justify-between w-full px-4"> <div class="shrink-0 flex items-center justify-between w-full px-4">
<div class="min-w-0 flex-auto"> <div class="min-w-0 flex-auto">
@@ -94,7 +94,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
<.focus_wrap <.focus_wrap
id={"actions-#{@release_group.id}"} id={"actions-#{@release_group.id}"}
class={[ 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-gray-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-none"
]} ]}
role="menu" role="menu"
aria-orientation="vertical" aria-orientation="vertical"
@@ -103,7 +103,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
> >
<.link <.link
:for={format <- Records.Record.formats()} :for={format <- Records.Record.formats()}
class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{@release_group.id}-#{format}-import"} id={"actions-#{@release_group.id}-#{format}-import"}
@@ -124,7 +124,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
defp type_badge(assigns) do defp type_badge(assigns) do
~H""" ~H"""
<span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"> <span class="inline-flex items-center rounded-md bg-zinc-50 px-2 py-1 text-xs font-medium text-zinc-600 ring-1 ring-inset ring-zinc-500/10">
<%= @type %> <%= @type %>
</span> </span>
""" """
@@ -29,7 +29,7 @@
</div> </div>
<ul <ul
class="divide-y divide-gray-100 dark:divide-slate-300/30 mt-5" class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5"
role="list" role="list"
id="records" id="records"
phx-update="stream" phx-update="stream"
@@ -37,7 +37,7 @@
<li <li
:for={{id, record} <- @streams.records} :for={{id, record} <- @streams.records}
phx-click={JS.navigate(~p"/records/#{record}")} phx-click={JS.navigate(~p"/records/#{record}")}
class="flex justify-between gap-x-6 py-5 hover:bg-gray-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer" class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
id={id} id={id}
> >
<div class="flex min-w-0 gap-x-4 items-center"> <div class="flex min-w-0 gap-x-4 items-center">
@@ -107,7 +107,7 @@
<.focus_wrap <.focus_wrap
id={"actions-#{record.id}"} id={"actions-#{record.id}"}
class={[ 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-gray-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-none"
]} ]}
role="menu" role="menu"
aria-orientation="vertical" aria-orientation="vertical"
@@ -115,7 +115,7 @@
tabindex="-1" tabindex="-1"
> >
<.link <.link
class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-show"} id={"actions-#{record.id}-show"}
@@ -126,7 +126,7 @@
<a <a
href={musicbrainz_url(record)} href={musicbrainz_url(record)}
target=".blank" target=".blank"
class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-musicbrainz"} id={"actions-#{record.id}-musicbrainz"}
@@ -135,7 +135,7 @@
</a> </a>
<.link <.link
class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-edit"} id={"actions-#{record.id}-edit"}
@@ -43,7 +43,7 @@
</p> </p>
</div> </div>
<div> <div>
<dl class="mt-4 divide-y divide-gray-100 dark:divide-slate-300/30"> <dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<%= gettext("Genres") %> <%= gettext("Genres") %>
@@ -20,7 +20,7 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
src={~p"/covers/#{@record.id}"} src={~p"/covers/#{@record.id}"}
alt={@record.title} alt={@record.title}
/> />
<p class="ml-24 truncate text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400"> <p class="ml-24 truncate text-xs sm:text-sm font-medium text-zinc-500 dark:text-zinc-400">
<%= @title %> <%= @title %>
</p> </p>
</dt> </dt>
@@ -28,12 +28,12 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
<p class="font-semibold"> <p class="font-semibold">
<.link <.link
:for={artist <- @record.artists} :for={artist <- @record.artists}
class="text-sm md:text-base lg:text-2xl text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200" class="text-sm md:text-base lg:text-2xl text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"} patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"}
> >
<%= artist.name %> <%= artist.name %>
</.link> </.link>
<span class="text-sm md:text-base block text-gray-600 dark:text-gray-200"> <span class="text-sm md:text-base block text-zinc-600 dark:text-zinc-200">
<%= @record.title %> <%= @record.title %>
</span> </span>
</p> </p>
@@ -50,14 +50,14 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
~H""" ~H"""
<div class="overflow-hidden rounded-md bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6"> <div class="overflow-hidden rounded-md bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
<dt> <dt>
<p class="truncate text-sm font-medium text-gray-500 dark:text-gray-400"> <p class="truncate text-sm font-medium text-zinc-500 dark:text-zinc-400">
<%= @title %> <%= @title %>
</p> </p>
</dt> </dt>
<dd class="flex items-baseline mt-1 pb-6 sm:pb-7"> <dd class="flex items-baseline mt-1 pb-6 sm:pb-7">
<a <a
href={@path} href={@path}
class="text-2xl font-semibold text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200" class="text-2xl font-semibold text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
> >
<%= @count %> <%= @count %>
</a> </a>
@@ -1,5 +1,5 @@
<div> <div>
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold"> <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<%= gettext("Basics") %> <%= gettext("Basics") %>
</h1> </h1>
<dl class="mt-5 grid grid-cols-2 gap-5 sm:grid-cols-5"> <dl class="mt-5 grid grid-cols-2 gap-5 sm:grid-cols-5">
@@ -14,20 +14,20 @@
</div> </div>
<div> <div>
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold"> <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<%= gettext("Formats") %> <%= gettext("Formats") %>
</h1> </h1>
<dl class={[ <dl class={[
"mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x", "mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
stats_class(@collection_count_by_format) stats_class(@collection_count_by_format)
]}> ]}>
<div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4"> <div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center max-sm:text-xs break-keep"> <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
<%= Record.format_long_label(format) %> <%= Record.format_long_label(format) %>
</dt> </dt>
<dd class="mt-1 text-center"> <dd class="mt-1 text-center">
<a <a
class="text-xl lg:text-2xl font-semibold hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200" class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
href={~p"/records?query=format:#{format}"} href={~p"/records?query=format:#{format}"}
> >
<%= count %> <%= count %>
@@ -38,20 +38,20 @@
</div> </div>
<div> <div>
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold"> <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<%= gettext("Types") %> <%= gettext("Types") %>
</h1> </h1>
<dl class={[ <dl class={[
"mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x", "mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
stats_class(@collection_count_by_type) stats_class(@collection_count_by_type)
]}> ]}>
<div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4"> <div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center max-sm:text-xs break-keep"> <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
<%= Record.type_long_label(type) %> <%= Record.type_long_label(type) %>
</dt> </dt>
<dd class="mt-1 text-center"> <dd class="mt-1 text-center">
<a <a
class="text-xl lg:text-2xl font-semibold hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200" class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
href={~p"/records?query=type:#{type}"} href={~p"/records?query=type:#{type}"}
> >
<%= count %> <%= count %>
@@ -62,14 +62,14 @@
</div> </div>
<div class="flow-root"> <div class="flow-root">
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold"> <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
<%= gettext("Scrobble activity") %> <%= gettext("Scrobble activity") %>
</h1> </h1>
<ul id="scrobble-activity" role="list" class="-mb-8 mt-5" phx-update="stream"> <ul id="scrobble-activity" role="list" class="-mb-8 mt-5" phx-update="stream">
<li :for={{id, track} <- @streams.recent_tracks} id={id} class="group"> <li :for={{id, track} <- @streams.recent_tracks} id={id} class="group">
<div class="relative pb-8"> <div class="relative pb-8">
<span <span
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-gray-200" class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
aria-hidden="true" aria-hidden="true"
> >
</span> </span>
@@ -29,7 +29,7 @@
</div> </div>
<ul <ul
class="divide-y divide-gray-100 dark:divide-slate-300/30 mt-5" class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5"
role="list" role="list"
id="records" id="records"
phx-update="stream" phx-update="stream"
@@ -37,7 +37,7 @@
<li <li
:for={{id, record} <- @streams.records} :for={{id, record} <- @streams.records}
phx-click={JS.navigate(~p"/wishlist/#{record}")} phx-click={JS.navigate(~p"/wishlist/#{record}")}
class="flex justify-between gap-x-6 py-5 hover:bg-gray-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer" class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
id={id} id={id}
> >
<div class="flex min-w-0 gap-x-4 items-center"> <div class="flex min-w-0 gap-x-4 items-center">
@@ -107,7 +107,7 @@
<.focus_wrap <.focus_wrap
id={"actions-#{record.id}"} id={"actions-#{record.id}"}
class={[ 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-gray-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-none"
]} ]}
role="menu" role="menu"
aria-orientation="vertical" aria-orientation="vertical"
@@ -115,7 +115,7 @@
tabindex="-1" tabindex="-1"
> >
<.link <.link
class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-show"} id={"actions-#{record.id}-show"}
@@ -126,7 +126,7 @@
<a <a
href={musicbrainz_url(record)} href={musicbrainz_url(record)}
target=".blank" target=".blank"
class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-musicbrainz"} id={"actions-#{record.id}-musicbrainz"}
@@ -135,7 +135,7 @@
</a> </a>
<.link <.link
class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-edit"} id={"actions-#{record.id}-edit"}
@@ -145,7 +145,7 @@
</.link> </.link>
<.link <.link
class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700" class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
id={"actions-#{record.id}-purchase"} id={"actions-#{record.id}-purchase"}
@@ -44,7 +44,7 @@
</div> </div>
<div> <div>
<dl class="mt-4 divide-y divide-gray-100 dark:divide-slate-300/30"> <dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"> <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
<%= gettext("Genres") %> <%= gettext("Genres") %>