Restyle flash messages

lib/music_library_web/components/core_components.ex

@@ -120,9 +120,10 @@ defmodule MusicLibraryWeb.CoreComponents do
       phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
       role="alert"
       class={[
-        "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
-        @kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
-        @kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
+        "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-md shadow-md p-3 ring-1 ring-zinc-400 border-l-2",
+        @kind == :info &&
+          "border-l-emerald-500 bg-white dark:bg-zinc-700 text-emerald-700 dark:text-emerald-300",
+        @kind == :error && "border-l-red-500 bg-white text-rose-900"
       ]}
       {@rest}
     >
@@ -131,9 +132,12 @@ defmodule MusicLibraryWeb.CoreComponents do
         <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
         {@title}
       </p>
-      <p class="mt-2 text-sm leading-5">{msg}</p>
+      <p class="mt-2 text-sm leading-5 text-zinc-700 dark:text-zinc-300">{msg}</p>
       <button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
-        <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
+        <.icon
+          name="hero-x-mark-solid"
+          class="text-zinc-700 dark:text-zinc-100 h-5 w-5 opacity-40 group-hover:opacity-70"
+        />
       </button>
     </div>
     """

priv/gettext/default.pot

@@ -11,7 +11,7 @@
 msgid ""
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:500
+#: lib/music_library_web/components/core_components.ex:504
 #, elixir-autogen, elixir-format
 msgid "Actions"
 msgstr ""
@@ -74,7 +74,7 @@ msgstr ""
 msgid "Error importing record"
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:156
+#: lib/music_library_web/components/core_components.ex:160
 #, elixir-autogen, elixir-format
 msgid "Error!"
 msgstr ""
@@ -95,7 +95,7 @@ msgstr ""
 msgid "Genres"
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:165
+#: lib/music_library_web/components/core_components.ex:169
 #, elixir-autogen, elixir-format
 msgid "Hang in there while we get back on track"
 msgstr ""
@@ -247,7 +247,7 @@ msgstr ""
 msgid "Showing <b>%{visible}</b> of <b>%{total}</b> records"
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:160
+#: lib/music_library_web/components/core_components.ex:164
 #, elixir-autogen, elixir-format
 msgid "Something went wrong!"
 msgstr ""
@@ -258,7 +258,7 @@ msgstr ""
 msgid "Stats"
 msgstr ""
 
-#: lib/music_library_web/components/core_components.ex:155
+#: lib/music_library_web/components/core_components.ex:159
 #, elixir-autogen, elixir-format
 msgid "Success!"
 msgstr ""
@@ -321,7 +321,7 @@ msgid "You must be logged in to access this page"
 msgstr ""
 
 #: lib/music_library_web/components/core_components.ex:81
-#: lib/music_library_web/components/core_components.ex:135
+#: lib/music_library_web/components/core_components.ex:136
 #, elixir-autogen, elixir-format
 msgid "close"
 msgstr ""