From 81380f184eeabea0f48a951de56348f450aeeeb9 Mon Sep 17 00:00:00 2001
From: Tim Wundenberg <tim@wundenbergs.de>
Date: Tue, 6 May 2025 15:35:16 +0200
Subject: [PATCH] fix: migrate toasts from daisyui to tailwind

---
 input.css             | 22 ++++++----------------
 service/auth.go       |  2 +-
 static/js/toast.js    | 21 +++++++++++----------
 template/layout.templ |  7 ++++---
 4 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/input.css b/input.css
index 7f312c6..46878d6 100644
--- a/input.css
+++ b/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;
diff --git a/service/auth.go b/service/auth.go
index 61afe13..a2f0734 100644
--- a/service/auth.go
+++ b/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")
diff --git a/static/js/toast.js b/static/js/toast.js
index 582976a..2f92b18 100644
--- a/static/js/toast.js
+++ b/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";
-		// case "info":
+			return ["bg-green-900", "text-white"];
 		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);
 });
diff --git a/template/layout.templ b/template/layout.templ
index 5d496fe..0d5a234 100644
--- a/template/layout.templ
+++ b/template/layout.templ
@@ -40,9 +40,10 @@ templ Layout(slot templ.Component, user templ.Component) {
 		</div>
 		// Footer
 	</div>
-	<div class="" id="toasts">
-		<div class="hidden" id="toast">
-			New message arrived.
+	<div id="toasts" class="fixed bottom-4 right-4 ml-4 max-w-96 flex flex-col gap-2 z-50">
+		<div id="toast"
+			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>