Schaltausgänge Modal

components/main/einausgaenge/modals/DigitalOutputsModal.tsx

@@ -69,14 +69,16 @@ export default function DigitalOutputsModal({
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
-      <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
-        <h2 className="text-xl font-bold mb-4 text-littwin-blue">
-          Ausgang {selectedOutput.id} – Konfiguration
+    <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">
+        <h2 className="text-base font-bold  mb-4 border-b pb-2">
+          Einstellungen Schaltausgang {selectedOutput.id}
         </h2>
 
-        <div className="mb-4">
-          <label className="block font-semibold mb-1">Bezeichnung</label>
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+          <div>
+            <span className="font-normal">Bezeichnung:</span>
+          </div>
           <input
             type="text"
             value={label}
@@ -86,32 +88,20 @@ export default function DigitalOutputsModal({
           />
         </div>
 
-        <div className="mb-4 flex items-center justify-between">
-          <label className="font-semibold">Status</label>
-          <button
-            onClick={() => setStatus(!status)}
-            className={`px-3 py-1 rounded text-white font-medium ${
-              status ? "bg-green-600" : "bg-gray-400"
-            }`}
-          >
-            {status ? "EIN" : "AUS"}
-          </button>
-        </div>
-
         {errorMsg && <p className="text-red-600 text-sm mb-2">{errorMsg}</p>}
 
         <div className="flex justify-end gap-2 mt-6">
           <button
             onClick={closeOutputModal}
             disabled={isSaving}
-            className="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400"
+            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
           >
-            Abbrechen
+            Schließen
           </button>
           <button
             onClick={handleSave}
             disabled={isSaving}
-            className="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white"
+            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
           >
             {isSaving ? "Speichern..." : "Speichern"}
           </button>