From a91edb7949bef4aaa3492c1d1f071dbbf33f241e Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 23 Oct 2024 21:31:13 +0100
Subject: [PATCH] Update colours for wishlist

---
 .../components/core_components.ex             |  7 ++-
 .../live/wishlist_live/index.html.heex        | 46 ++++++++++++-------
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index 7490deae..7ed74345 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/lib/music_library_web/components/core_components.ex
@@ -231,8 +231,11 @@ defmodule MusicLibraryWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "phx-submit-loading:opacity-75 rounded-md py-2 px-3",
+        "text-sm font-semibold leading-6 ",
+        "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",
+        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
         @class
       ]}
       {@rest}
diff --git a/lib/music_library_web/live/wishlist_live/index.html.heex b/lib/music_library_web/live/wishlist_live/index.html.heex
index 734cf927..ee4b8e96 100644
--- a/lib/music_library_web/live/wishlist_live/index.html.heex
+++ b/lib/music_library_web/live/wishlist_live/index.html.heex
@@ -4,7 +4,16 @@
       <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
         <input
           type="search"
-          class="w-full rounded-lg text-zinc-900 border-gray-300 focus:border-zinc-400 focus:ring-0 text-sm leading-6"
+          class={[
+            "relative block w-full rounded-md border-0 py-1.5",
+            "sm:text-sm sm:leading-6",
+            "ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
+            "text-gray-900 dark:text-gray-200",
+            "dark:bg-zinc-700",
+            "ring-gray-200 dark:ring-gray-400",
+            "placeholder:text-gray-400 dark:placeholder:text-gray-400",
+            "focus:ring-zinc-400 dark:focus:ring-zinc-300"
+          ]}
           id={:query}
           name={:query}
           value={@record_list_params.query}
@@ -20,7 +29,7 @@
     </div>
   </header>
 
-  <p class="text-right text-base max-sm:text-xs mt-8">
+  <p class="text-right text-base max-sm:text-xs mt-8 text-zinc-900 dark:text-zinc-400">
     <%= gettext(
       "Showing <b>%{visible}</b> of <b>%{total}</b> records",
       %{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
@@ -29,11 +38,16 @@
   </p>
 </div>
 
-<ul class="divide-y divide-gray-100" role="list" id="records" phx-update="stream">
+<ul
+  class="divide-y divide-gray-100 dark:divide-slate-300/30 mt-5"
+  role="list"
+  id="records"
+  phx-update="stream"
+>
   <li
     :for={{id, record} <- @streams.records}
     phx-click={JS.navigate(~p"/wishlist/#{record}")}
-    class="flex justify-between gap-x-6 py-5 hover:bg-gray-50 px-2 -mx-2 md:px-4 md:-mx-4 rounded-lg cursor-pointer"
+    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"
     id={id}
   >
     <div class="flex min-w-0 gap-x-4 items-center">
@@ -43,19 +57,19 @@
         src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
       />
       <div class="min-w-0 flex-auto">
-        <h1 class="text-sm leading-6 text-zinc-700">
+        <h1 class="text-sm leading-6">
           <.link
             :for={artist <- record.artists}
-            class="hover:text-zinc-500"
+            class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
             patch={~p"/wishlist?query=mbid:#{artist.musicbrainz_id}"}
           >
             <%= artist.name %>
           </.link>
         </h1>
-        <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 text-wrap">
+        <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
           <%= record.title %>
         </h2>
-        <p class="mt-1 text-xs leading-5 text-gray-500">
+        <p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
           <%= Records.Record.format_release(record.release) %>
           <span class="sm:hidden">
             · <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
@@ -67,7 +81,7 @@
     </div>
     <div class="flex shrink-0 items-center gap-x-6">
       <div class="hidden sm:flex sm:flex-col sm:items-end">
-        <p class="text-xs leading-6 text-gray-900">
+        <p class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
           <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
             record.type
           ) %>
@@ -76,7 +90,7 @@
       <div class="relative flex-none">
         <button
           type="button"
-          class="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900"
+          class="-m-2.5 block p-2.5 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
           aria-expanded="false"
           aria-haspopup="true"
           phx-click={toggle_actions_menu(record.id)}
@@ -106,7 +120,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 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-gray-900/5 focus:outline-none"
           ]}
           role="menu"
           aria-orientation="vertical"
@@ -114,7 +128,7 @@
           tabindex="-1"
         >
           <.link
-            class="block px-3 py-1 text-sm leading-6 text-gray-900 hover:bg-gray-50"
+            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"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-show"}
@@ -125,7 +139,7 @@
           <a
             href={musicbrainz_url(record)}
             target=".blank"
-            class="block px-3 py-1 text-sm leading-6 text-gray-900  hover:bg-gray-50"
+            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"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-musicbrainz"}
@@ -134,7 +148,7 @@
           </a>
 
           <.link
-            class="block px-3 py-1 text-sm leading-6 text-gray-900  hover:bg-gray-50"
+            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"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-edit"}
@@ -144,7 +158,7 @@
           </.link>
 
           <.link
-            class="block px-3 py-1 text-sm leading-6 text-gray-900  hover:bg-gray-50"
+            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"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-purchase"}
@@ -154,7 +168,7 @@
           </.link>
 
           <.link
-            class="block px-3 py-1 text-sm leading-6 text-red-900  hover:bg-red-50"
+            class="block px-3 py-1 text-sm leading-6 text-red-900 hover:bg-red-50 dark:text-red-700 dark:hover:bg-red-900/30 dark:hover:text-red-600"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-delete"}