style: AnalogInputsChartModal dark mode

2025-09-10 12:09:48 +02:00
parent 92b712d7ce
commit f2a5f2083a
7 changed files with 56 additions and 85 deletions
--- 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.897
+NEXT_PUBLIC_APP_VERSION=1.6.898
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

--- 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.897
+NEXT_PUBLIC_APP_VERSION=1.6.898
 NEXT_PUBLIC_CPL_MODE=production
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [1.6.898] – 2025-09-10
+
+- style: AnalogInputsSettingsModal dark mode
+
+---
 ## [1.6.897] – 2025-09-10

 - style: DigitalOutputsModal für dark mode
--- a/components/main/analogInputs/AnalogInputsChart.tsx
+++ b/components/main/analogInputs/AnalogInputsChart.tsx
@@ -367,9 +367,9 @@ export default function AnalogInputsChart({
    <div
      className={`flex flex-col gap-2 h-full ${loading ? "cursor-wait" : ""}`}
    >
-      <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
+      <div className="flex justify-between items-center p-2 rounded-lg space-x-2 bg-[var(--color-surface-alt)] border border-base">
        <div className="flex justify-start">
-          <Dialog.Title className="text-lg font-semibold text-gray-700">
+          <Dialog.Title className="text-lg font-semibold text-fg">
            Eingang {selectedId ?? "–"}
          </Dialog.Title>
        </div>
@@ -385,7 +385,7 @@ export default function AnalogInputsChart({
            {/* ✅ Zeitraum-Auswahl (Listbox nur lokal) */}
            <Listbox value={localZeitraum} onChange={setLocalZeitraum}>
              <div className="relative w-48">
-                <Listbox.Button className="w-full border px-3 py-1 rounded bg-white flex justify-between items-center text-sm">
+                <Listbox.Button className="w-full border border-base px-3 py-1 rounded bg-[var(--color-surface)] text-fg flex justify-between items-center text-sm">
                  <span>
                    {localZeitraum === "DIA0"
                      ? "Alle Messwerte"
@@ -393,14 +393,14 @@ export default function AnalogInputsChart({
                      ? "Stündlich"
                      : "Täglich"}
                  </span>
-                  <i className="bi bi-chevron-down text-gray-400" />
+                  <i className="bi bi-chevron-down text-[var(--color-muted)]" />
                </Listbox.Button>
-                <Listbox.Options className="absolute z-10 mt-1 w-full border bg-white shadow rounded text-sm">
+                <Listbox.Options className="absolute z-10 mt-1 w-full border border-base bg-[var(--color-surface)] shadow rounded text-sm">
                  {["DIA0", "DIA1", "DIA2"].map((option) => (
                    <Listbox.Option
                      key={option}
                      value={option}
-                      className="px-4 py-1 cursor-pointer hover:bg-gray-200"
+                      className="px-4 py-1 cursor-pointer hover:bg-[var(--color-surface-alt)] text-fg"
                    >
                      {option === "DIA0"
                        ? "Alle Messwerte"
@@ -416,7 +416,7 @@ export default function AnalogInputsChart({
            {/* ✅ Button: lädt die Daten & aktualisiert Redux */}
            <button
              onClick={handleFetchData}
-              className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
+              className="btn-primary px-4 py-1 rounded text-sm"
            >
              Daten laden
            </button>
@@ -427,11 +427,9 @@ export default function AnalogInputsChart({
      {/* Chart-Anzeige */}
      <div className="flex-1 min-h-0 w-full">
        {!selectedAnalogInput?.id ? (
-          <div className="flex items-center justify-center h-full text-gray-500 text-lg gap-2">
+          <div className="flex items-center justify-center h-full text-fg-secondary text-lg gap-2">
            <i className="bi bi-info-circle text-2xl mr-2" />
-            <span>
-              Bitte wählen Sie einen Eingang aus, um die Messkurve anzuzeigen
-            </span>
+            <span>Bitte Eingang auswählen</span>
          </div>
        ) : (
          <Line
--- a/components/main/analogInputs/AnalogInputsChartModal.tsx
+++ b/components/main/analogInputs/AnalogInputsChartModal.tsx
@@ -35,82 +35,50 @@ export default function AnalogInputsChartModal({
      <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
      {/* Centered panel */}
      <div className="fixed inset-0 flex items-center justify-center p-4">
-        <Dialog.Panel className="relative">
+        <Dialog.Panel className="relative outline-none">
          <div
-            className="bg-white rounded-xl shadow-xl border border-gray-200"
+            className={`rounded-xl shadow-xl border border-base bg-[var(--color-surface)] text-fg flex flex-col transition-all duration-300 overflow-hidden`}
            style={{
              width: isFullscreen ? "90vw" : "70rem",
-              height: isFullscreen ? "90vh" : "35rem",
-              padding: "1rem",
-              transition: "all 0.3s ease-in-out",
-              display: "flex",
-              flexDirection: "column",
+              height: isFullscreen ? "90vh" : "38rem",
            }}
          >
-            {/* Controls top-right (fullscreen + close) */}
-            <div
-              style={{
-                position: "absolute",
-                top: "0.625rem",
-                right: "0.625rem",
-                display: "flex",
-                gap: "0.75rem",
-              }}
-            >
-              <button
-                onClick={() => setIsFullscreen((v) => !v)}
-                style={{
-                  background: "transparent",
-                  border: "none",
-                  fontSize: "1.5rem",
-                  cursor: "pointer",
-                }}
-                title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
-                aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
-              >
-                <i
-                  className={
-                    isFullscreen
-                      ? "bi bi-fullscreen-exit"
-                      : "bi bi-arrows-fullscreen"
-                  }
-                ></i>
-              </button>
-              <button
-                onClick={() => dispatch(setIsChartModalOpen(false))}
-                style={{
-                  background: "transparent",
-                  border: "none",
-                  fontSize: "1.5rem",
-                  cursor: "pointer",
-                }}
-                title="Schließen"
-                aria-label="Modal schließen"
-              >
-                <i className="bi bi-x-circle-fill"></i>
-              </button>
-            </div>
-
-            {/* Title row (align like IsoChartView) */}
-            <div className="flex justify-between items-center mb-2 pr-24">
-              <Dialog.Title className="text-lg font-semibold text-gray-700">
+            {/* Header */}
+            <header className="flex items-center justify-between px-6 py-4 border-b border-base select-none">
+              <h2 className="text-base font-bold">
                Messkurve Messwerteingang {selectedId ?? "–"}
-              </Dialog.Title>
-            </div>
-
-            {/* Chart container (structure similar to IsoChartView) */}
-            <div
-              style={{
-                flex: 1,
-                display: "flex",
-                flexDirection: "column",
-                height: "90%",
-              }}
-            >
-              {/* Optional: place an action bar here if needed */}
-              <div style={{ flex: 1, height: "90%" }}>
-                <AnalogInputsChart loading={loading} setLoading={setLoading} />
+              </h2>
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={() => setIsFullscreen((v) => !v)}
+                  className="icon-btn text-xl"
+                  aria-label={isFullscreen ? "Vollbild verlassen" : "Vollbild"}
+                  type="button"
+                  title={isFullscreen ? "Vollbild verlassen" : "Vollbild"}
+                >
+                  <i
+                    className={
+                      isFullscreen
+                        ? "bi bi-fullscreen-exit"
+                        : "bi bi-arrows-fullscreen"
+                    }
+                  />
+                </button>
+                <button
+                  onClick={() => dispatch(setIsChartModalOpen(false))}
+                  className="icon-btn text-2xl"
+                  aria-label="Modal schließen"
+                  type="button"
+                  title="Schließen"
+                >
+                  <i className="bi bi-x-circle-fill" />
+                </button>
              </div>
+            </header>
+
+            {/* Body */}
+            <div className="flex-1 min-h-0 px-4 pt-3 pb-4 bg-[var(--color-surface)]">
+              <AnalogInputsChart loading={loading} setLoading={setLoading} />
            </div>
          </div>
        </Dialog.Panel>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.897",
+  "version": "1.6.898",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cpl-v4",
-      "version": "1.6.897",
+      "version": "1.6.898",
      "dependencies": {
        "@emotion/react": "^11.13.0",
        "@emotion/styled": "^11.13.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.897",
+  "version": "1.6.898",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3000",