Customize toast appearance

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

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>