toasts

src/lib/components/quota-modal.svelte

@@ -61,14 +61,17 @@
 				</button>
 
 				<!-- Modal body -->
-				<div class="p-4 text-white md:p-5">
-					<p class="rounded-xl border border-amber-900 bg-amber-800/25 p-4 font-medium text-amber-200">
+				<div class="p-4 md:p-5 dark:text-white">
+					<p
+						class="rounded-xl border border-amber-900 bg-amber-700/25 p-4 font-medium text-amber-800 dark:bg-amber-800/25 dark:text-amber-200"
+					>
 						You have reached your usage limits. To continue using the playground, please consider creating a PRO
 						account!
 					</p>
-					<p class="mt-4 text-gray-400">
-						By subscribing to PRO, you get <span class="text-white">$2 worth of Inference credits every month.</span> Meaning
-						you could:
+					<p class="mt-4 text-gray-600 dark:text-gray-400">
+						By subscribing to PRO, you get <span class="text-black dark:text-white"
+							>$2 worth of Inference credits every month.</span
+						> Meaning you could:
 					</p>
 					<ul class="mt-4 flex flex-col gap-2">
 						{#each actions as action}

src/lib/components/toaster.svelte

@@ -60,7 +60,7 @@
 			out:fly={{ y: 20 }}
 			style={getToastStyle(i)}
 		>
-			<h3 {...toast.title} class="text-sm font-medium whitespace-nowrap text-gray-700 dark:text-gray-300">
+			<h3 {...toast.title} class="text-sm font-semibold whitespace-nowrap text-gray-700 dark:text-gray-300">
 				{toast.data.title}
 			</h3>
 
@@ -117,7 +117,7 @@
 		background: unset;
 		padding: 0;
 
-		border: 1px solid var(--color-emerald-500);
+		border: none;
 		height: var(--h);
 	}
 

src/lib/components/toaster.svelte.ts

@@ -8,7 +8,7 @@ export type ToastData = {
 
 export const toaster = new Toaster<ToastData>({
 	hover: "pause-all",
-	closeDelay: 0,
+	// closeDelay: 0,
 });
 
 export function addToast(data: ToastData) {
@@ -19,20 +19,21 @@ export function removeToast(id: string) {
 	toaster.removeToast(id);
 }
 
-addToast({
-	title: "Hello World 1",
-	description: "hey",
-	variant: "success",
-});
-
-addToast({
-	title: "Hello World 2",
-	description: "hey",
-	variant: "success",
-});
-
-addToast({
-	title: "Hello World 3",
-	description: "hi",
-	variant: "success",
-});
+// Debugging
+// addToast({
+// 	title: "Hello World 1",
+// 	description: "hey",
+// 	variant: "success",
+// });
+//
+// addToast({
+// 	title: "Hello World 2",
+// 	description: "hey",
+// 	variant: "success",
+// });
+//
+// addToast({
+// 	title: "Hello World 3",
+// 	description: "hi",
+// 	variant: "success",
+// });