fix: migrate toasts from daisyui to tailwind

input.css

@@ -10,31 +10,21 @@ input:focus {
 	@apply outline-none ring-0;
 }
 
-@theme {
-	--font-pirata: "Pirata One", sans-serif;
-	--font-shippori: "Shippori Mincho", sans-serif;
-
-  --animate-fade: fadeOut 0.25s ease-in;
-  @keyframes fadeOut {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-}
-
 @font-face {
   font-family: "Pirata One";
   src: url("/static/font/pirata_one/PirataOne-Regular.ttf") format("truetype");
 }
-
 @font-face {
   font-family: "Shippori Mincho";
   src: url("/static/font/shippori_mincho/ShipporiMincho-Medium.ttf") format("truetype");
 }
 
+@theme {
+	--font-pirata: "Pirata One", sans-serif;
+	--font-shippori: "Shippori Mincho", sans-serif;
+}
+
+
 /* Button */
 .button {
   transition: all 150ms linear;

service/auth.go

@@ -19,7 +19,7 @@ import (
 
 var (
 	ErrInvalidCredentials = errors.New("invalid email or password")
-	ErrInvalidPassword    = errors.New("password needs to be 8 characters long, contain at least one number, one special, one uppercase and one lowercase character")
+	ErrInvalidPassword    = errors.New("The password needs to be 8 characters long, contain at least one number, one special, one uppercase and one lowercase character")
 	ErrInvalidEmail       = errors.New("invalid email")
 	ErrAccountExists      = errors.New("account already exists")
 	ErrSessionIdInvalid   = errors.New("session ID is invalid")

static/js/toast.js

@@ -3,14 +3,13 @@
 function getClass(type) {
 	switch (type) {
 		case "error":
-			return "alert-error";
+			return ["bg-amber-900", "text-white"];
 		case "warning":
-			return "alert-warning";
+			return ["bg-yellow-200", "text-gray-800"];
 		case "success":
-			return "alert-success";
+			return ["bg-green-900", "text-white"];
-		// case "info":
 		default:
-			return "alert-info";
+			return ["bg-gray-800", "text-white"];
 	}
 }
 
@@ -21,20 +20,22 @@ htmx.on("toast", (e) => {
 
 	const template = document.getElementById("toast");
 	const toast = template.cloneNode(true);
-	const parent = document.getElementById("toasts");
+	const list = document.getElementById("toasts");
 
 	toast.id = ""
 	toast.classList.remove("hidden");
-	toast.classList.add(getClass(type));
+	toast.classList.add(...getClass(type));
 	toast.innerText = message;
 
-	parent.appendChild(toast);
+	list.appendChild(toast);
+	setTimeout(() => {
+		toast.classList.remove("opacity-0");
+	}, 0);
 
 	setTimeout(() => {
-		toast.classList.add("animate-fade");
 		toast.classList.add("opacity-0");
 		setTimeout(() => {
-			parent.removeChild(toast);
+			list.removeChild(toast);
 		}, 250);
 	}, 5000);
 });

template/layout.templ

@@ -40,9 +40,10 @@ templ Layout(slot templ.Component, user templ.Component) {
 		</div>
 		// Footer
 	</div>
-	<div class="" id="toasts">
+	<div id="toasts" class="fixed bottom-4 right-4 ml-4 max-w-96 flex flex-col gap-2 z-50">
-		<div class="hidden" id="toast">
+		<div id="toast"
-			New message arrived.
+			class="transition-all duration-300 opacity-0 px-4 py-2 text-lg hidden text-bold rounded bg-amber-900 text-white">
+			M
 		</div>
 	</div>
 </body>