style: DigitalInputsModal dark mode

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.892
+NEXT_PUBLIC_APP_VERSION=1.6.893
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.892
+NEXT_PUBLIC_APP_VERSION=1.6.893
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.893] – 2025-09-10
+
+- chore: Modale mit bi bi-x-circle-fill  Icon schließen
+
+---
 ## [1.6.892] – 2025-09-10
 
 - style: KVZ Modal optisch an die anderen angepasst

components/main/digitalInputs/digitalInputsModal.tsx

@@ -182,132 +182,133 @@ export default function InputModal({
 
   return (
     <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
-      <div className="bg-white rounded-lg shadow-lg p-6 w-1/2 max-w-lg">
-        <div className="mb-4 border-b pb-2 flex justify-between items-center">
-          <h2 className="text-base font-bold">
+      <div className="bg-[var(--color-surface)] border border-base rounded-xl shadow-xl w-[32rem] max-w-full p-0 flex flex-col">
+        <header className="modal-header flex items-center justify-between px-6 py-4 border-b border-base">
+          <h2 className="text-base font-bold text-fg">
             Einstellungen Meldungseingang {selectedInput.id}
           </h2>
           <button
             onClick={handleClose}
-            className="text-2xl hover:text-gray-400"
+            className="icon-btn text-2xl"
             aria-label="Modal schließen"
+            type="button"
           >
-            <i className="bi bi-x-circle-fill"></i>
+            <i className="bi bi-x-circle-fill" />
           </button>
-        </div>
-
-        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
-          <div>
-            <span className="font-normal">Bezeichnung:</span>
-          </div>
-          <div>
-            <input
-              type="text"
-              value={label}
-              onChange={(e) => setLabel(e.target.value)}
-              className="border border-gray-300 rounded px-2 py-1 w-full"
-              maxLength={32}
-            />
-          </div>
-
-          <div>
-            <span className="font-normal">Invertierung:</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              role="switch"
-              aria-checked={invertiert}
-              onClick={() => setInvertiert(!invertiert)}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
-                invertiert ? "bg-littwin-blue" : "bg-gray-300"
-              }`}
-            >
-              <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
-                  invertiert ? "translate-x-6" : "translate-x-1"
-                }`}
+        </header>
+        <div className="modal-body-scroll px-6 py-5 flex-1 text-fg">
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+            <div>
+              <span className="font-normal text-fg-secondary">
+                Bezeichnung:
+              </span>
+            </div>
+            <div>
+              <input
+                type="text"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="border border-base rounded px-2 py-1 w-full bg-[var(--color-surface-alt)] text-fg"
+                maxLength={32}
               />
-            </button>
-            <span>{invertiert ? "Ein" : "Aus"}</span>
-          </div>
-
-          <div>
-            <span className="font-normal">Filterzeit:</span>
-          </div>
-          <div className="relative">
-            <input
-              type="number"
-              min={0}
-              max={2000}
-              value={timeFilter}
-              onChange={(e) => {
-                const val = Number(e.target.value);
-                if (val <= 2000) {
-                  setTimeFilter(val);
-                }
-              }}
-              className="border border-gray-300 rounded px-2 py-1 pr-10 w-full text-right"
-              title="Maximal 2000 ms erlaubt"
-            />
-
-            <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
-              ms
-            </span>
-          </div>
-
-          <div>
-            <span className="font-normal">Gewichtung:</span>
-          </div>
-          <div>
-            <input
-              type="number"
-              min={0}
-              max={1000}
-              value={weighting}
-              onChange={(e) => {
-                const val = Number(e.target.value);
-                if (val <= 1000) {
-                  setWeighting(val);
-                }
-              }}
-              className="border border-gray-300 rounded px-2 py-1 w-full text-right"
-              title="Maximal 1000 erlaubt"
-            />
-          </div>
-
-          <div className="relative group inline-block">
-            <span className="font-normal">Out of Service:</span>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              role="switch"
-              aria-checked={!!eingangOffline}
-              onClick={() => setEingangOffline(eingangOffline ? 0 : 1)}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
-                eingangOffline ? "bg-littwin-blue" : "bg-gray-300"
-              }`}
-            >
-              <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
-                  eingangOffline ? "translate-x-6" : "translate-x-1"
+            </div>
+            <div>
+              <span className="font-normal text-fg-secondary">
+                Invertierung:
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                role="switch"
+                aria-checked={invertiert}
+                onClick={() => setInvertiert(!invertiert)}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
+                  invertiert ? "bg-littwin-blue" : "bg-base-muted"
                 }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
+                    invertiert ? "translate-x-6" : "translate-x-1"
+                  }`}
+                />
+              </button>
+              <span className="text-fg">{invertiert ? "Ein" : "Aus"}</span>
+            </div>
+            <div>
+              <span className="font-normal text-fg-secondary">Filterzeit:</span>
+            </div>
+            <div className="relative">
+              <input
+                type="number"
+                min={0}
+                max={2000}
+                value={timeFilter}
+                onChange={(e) => {
+                  const val = Number(e.target.value);
+                  if (val <= 2000) {
+                    setTimeFilter(val);
+                  }
+                }}
+                className="border border-base rounded px-2 py-1 pr-10 w-full text-right bg-[var(--color-surface-alt)] text-fg"
+                title="Maximal 2000 ms erlaubt"
               />
-            </button>
-            <span>{eingangOffline ? "Ein" : "Aus"}</span>
+              <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-muted text-sm">
+                ms
+              </span>
+            </div>
+            <div>
+              <span className="font-normal text-fg-secondary">Gewichtung:</span>
+            </div>
+            <div>
+              <input
+                type="number"
+                min={0}
+                max={1000}
+                value={weighting}
+                onChange={(e) => {
+                  const val = Number(e.target.value);
+                  if (val <= 1000) {
+                    setWeighting(val);
+                  }
+                }}
+                className="border border-base rounded px-2 py-1 w-full text-right bg-[var(--color-surface-alt)] text-fg"
+                title="Maximal 1000 erlaubt"
+              />
+            </div>
+            <div className="relative group inline-block">
+              <span className="font-normal text-fg-secondary">
+                Out of Service:
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                role="switch"
+                aria-checked={!!eingangOffline}
+                onClick={() => setEingangOffline(eingangOffline ? 0 : 1)}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
+                  eingangOffline ? "bg-littwin-blue" : "bg-base-muted"
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
+                    eingangOffline ? "translate-x-6" : "translate-x-1"
+                  }`}
+                />
+              </button>
+              <span className="text-fg">{eingangOffline ? "Ein" : "Aus"}</span>
+            </div>
           </div>
         </div>
-
-        <div className="mt-6 flex justify-end gap-2">
+        <footer className="px-6 py-4 border-t border-base flex justify-end">
           <button
             onClick={handleSpeichern}
-            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
+            className="btn-primary px-4 py-2 rounded flex items-center"
           >
             Speichern
           </button>
-        </div>
+        </footer>
       </div>
     </div>
   );

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.892",
+  "version": "1.6.893",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.892",
+      "version": "1.6.893",
       "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.892",
+  "version": "1.6.893",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",