Schließen Icon in KÜ Einstellungen

components/modales/KueModal.jsx

@@ -1,6 +1,7 @@
 "use client"; // components/modales/KueModal.jsx
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
+import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
 
 function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   const [ids, setIds] = useState(Array(32).fill("---")); // IDs für jedes Modul
@@ -170,17 +171,28 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
           transform: "translate(-50%, -50%)",
           width: "90%",
           maxWidth: "800px",
-          padding: "20px",
+          padding: "10px",
           borderRadius: "8px",
           border: "none",
         },
       }}
     >
       {/* Modal Header */}
-      <div className="flex items-center justify-between bg-littwin-blue text-white p-2 rounded-t-lg">
+      <div className="flex items-center justify-between bg-littwin-blue text-white p-1 rounded-t-lg">
         <h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
-        <button onClick={onClose} className="text-white text-lg font-bold">
-          &times;
+        <button
+          onClick={onClose}
+          style={{
+            position: "absolute",
+            top: "10px",
+            right: "20px",
+            background: "transparent",
+            border: "none",
+            cursor: "pointer",
+            fontSize: "24px",
+          }}
+        >
+          <i className="bi bi-x-circle-fill"></i>
         </button>
       </div>