Clean up flash message

upmaru · Feb 23, 2024 · 80d37ee · 80d37ee
1 parent d59d665
commit 80d37ee
Showing 1 changed file with 37 additions and 14 deletions.
diff --git a/lib/polar_web/components/core_components.ex b/lib/polar_web/components/core_components.ex
@@ -118,22 +118,45 @@ defmodule PolarWeb.CoreComponents do
       id={@id}
       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"
-      ]}
+      aria-live="assertive"
+      class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
       {@rest}
     >
-      <p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
-        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
-        <.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>
-      <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" />
-      </button>
+      <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+        <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+          <div class="p-4">
+            <div class="flex items-start">
+              <div class="flex-shrink-0">
+                <.icon
+                  :if={@kind == :info}
+                  name="hero-information-circle-solid"
+                  class="h-6 w-6 text-green-600"
+                />
+                <.icon
+                  :if={@kind == :error}
+                  name="hero-exclamation-circle-solid"
+                  class="h-6 w-6 text-red-600"
+                />
+              </div>
+              <div class="ml-3 w-0 flex-1 pt-0.5">
+                <p :if={@title} class="text-sm font-medium text-gray-900">
+                  <%= @title %>
+                </p>
+                <p class="mt-1 text-sm text-gray-500"><%= msg %></p>
+              </div>
+              <div class="ml-4 flex flex-shrink-0">
+                <button
+                  type="button"
+                  class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  aria-label={gettext("close")}
+                >
+                  <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     """
   end