style: Digitale Ausgänge Switch

.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)
 

.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

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

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>

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
+                <button
-                  icon={switchIcon}
+                  type="button"
-                  className={`cursor-pointer text-base transition ${
+                  role="switch"
-                    output.status
+                  aria-checked={output.status}
-                      ? "text-accent"
-                      : "text-[var(--color-muted)] scale-x-[-1]"
-                  } hover:text-accent`}
                   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

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",

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",