Hartmut/Nexus
1
0
Fork 0
Code Issues 11 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): add dark mode variants to dashboard, layout, notification and chargeability components

Browse Source 
Add missing dark: class variants for backgrounds, borders, and text across
dashboard widgets, AppShell sidebar, notification cards, and the chargeability
report table. Replace hardcoded slate/gray hex values with CSS variable
references. Fix chargeability hover tint and remove ineffective sticky thead.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-04-10 09:20:50 +02:00
parent 2a91257e69
commit 9ba49c9ab8
9 changed files with 46 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/notifications/NotificationCenterClient.tsx
+2 -2
View File
@@ -245,7 +245,7 @@ export function NotificationCenterClient() {
if (isUnread) markRead.mutate({ id: n.id });
}}
className={`w-full text-left rounded-xl border border-gray-200 dark:border-gray-700 px-4 py-3 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 ${
isUnread ? "bg-blue-50/60 dark:bg-blue-900/10" : "bg-white dark:bg-gray-900/70"
isUnread ? "bg-blue-50/60 dark:bg-blue-900/10" : "bg-white dark:bg-[rgb(var(--surface-elevated))]"
}`}
>
<div className="flex items-start gap-2">
@@ -320,7 +320,7 @@ export function NotificationCenterClient() {
reminders.map((r) => (
<div
key={r.id}
className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/70 px-4 py-3"
className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-[rgb(var(--surface-elevated))] px-4 py-3"
>
<div className="flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
apps/web/src/components/notifications/TaskCard.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export function TaskCard({ task, onStatusChange, compact }: TaskCardProps) {
);
return (
<div className={`rounded-xl border border-gray-200 dark:border-gray-700 ${isDone ? "bg-gray-50 dark:bg-gray-900/40" : "bg-white dark:bg-gray-900/70"} ${compact ? "p-3" : "p-4"} transition-colors`}>
<div className={`rounded-xl border border-gray-200 dark:border-gray-700 ${isDone ? "bg-gray-50 dark:bg-[rgb(var(--surface-card)/0.5)]" : "bg-white dark:bg-[rgb(var(--surface-elevated))]"} ${compact ? "p-3" : "p-4"} transition-colors`}>
{/* Header row */}
<div className="flex items-start gap-2">
<div className="flex-1 min-w-0">