feat: MUI test

components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx

@@ -41,68 +41,71 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
       window.kabelModalOpen = showModal;
     }
   }, [showModal]);
-  //-----------------------------------------------------
 
-  //------------------------------------------------------
   return (
     <ReactModal
       isOpen={showModal}
       onRequestClose={onClose}
+      shouldCloseOnOverlayClick
       ariaHideApp={false}
       style={{
         overlay: {
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          backgroundColor: "rgba(0,0,0,0.55)",
           zIndex: 100,
+          backdropFilter: "blur(2px)",
         },
         content: {
-          top: "50%",
-          left: "50%",
+          inset: "50% auto auto 50%",
           transform: "translate(-50%, -50%)",
-          width: "90%",
-          maxWidth: "850px",
-          padding: "0px",
-          border: "none",
-          borderRadius: "8px",
-          position: "relative",
-          bottom: "auto",
-          right: "auto",
+          width: "min(900px,92vw)",
+          maxHeight: "80vh",
+          padding: 0,
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          borderRadius: "12px",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
         },
       }}
+      contentLabel={`Einstellungen KÜ ${slot + 1}`}
     >
-      <div className="p-2 flex justify-between items-center rounded-t-md bg-surface-alt border-b border-base">
-        <h2 className="text-base font-bold text-fg">
+      <div className="modal-header">
+        <h2 className="text-sm font-semibold tracking-wide text-fg">
           Einstellungen KÜ {slot + 1}
         </h2>
         <button
           onClick={onClose}
-          className="text-2xl text-fg-muted hover:text-fg transition-colors focus:outline-none focus:ring-2 focus:ring-accent/50 rounded"
+          className="icon-btn"
           aria-label="Modal schließen"
+          type="button"
         >
-          <i className="bi bi-x-circle-fill"></i>
+          <i className="bi bi-x-lg text-base" />
         </button>
       </div>
 
-      <div className="flex justify-start bg-surface-alt space-x-2 p-2 border-b border-base">
+      <div className="flex justify-start bg-surface-alt px-3 pt-2 gap-2 border-b border-base">
         {[
           { label: "Allgemein", key: "kue" as const },
-          { label: "TDR ", key: "tdr" as const },
+          { label: "TDR", key: "tdr" as const },
           { label: "KVz", key: "kvz" as const },
           { label: "Knotenpunkte", key: "knoten" as const },
-        ].map(({ label, key }) => (
-          <button
-            key={key}
-            onClick={() => setActiveTab(key)}
-            className={`px-4 py-1 rounded-t font-semibold text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-accent/40 ${
-              activeTab === key
-                ? "bg-surface text-accent shadow-sm"
-                : "text-fg-muted hover:text-fg"
-            }`}
-          >
-            {label}
-          </button>
-        ))}
+        ].map(({ label, key }) => {
+          const isActive = activeTab === key;
+          return (
+            <button
+              key={key}
+              type="button"
+              onClick={() => setActiveTab(key)}
+              className={`tab-btn ${isActive ? "tab-btn-active" : ""}`}
+              aria-current={isActive ? "page" : undefined}
+            >
+              {label}
+            </button>
+          );
+        })}
       </div>
-      <div className="p-4 bg-surface rounded-b-md h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] overflow-y-auto text-fg">
+      <div className="modal-body-scroll px-5 py-4 flex-1 h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] text-fg">
         {activeTab === "kue" && (
           <KueEinstellung
             slot={slot}