feat: add alert colors

js/Alert.js

@@ -3,8 +3,25 @@ import { van } from "./van.js";
 const { div, span } = van.tags;
 
 export function Alert() {
+  const color = van.state("bg-orange-100 text-orange-700 border-orange-500");
+
   van.derive(() => {
     if (alertDialog.val.time > 0) {
+      switch (alertDialog.val.type) {
+        case "error":
+          color.val = "bg-red-100 text-red-700 border-red-500";
+          break;
+        case "success":
+          color.val = "bg-green-100 text-green-700 border-green-500";
+          break;
+        case "info":
+          color.val = "bg-blue-100 text-blue-700 border-blue-500";
+          break;
+        case "warning":
+        default:
+          color.val = "bg-orange-100 text-orange-700 border-orange-500";
+          break;
+      }
       setTimeout(() => {
         alertDialog.val = { text: "", time: 0 };
       }, alertDialog.val.time);
@@ -19,8 +36,7 @@ export function Alert() {
     },
     div(
       {
-        class:
-          "bg-orange-100 border-t-4 border-orange-500 rounded-sm text-orange-700 p-2",
+        class: () => `${color.val} border-t-4 rounded-sm p-2`,
       },
       () => span(alertDialog.val.text)
     )

js/AvatarPreview.js

@@ -554,6 +554,7 @@ export function AvatarPreview() {
                 await navigator.clipboard.writeText(sharedAvatarLink.val);
                 alertDialog.val = {
                   text: "Avatar link copied to clipboard!",
+                  type: "success",
                   time: 5000,
                 };
               }

js/tw-styles.css

@@ -2532,11 +2532,21 @@ details.collapse summary::-webkit-details-marker{
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
+.border-blue-500{
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
 .border-gray-300{
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-green-500{
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+}
+
 .border-orange-500{
   --tw-border-opacity: 1;
   border-color: rgb(249 115 22 / var(--tw-border-opacity));
@@ -2547,6 +2557,11 @@ details.collapse summary::-webkit-details-marker{
   border-color: rgb(168 85 247 / var(--tw-border-opacity));
 }
 
+.border-red-500{
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
+
 .bg-base-200{
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
@@ -2557,11 +2572,21 @@ details.collapse summary::-webkit-details-marker{
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-blue-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
 .bg-gray-900{
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+.bg-green-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
 .bg-green-500{
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -2582,6 +2607,11 @@ details.collapse summary::-webkit-details-marker{
   background-color: rgb(255 237 213 / var(--tw-bg-opacity));
 }
 
+.bg-red-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
 .bg-red-500{
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -2735,6 +2765,11 @@ details.collapse summary::-webkit-details-marker{
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-blue-700{
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
 .text-gray-300{
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2745,6 +2780,11 @@ details.collapse summary::-webkit-details-marker{
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-green-700{
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
 .text-orange-700{
   --tw-text-opacity: 1;
   color: rgb(194 65 12 / var(--tw-text-opacity));
@@ -2755,6 +2795,11 @@ details.collapse summary::-webkit-details-marker{
   color: rgb(168 85 247 / var(--tw-text-opacity));
 }
 
+.text-red-700{
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
 .text-transparent{
   color: transparent;
 }