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

style: dark mode Modal KÜ Einstellungen

Browse Source
This commit is contained in:
ISA
2025-09-08 15:38:55 +02:00
parent af21b180f1
commit 001b237dd7
6 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx
View File

@@ -69,14 +69,20 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
},
}}
>
<div className="p-2 flex justify-between items-center rounded-t-md">
<h2 className="text-base font-bold">Einstellungen KÜ {slot + 1}</h2>
<button onClick={onClose} className="text-2xl hover:text-gray-200">
<div className="p-2 flex justify-between items-center rounded-t-md bg-surface-alt border-b border-base">
<h2 className="text-base font-bold text-fg">
Einstellungen KÜ {slot + 1}
</h2>
<button
onClick={onClose}
className="text-2xl text-fg-muted hover:text-fg transition-colors focus:outline-none focus:ring-2 focus:ring-accent/50 rounded"
aria-label="Modal schließen"
>
<i className="bi bi-x-circle-fill"></i>
</button>
</div>
<div className="flex justify-start bg-gray-100 space-x-2 p-2">
<div className="flex justify-start bg-surface-alt space-x-2 p-2 border-b border-base">
{[
{ label: "Allgemein", key: "kue" as const },
{ label: "TDR ", key: "tdr" as const },
@@ -86,18 +92,17 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
<button
key={key}
onClick={() => setActiveTab(key)}
className={`px-4 py-1 rounded-t font-bold text-sm ${
className={`px-4 py-1 rounded-t font-semibold text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-accent/40 ${
activeTab === key
? "bg-white text-littwin-blue"
: "text-gray-500 hover:text-black"
? "bg-surface text-accent shadow-sm"
: "text-fg-muted hover:text-fg"
}`}
>
{label}
</button>
))}
</div>
<div className="p-4 bg-white rounded-b-md h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] overflow-y-auto">
<div className="p-4 bg-surface rounded-b-md h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] overflow-y-auto text-fg">
{activeTab === "kue" && (
<KueEinstellung
slot={slot}