Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Detailansicht Modal dark mode

Browse Source
This commit is contained in:
ISA
2025-09-10 12:25:40 +02:00
parent f2a5f2083a
commit 41910e450e
7 changed files with 88 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/main/system/SystemChartActionBar.tsx
View File

@@ -30,7 +30,7 @@ const SystemChartActionBar: React.FC<Props> = ({
<label className="font-medium text-sm">Zeitraum:</label>
<Listbox value={zeitraum} onChange={setZeitraum}>
<div className="relative w-48">
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
<Listbox.Button className="w-full border border-base px-3 py-1 rounded text-left bg-[var(--color-surface-alt)] text-fg flex justify-between items-center text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)]/40 transition">
<span>
{
{ DIA0: "Alle Messwerte", DIA1: "Stündlich", DIA2: "Täglich" }[
@@ -39,7 +39,7 @@ const SystemChartActionBar: React.FC<Props> = ({
}
</span>
<svg
className="w-5 h-5 text-gray-400"
className="w-5 h-5 text-[var(--color-fg-muted)]"
viewBox="0 0 20 20"
fill="currentColor"
>
@@ -50,20 +50,18 @@ const SystemChartActionBar: React.FC<Props> = ({
/>
</svg>
</Listbox.Button>
<Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
<Listbox.Options className="absolute z-50 mt-1 w-full border border-base rounded bg-[var(--color-surface)] text-fg shadow-lg max-h-60 overflow-auto text-sm focus:outline-none">
{["DIA0", "DIA1", "DIA2"].map((option) => (
<Listbox.Option
key={option}
value={option}
className={({ selected, active }) =>
`px-4 py-1 cursor-pointer ${
selected
? "bg-littwin-blue text-white"
: active
? "bg-gray-200"
: ""
}`
}
className={({ selected, active }) => {
const base = "px-4 py-1 cursor-pointer text-sm";
if (selected) return `${base} bg-littwin-blue text-white`; // selected highlight
if (active)
return `${base} bg-[var(--color-surface-alt)] text-fg`;
return `${base} text-fg`;
}}
>
{
{