style: AnalogInputsChartModal dark mode

This commit is contained in:
ISA
2025-09-10 12:09:48 +02:00
parent 92b712d7ce
commit f2a5f2083a
7 changed files with 56 additions and 85 deletions

View File

@@ -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