From f25063074d802ff28317a44cc87d88bdb4f4fa09 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Wed, 10 Sep 2025 11:45:36 +0200
Subject: [PATCH] =?UTF-8?q?style:=20Digitale=20Ausg=C3=A4nge=20Switch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  2 +-
 .env.production                               |  2 +-
 CHANGELOG.md                                  |  5 +++
 .../main/digitalInputs/digitalInputsModal.tsx | 36 ++++++++++++++-----
 .../digitalOutputs/DigitalOutputsWidget.tsx   | 18 +++++-----
 package-lock.json                             |  4 +--
 package.json                                  |  2 +-
 7 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/.env.development b/.env.development
index 28977f4..bf242b0 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.894
+NEXT_PUBLIC_APP_VERSION=1.6.895
 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 2121390..5858c04 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.894
+NEXT_PUBLIC_APP_VERSION=1.6.895
 NEXT_PUBLIC_CPL_MODE=production
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fbbb823..e1f7007 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [1.6.895] – 2025-09-10
+
+- style: DigitalInputsModal dark mode
+
+---
 ## [1.6.894] – 2025-09-10
 
 - style: DigitalInputsModal dark mode
diff --git a/components/main/digitalInputs/digitalInputsModal.tsx b/components/main/digitalInputs/digitalInputsModal.tsx
index ceb04f3..ad59419 100644
--- a/components/main/digitalInputs/digitalInputsModal.tsx
+++ b/components/main/digitalInputs/digitalInputsModal.tsx
@@ -184,7 +184,9 @@ export default function InputModal({
     <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-[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>
+          <h2 className="text-base font-bold text-fg">
+            Einstellungen Meldungseingang {selectedInput.id}
+          </h2>
           <button
             onClick={handleClose}
             className="icon-btn text-2xl"
@@ -197,7 +199,9 @@ export default function InputModal({
         <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>
+              <span className="font-normal text-fg-secondary">
+                Bezeichnung:
+              </span>
             </div>
             <div>
               <input
@@ -209,7 +213,9 @@ export default function InputModal({
               />
             </div>
             <div>
-              <span className="font-normal text-fg-secondary">Invertierung:</span>
+              <span className="font-normal text-fg-secondary">
+                Invertierung:
+              </span>
             </div>
             <div className="flex items-center gap-2">
               <button
@@ -217,10 +223,14 @@ export default function InputModal({
                 role="switch"
                 aria-checked={invertiert}
                 onClick={() => setInvertiert(!invertiert)}
-                className={`relative inline-flex h-6 w-11 items-center rounded-full border border-base transition-colors duration-200 ${invertiert ? "bg-littwin-blue" : "bg-base-muted"}`}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full border border-base transition-colors duration-200 ${
+                  invertiert ? "bg-littwin-blue" : "bg-base-muted"
+                }`}
               >
                 <span
-                  className={`absolute left-1 top-1/2 -translate-y-1/2 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${invertiert ? "translate-x-5" : "translate-x-0"}`}
+                  className={`absolute left-1 top-1/2 -translate-y-1/2 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${
+                    invertiert ? "translate-x-5" : "translate-x-0"
+                  }`}
                 />
               </button>
               <span className="text-fg">{invertiert ? "Ein" : "Aus"}</span>
@@ -243,7 +253,9 @@ export default function InputModal({
                 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"
               />
-              <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-muted text-sm">ms</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>
@@ -265,7 +277,9 @@ export default function InputModal({
               />
             </div>
             <div className="relative group inline-block">
-              <span className="font-normal text-fg-secondary">Out of Service:</span>
+              <span className="font-normal text-fg-secondary">
+                Out of Service:
+              </span>
             </div>
             <div className="flex items-center gap-2">
               <button
@@ -273,10 +287,14 @@ export default function InputModal({
                 role="switch"
                 aria-checked={!!eingangOffline}
                 onClick={() => setEingangOffline(eingangOffline ? 0 : 1)}
-                className={`relative inline-flex h-6 w-11 items-center rounded-full border border-base transition-colors duration-200 ${eingangOffline ? "bg-littwin-blue" : "bg-base-muted"}`}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full border border-base transition-colors duration-200 ${
+                  eingangOffline ? "bg-littwin-blue" : "bg-base-muted"
+                }`}
               >
                 <span
-                  className={`absolute left-1 top-1/2 -translate-y-1/2 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${eingangOffline ? "translate-x-5" : "translate-x-0"}`}
+                  className={`absolute left-1 top-1/2 -translate-y-1/2 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${
+                    eingangOffline ? "translate-x-5" : "translate-x-0"
+                  }`}
                 />
               </button>
               <span className="text-fg">{eingangOffline ? "Ein" : "Aus"}</span>
diff --git a/components/main/digitalOutputs/DigitalOutputsWidget.tsx b/components/main/digitalOutputs/DigitalOutputsWidget.tsx
index f6c34c0..9b382af 100644
--- a/components/main/digitalOutputs/DigitalOutputsWidget.tsx
+++ b/components/main/digitalOutputs/DigitalOutputsWidget.tsx
@@ -108,15 +108,17 @@ export default function DigitalOutputsWidget({
                 {output.label}
               </td>
               <td className="px-1 py-1 bg-[var(--color-surface)] text-[var(--color-fg)]">
-                <Icon
-                  icon={switchIcon}
-                  className={`cursor-pointer text-base transition ${
-                    output.status
-                      ? "text-accent"
-                      : "text-[var(--color-muted)] scale-x-[-1]"
-                  } hover:text-accent`}
+                <button
+                  type="button"
+                  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"}`}
+                >
+                  <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"}`}
+                  />
+                </button>
               </td>
               <td className="px-1 py-1 bg-[var(--color-surface)] text-[var(--color-fg)]">
                 <Icon
diff --git a/package-lock.json b/package-lock.json
index 5f4f853..c899489 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.894",
+  "version": "1.6.895",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.894",
+      "version": "1.6.895",
       "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",
diff --git a/package.json b/package.json
index 44c96f9..a838521 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.894",
+  "version": "1.6.895",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",