fix: improve alert readability in dark mode (#6)

Author: YogeshK34

apps/web/app/globals.css

@@ -45,8 +45,8 @@
   --accent-foreground: oklch(0.98 0 0);
   --destructive: oklch(0.65 0.2 25);
   --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(0.2 0 0);
-  --input: oklch(0.2 0 0);
+  --border: oklch(0.25 0 0);
+  --input: oklch(0.25 0 0);
   --ring: oklch(0.4 0 0);
 }
 

apps/web/components/demo/alert.tsx

@@ -9,12 +9,12 @@ export function Alert({ element }: ComponentRenderProps) {
   const alertType = props.type as string;
   const alertClass =
     alertType === "success"
-      ? "bg-green-50 border-green-200"
+      ? "bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800 text-green-900 dark:text-green-100"
       : alertType === "warning"
-        ? "bg-yellow-50 border-yellow-200"
+        ? "bg-yellow-50 dark:bg-yellow-950 border-yellow-200 dark:border-yellow-800 text-yellow-900 dark:text-yellow-100"
         : alertType === "error"
-          ? "bg-red-50 border-red-200"
-          : "bg-blue-50 border-blue-200";
+          ? "bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800 text-red-900 dark:text-red-100"
+          : "bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800 text-blue-900 dark:text-blue-100";
 
   return (
     <div