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/layout/AppShell.tsx
+7 -3
View File
@@ -17,9 +17,13 @@ import { NavProgressBar } from "~/components/ui/NavProgressBar.js";
const SIDEBAR_COLLAPSED_KEY = "capakraken_sidebar_collapsed";
function IconFrame({ children }: { children: ReactNode }) {
function IconFrame({ children, isActive }: { children: ReactNode; isActive?: boolean }) {
return (
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-white/60 bg-white/80 text-slate-600 shadow-sm transition-shadow duration-200 hover:shadow-[0_0_12px_rgba(var(--accent-500),0.15)] dark:border-slate-800 dark:bg-slate-900/70 dark:text-slate-300">
<span className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border shadow-sm transition-all duration-200 ${
isActive
? "border-[rgb(var(--accent-300))] bg-[rgb(var(--accent-50))] text-[rgb(var(--accent-600))] shadow-[0_0_10px_rgba(var(--accent-500),0.2)] dark:border-[rgb(var(--accent-700))] dark:bg-[rgb(var(--accent-500)/0.15)] dark:text-[rgb(var(--accent-300))]"
: "border-white/60 bg-white/80 text-slate-600 hover:shadow-[0_0_12px_rgba(var(--accent-500),0.15)] dark:border-gray-700/80 dark:bg-gray-800/70 dark:text-gray-400"
}`}>
{children}
</span>
);
@@ -348,7 +352,7 @@ const NavItemLink = memo(function NavItemLink({
transition={{ type: "spring", stiffness: 350, damping: 30 }}
/>
)}
<IconFrame>{icon}</IconFrame>
<IconFrame isActive={isActive}>{icon}</IconFrame>
{!collapsed && <span className="relative flex-1">{label}</span>}
</Link>
</NavTooltip>