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

WIP: dark mode Berichte

Browse Source
This commit is contained in:
ISA
2025-09-08 15:22:06 +02:00
parent 27c60c6742
commit fefff9419d
7 changed files with 25 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/main/kabelueberwachung/KabelueberwachungView.tsx
View File

@@ -129,7 +129,7 @@ function KabelueberwachungView() {
className={`mr-2 px-2 py-1 rounded-sm text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent/50 ${
isActive
? "btn-primary"
: "btn-muted text-fg-muted hover:text-fg"
: "btn-muted text-fg opacity-90 hover:opacity-100"
}`}
>
Rack {rack}

44
components/main/reports/MeldungenTabelle.tsx
View File

@@ -14,39 +14,29 @@ export default function MeldungenTabelle({
}) {
return (
<div className="overflow-auto max-h-[80vh]">
<table className="min-w-full border">
<thead className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 text-left sticky top-0 z-10">
<table className="min-w-full border border-base table-surface text-fg">
<thead className="text-left sticky top-0 z-10 bg-surface-alt/90 backdrop-blur supports-[backdrop-filter]:bg-surface-alt/70">
<tr>
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Prio
</th>
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Zeitstempel
</th>
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Quelle
</th>
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Meldung
</th>
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Status
</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Prio</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Zeitstempel</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Quelle</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Meldung</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Status</th>
</tr>
</thead>
<tbody>
{messages.map((msg, index) => (
<tr
key={index}
className="hover:bg-gray-100 dark:hover:bg-gray-700"
className="transition-colors hover:bg-surface-alt/60"
>
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<td className="border border-base p-2 bg-surface text-fg">
<div
className="w-4 h-4 rounded"
style={{ backgroundColor: msg.c }}
></div>
</td>
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<td className="border border-base p-2 bg-surface text-fg">
{new Date(msg.t).toLocaleString("de-DE", {
day: "2-digit",
month: "2-digit",
@@ -56,21 +46,15 @@ export default function MeldungenTabelle({
second: "2-digit",
})}
</td>
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{msg.i}
</td>
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{msg.m}
</td>
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{msg.v}
</td>
<td className="border border-base p-2 bg-surface text-fg">{msg.i}</td>
<td className="border border-base p-2 bg-surface text-fg">{msg.m}</td>
<td className="border border-base p-2 bg-surface text-fg">{msg.v}</td>
</tr>
))}
</tbody>
</table>
{messages.length === 0 && (
<div className="mt-4 text-center text-gray-500 italic">
<div className="mt-4 text-center text-fg-muted italic">
Keine Meldungen im gewählten Zeitraum vorhanden.
</div>
)}