Restyle flash messages

This commit is contained in:
Claudio Ortolina
2024-12-25 19:22:38 +00:00
parent 2e73e810ea
commit 6bcce558c4
2 changed files with 15 additions and 11 deletions
@@ -120,9 +120,10 @@ defmodule MusicLibraryWeb.CoreComponents do
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")} phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
role="alert" role="alert"
class={[ class={[
"fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1", "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 && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900", @kind == :info &&
@kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900" "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} {@rest}
> >
@@ -131,9 +132,12 @@ defmodule MusicLibraryWeb.CoreComponents do
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" /> <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
{@title} {@title}
</p> </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")}> <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> </button>
</div> </div>
""" """
+6 -6
View File
@@ -11,7 +11,7 @@
msgid "" msgid ""
msgstr "" msgstr ""
#: lib/music_library_web/components/core_components.ex:500 #: lib/music_library_web/components/core_components.ex:504
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Actions" msgid "Actions"
msgstr "" msgstr ""
@@ -74,7 +74,7 @@ msgstr ""
msgid "Error importing record" msgid "Error importing record"
msgstr "" msgstr ""
#: lib/music_library_web/components/core_components.ex:156 #: lib/music_library_web/components/core_components.ex:160
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Error!" msgid "Error!"
msgstr "" msgstr ""
@@ -95,7 +95,7 @@ msgstr ""
msgid "Genres" msgid "Genres"
msgstr "" msgstr ""
#: lib/music_library_web/components/core_components.ex:165 #: lib/music_library_web/components/core_components.ex:169
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Hang in there while we get back on track" msgid "Hang in there while we get back on track"
msgstr "" msgstr ""
@@ -247,7 +247,7 @@ msgstr ""
msgid "Showing <b>%{visible}</b> of <b>%{total}</b> records" msgid "Showing <b>%{visible}</b> of <b>%{total}</b> records"
msgstr "" msgstr ""
#: lib/music_library_web/components/core_components.ex:160 #: lib/music_library_web/components/core_components.ex:164
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Something went wrong!" msgid "Something went wrong!"
msgstr "" msgstr ""
@@ -258,7 +258,7 @@ msgstr ""
msgid "Stats" msgid "Stats"
msgstr "" msgstr ""
#: lib/music_library_web/components/core_components.ex:155 #: lib/music_library_web/components/core_components.ex:159
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Success!" msgid "Success!"
msgstr "" msgstr ""
@@ -321,7 +321,7 @@ msgid "You must be logged in to access this page"
msgstr "" msgstr ""
#: lib/music_library_web/components/core_components.ex:81 #: 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 #, elixir-autogen, elixir-format
msgid "close" msgid "close"
msgstr "" msgstr ""