From 9f80f1dfc0778eafb103cc4665dcae54b5ceb039 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sat, 30 Aug 2025 22:46:26 +0300
Subject: [PATCH] Customize toast appearance

---
 lib/music_library_web/components/layouts.ex     | 17 +++++++++++++++++
 .../components/layouts/app.html.heex            |  1 +
 2 files changed, 18 insertions(+)

diff --git a/lib/music_library_web/components/layouts.ex b/lib/music_library_web/components/layouts.ex
index 89d52902..f02450e3 100644
--- a/lib/music_library_web/components/layouts.ex
+++ b/lib/music_library_web/components/layouts.ex
@@ -36,4 +36,21 @@ defmodule MusicLibraryWeb.Layouts do
     </.link>
     """
   end
+
+  defp toast_class_fn(assigns) do
+    [
+      # base classes
+      "bg-white group/toast z-100 pointer-events-auto relative w-full items-center justify-between origin-center overflow-hidden rounded-md p-4 shadow-lg border border-l-4 col-start-1 col-end-1 row-start-1 row-end-2",
+      # start hidden if javascript is enabled
+      "[@media(scripting:enabled)]:opacity-0 [@media(scripting:enabled){[data-phx-main]_&}]:opacity-100",
+      # used to hide the disconnected flashes
+      if(assigns[:rest][:hidden] == true, do: "hidden", else: "flex"),
+      # override styles per severity
+      assigns[:kind] == :info &&
+        "!text-green-700 !bg-green-100 border-green-200 border-l-green-400",
+      assigns[:kind] == :warning &&
+        "!text-yellow-700 !bg-yellow-100 border-yellow-200 border-l-yellow-400",
+      assigns[:kind] == :error && "!text-red-700 !bg-red-100 border-red-200 border-l-red-400"
+    ]
+  end
 end
diff --git a/lib/music_library_web/components/layouts/app.html.heex b/lib/music_library_web/components/layouts/app.html.heex
index 5dea12ca..8aa859ef 100644
--- a/lib/music_library_web/components/layouts/app.html.heex
+++ b/lib/music_library_web/components/layouts/app.html.heex
@@ -115,6 +115,7 @@
       corner={:top_right}
       connected={assigns[:socket] != nil}
       toasts_sync={assigns[:toasts_sync]}
+      toast_class_fn={&toast_class_fn/1}
     />
     {@inner_content}
   </div>