Update colors in form component

lib/music_library_web/components/core_components.ex

@@ -81,7 +81,7 @@ defmodule MusicLibraryWeb.CoreComponents do
                 <button
                   phx-click={JS.exec("data-cancel", to: "##{@id}")}
                   type="button"
-                  class="-m-3 flex-none p-3 opacity-40 hover:opacity-80 bg-gray-50 dark:bg-zinc-800 dark:text-zinc-50"
+                  class="-m-3 flex-none p-3 opacity-40 hover:opacity-80 bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-50"
                   aria-label={gettext("close")}
                 >
                   <.icon name="hero-x-mark-solid" class="h-5 w-5" />
@@ -243,7 +243,7 @@ defmodule MusicLibraryWeb.CoreComponents do
         "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",
+        "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",
         @class
       ]}
@@ -347,7 +347,17 @@ defmodule MusicLibraryWeb.CoreComponents do
       <select
         id={@id}
         name={@name}
-        class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
+        class={[
+          "mt-2 block w-full rounded-md",
+          "border border-zinc-300",
+          "bg-white shadow-sm dark:bg-zinc-700",
+          "ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
+          "focus:border-zinc-400 focus:ring-zinc-400 dark:focus:ring-zinc-300 focus:ring-0",
+          "sm:text-sm",
+          "text-zinc-900 dark:text-zinc-200",
+          "ring-zinc-200 dark:ring-zinc-400",
+          "placeholder:text-zinc-400 dark:placeholder:text-zinc-400"
+        ]}
         multiple={@multiple}
         {@rest}
       >
@@ -389,13 +399,15 @@ defmodule MusicLibraryWeb.CoreComponents do
         id={@id}
         value={Phoenix.HTML.Form.normalize_value(@type, @value)}
         class={[
-          "mt-2 block w-full rounded-md text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
+          "mt-2 block w-full rounded-md",
+          "border border-zinc-300",
+          "bg-white shadow-sm dark:bg-zinc-700",
           "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",
+          "focus:border-zinc-400 focus:ring-zinc-400 dark:focus:ring-zinc-300 focus:ring-0",
+          "sm:text-sm",
+          "text-zinc-900 dark:text-zinc-200",
+          "ring-zinc-200 dark:ring-zinc-400",
+          "placeholder:text-zinc-400 dark:placeholder:text-zinc-400",
           @errors == [] && "border-zinc-300 focus:border-zinc-400",
           @errors != [] && "border-rose-400 focus:border-rose-400"
         ]}
@@ -450,10 +462,10 @@ defmodule MusicLibraryWeb.CoreComponents do
       @class
     ]}>
       <div class="font-semibold">
-        <h1 class="text-sm md:text-base lg:text-2xl text-gray-900">
+        <h1 class="text-sm md:text-base lg:text-2xl text-zinc-900">
           <%= render_slot(@inner_block) %>
         </h1>
-        <h2 :if={@subtitle != []} class="mt-2 text-sm md:text-base text-gray-600">
+        <h2 :if={@subtitle != []} class="mt-2 text-sm md:text-base text-zinc-600">
           <%= render_slot(@subtitle) %>
         </h2>
       </div>

lib/music_library_web/live/record_live/form_component.ex

@@ -14,10 +14,11 @@ defmodule MusicLibraryWeb.RecordLive.FormComponent do
   def render(assigns) do
     ~H"""
     <div>
-      <.header>
-        <%= @title %>
-        <:subtitle></:subtitle>
-      </.header>
+      <header>
+        <h1 class="text-base font-medium leading-6 text-zinc-700 dark:text-zinc-400">
+          <%= @title %>
+        </h1>
+      </header>
 
       <.simple_form
         for={@form}
@@ -53,14 +54,17 @@ defmodule MusicLibraryWeb.RecordLive.FormComponent do
           <.label for={@uploads.cover_data.ref}>
             <%= gettext("Cover art") %>
           </.label>
-          <span :if={@uploads.cover_data.entries == []} class="float-right">
+          <span
+            :if={@uploads.cover_data.entries == []}
+            class="float-right text-zinc-700 dark:text-zinc-400"
+          >
             <%= gettext("No cover selected") %>
           </span>
           <%= for entry <- @uploads.cover_data.entries do %>
-            <span class="float-right"><%= entry.progress %>%</span>
+            <span class="float-right text-zinc-700 dark:text-zinc-400"><%= entry.progress %>%</span>
           <% end %>
           <.live_file_input
-            class="mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6"
+            class="mt-2 block w-full rounded-lg text-zinc-900 dark:text-zinc-200 focus:ring-0 sm:text-sm sm:leading-6"
             upload={@uploads.cover_data}
           />
         </div>

priv/gettext/default.pot

@@ -11,7 +11,7 @@
 msgid ""
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:503
+#: lib/music_library_web/components/core_components.ex:515
 #, elixir-autogen, elixir-format
 msgid "Actions"
 msgstr ""
@@ -101,54 +101,54 @@ msgstr ""
 msgid "Previous"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/form_component.ex:34
-#: lib/music_library_web/live/record_live/form_component.ex:41
+#: lib/music_library_web/live/record_live/form_component.ex:35
+#: lib/music_library_web/live/record_live/form_component.ex:42
 #, elixir-autogen, elixir-format
 msgid "Choose a value"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/form_component.ex:54
+#: lib/music_library_web/live/record_live/form_component.ex:55
 #, elixir-autogen, elixir-format
 msgid "Cover art"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/form_component.ex:40
+#: lib/music_library_web/live/record_live/form_component.ex:41
 #, elixir-autogen, elixir-format
 msgid "Format"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/form_component.ex:57
+#: lib/music_library_web/live/record_live/form_component.ex:61
 #, elixir-autogen, elixir-format
 msgid "No cover selected"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/form_component.ex:50
+#: lib/music_library_web/live/record_live/form_component.ex:51
 #, elixir-autogen, elixir-format
 msgid "Purchased at"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/form_component.ex:113
+#: lib/music_library_web/live/record_live/form_component.ex:117
 #: lib/music_library_web/live/wishlist_live/index.ex:129
 #, elixir-autogen, elixir-format
 msgid "Record updated successfully"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/form_component.ex:45
+#: lib/music_library_web/live/record_live/form_component.ex:46
 #, elixir-autogen, elixir-format
 msgid "Release"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/form_component.ex:68
+#: lib/music_library_web/live/record_live/form_component.ex:72
 #, elixir-autogen, elixir-format
 msgid "Save"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/form_component.ex:68
+#: lib/music_library_web/live/record_live/form_component.ex:72
 #, elixir-autogen, elixir-format
 msgid "Saving..."
 msgstr ""
 
-#: lib/music_library_web/live/record_live/form_component.ex:33
+#: lib/music_library_web/live/record_live/form_component.ex:34
 #, elixir-autogen, elixir-format
 msgid "Type"
 msgstr ""