Fix AlertColors info style in site config for consistent dark mode appearance (#279)

* Fix AlertColors info style in site config for consistent dark mode appearance

* Enhance alert icon display in Alerts component for improved clarity with new icons

* Remove unused icon import in Alerts component to streamline icon usage and improve code clarity

Author: BramSuurdje

frontend/src/app/scripts/_components/ScriptItems/Alerts.tsx

@@ -2,7 +2,7 @@ import TextCopyBlock from "@/components/TextCopyBlock";
 import { AlertColors } from "@/config/siteConfig";
 import { Script } from "@/lib/types";
 import { cn } from "@/lib/utils";
-import { Info } from "lucide-react";
+import { AlertCircle, NotepadText } from "lucide-react";
 
 type NoteProps = {
   text: string;
@@ -21,7 +21,11 @@ export default function Alerts({ item }: { item: Script }) {
                 AlertColors[note.type],
               )}
             >
-              <Info className="h-4 min-h-4 w-4 min-w-4" />
+              {note.type == "info" ? (
+                <NotepadText className="h-4 min-h-4 w-4 min-w-4" />
+              ) : (
+                <AlertCircle className="h-4 min-h-4 w-4 min-w-4" />
+              )}
               <span>{TextCopyBlock(note.text)}</span>
             </p>
           </div>

frontend/src/config/siteConfig.tsx

@@ -37,5 +37,5 @@ export const analytics = {
 
 export const AlertColors = {
   warning: "border-red-500/25 bg-destructive/25",
-  info: "border-cyan-500/25 bg-cyan-50 dark:border-cyan-900/25 dark:bg-cyan-900",
+  info: "border-cyan-500/25 bg-cyan-50 dark:border-cyan-900 dark:bg-cyan-900/25",
 };