From be9954ac2955379e392f7f784ced395efaee5cb2 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Wed, 10 Sep 2025 11:49:58 +0200
Subject: [PATCH] =?UTF-8?q?style:=20DigitalOutputsModal=20f=C3=BCr=20dark?=
 =?UTF-8?q?=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  2 +-
 .env.production                               |  2 +-
 CHANGELOG.md                                  |  5 ++
 .../digitalOutputs/DigitalOutputsModal.tsx    | 50 ++++++++++---------
 .../digitalOutputs/DigitalOutputsWidget.tsx   |  8 ++-
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 7 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/.env.development b/.env.development
index bf242b0..bb88720 100644
--- a/.env.development
+++ b/.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.895
+NEXT_PUBLIC_APP_VERSION=1.6.896
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 
diff --git a/.env.production b/.env.production
index 5858c04..471286b 100644
--- a/.env.production
+++ b/.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.895
+NEXT_PUBLIC_APP_VERSION=1.6.896
 NEXT_PUBLIC_CPL_MODE=production
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1f7007..c660b2a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [1.6.896] – 2025-09-10
+
+- style: Digitale Ausgänge Switch
+
+---
 ## [1.6.895] – 2025-09-10
 
 - style: DigitalInputsModal dark mode
diff --git a/components/main/digitalOutputs/DigitalOutputsModal.tsx b/components/main/digitalOutputs/DigitalOutputsModal.tsx
index ceed0f8..0e1be46 100644
--- a/components/main/digitalOutputs/DigitalOutputsModal.tsx
+++ b/components/main/digitalOutputs/DigitalOutputsModal.tsx
@@ -94,44 +94,48 @@ export default function DigitalOutputsModal({
 
   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 Schaltausgang {selectedOutput.id}
           </h2>
           <button
             onClick={closeOutputModal}
-            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>
+        </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"
+                placeholder="z. B. Licht Relais 1"
+              />
+            </div>
           </div>
-          <input
-            type="text"
-            value={label}
-            onChange={(e) => setLabel(e.target.value)}
-            className="w-full border border-gray-300 rounded px-3 py-2"
-            placeholder="z. B. Licht Relais 1"
-          />
+          {errorMsg && <p className="text-red-600 text-sm mb-2">{errorMsg}</p>}
         </div>
-
-        {errorMsg && <p className="text-red-600 text-sm mb-2">{errorMsg}</p>}
-
-        <div className="flex justify-end gap-2 mt-6">
+        <footer className="px-6 py-4 border-t border-base flex justify-end">
           <button
             onClick={handleSave}
             disabled={isSaving}
-            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"
           >
             {isSaving ? "Speichern..." : "Speichern"}
           </button>
-        </div>
+        </footer>
       </div>
     </div>
   );
diff --git a/components/main/digitalOutputs/DigitalOutputsWidget.tsx b/components/main/digitalOutputs/DigitalOutputsWidget.tsx
index 9b382af..7a33a44 100644
--- a/components/main/digitalOutputs/DigitalOutputsWidget.tsx
+++ b/components/main/digitalOutputs/DigitalOutputsWidget.tsx
@@ -113,10 +113,14 @@ export default function DigitalOutputsWidget({
                   role="switch"
                   aria-checked={output.status}
                   onClick={() => handleToggle(output.id)}
-                  className={`relative inline-flex h-4 w-7 items-center rounded-full border border-base transition-colors duration-200 ${output.status ? "bg-littwin-blue" : "bg-base-muted"}`}
+                  className={`relative inline-flex h-4 w-7 items-center rounded-full border border-base transition-colors duration-200 ${
+                    output.status ? "bg-littwin-blue" : "bg-base-muted"
+                  }`}
                 >
                   <span
-                    className={`absolute left-0.5 top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow transition-transform duration-200 ${output.status ? "translate-x-3.5" : "translate-x-0"}`}
+                    className={`absolute left-0.5 top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow transition-transform duration-200 ${
+                      output.status ? "translate-x-3.5" : "translate-x-0"
+                    }`}
                   />
                 </button>
               </td>
diff --git a/package-lock.json b/package-lock.json
index c899489..af2bcd5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.895",
+  "version": "1.6.896",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.895",
+      "version": "1.6.896",
       "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",
diff --git a/package.json b/package.json
index a838521..692a43c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.895",
+  "version": "1.6.896",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",