kjanat/livedash-node
1
0
Fork 0
mirror of https://github.com/kjanat/livedash-node.git synced 2026-01-16 12:12:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve dark mode compatibility and chart visibility

Browse Source 
- Fix TopQuestionsChart with proper dark mode colors using CSS variables and shadcn/ui components
- Enhance ResponseTimeDistribution with thicker bars (maxBarSize: 60)
- Replace GeographicMap with dark/light mode compatible CartoDB tiles
- Add custom text selection background color with primary theme color
- Update all loading states to use proper CSS variables instead of hardcoded colors
- Fix dashboard layout background to use bg-background instead of bg-gray-100
This commit is contained in:
Kaj Kowalski
2025-06-28 04:19:39 +02:00
parent e027dc9565
commit 2a033fe639
38 changed files with 2597 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/dashboard/layout.tsx
View File

@ -57,7 +57,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
}
return (
<div className="flex h-screen bg-gray-100">
<div className="flex h-screen bg-background">
<Sidebar
isExpanded={isSidebarExpanded}
isMobile={isMobile}

43
app/dashboard/page.tsx
View File

@ -36,8 +36,11 @@ const DashboardPage: FC = () => {
return (
<div className="flex items-center justify-center min-h-[60vh]">
<div className="text-center space-y-4">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
<p className="text-lg text-muted-foreground">Loading dashboard...</p>
<div className="relative">
<div className="animate-spin rounded-full h-12 w-12 border-2 border-muted border-t-primary mx-auto"></div>
<div className="absolute inset-0 animate-ping rounded-full h-12 w-12 border border-primary opacity-20 mx-auto"></div>
</div>
<p className="text-lg text-muted-foreground animate-pulse">Loading dashboard...</p>
</div>
</div>
);
@ -121,39 +124,39 @@ const DashboardPage: FC = () => {
return (
<div className="space-y-8">
{/* Welcome Header */}
<Card className="border-0 bg-linear-to-r from-primary/5 via-primary/10 to-primary/5">
<CardHeader>
<div className="relative overflow-hidden rounded-xl bg-linear-to-r from-primary/10 via-primary/5 to-transparent p-8 border border-primary/10">
<div className="absolute inset-0 bg-linear-to-br from-primary/5 to-transparent" />
<div className="absolute -top-24 -right-24 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
<div className="relative">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div className="space-y-2">
<div className="space-y-3">
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold tracking-tight">
<h1 className="text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-linear-to-r from-foreground to-foreground/70">
Welcome back, {session?.user?.name || "User"}!
</h1>
<Badge variant="secondary" className="text-xs">
<Badge variant="secondary" className="text-xs px-3 py-1 bg-primary/10 text-primary border-primary/20">
{session?.user?.role}
</Badge>
</div>
<p className="text-muted-foreground">
<p className="text-muted-foreground text-lg">
Choose a section below to explore your analytics dashboard
</p>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 text-sm text-muted-foreground">
<Shield className="h-4 w-4" />
Secure Dashboard
</div>
<div className="flex items-center gap-3 px-4 py-2 rounded-full bg-muted/50 backdrop-blur-sm">
<Shield className="h-4 w-4 text-green-600" />
<span className="text-sm font-medium">Secure Dashboard</span>
</div>
</div>
</CardHeader>
</Card>
</div>
</div>
{/* Navigation Cards */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{navigationCards.map((card, index) => (
<Card
key={index}
className={`relative overflow-hidden transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 cursor-pointer ${getCardClasses(
className={`relative overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group ${getCardClasses(
card.variant
)}`}
onClick={() => router.push(card.href)}
@ -166,11 +169,11 @@ const DashboardPage: FC = () => {
<div className="space-y-3">
<div className="flex items-center gap-3">
<div
className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-full border transition-colors ${getIconClasses(
className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-full border transition-all duration-300 group-hover:scale-110 ${getIconClasses(
card.variant
)}`}
>
{card.icon}
<span className="transition-transform duration-300 group-hover:scale-110">{card.icon}</span>
</div>
<div>
<CardTitle className="text-xl font-semibold flex items-center gap-2">
@ -198,7 +201,7 @@ const DashboardPage: FC = () => {
key={featureIndex}
className="flex items-center gap-2 text-sm"
>
<div className="h-1.5 w-1.5 rounded-full bg-current opacity-60" />
<Zap className="h-3 w-3 text-primary/60" />
<span className="text-muted-foreground">{feature}</span>
</div>
))}
@ -206,7 +209,7 @@ const DashboardPage: FC = () => {
{/* Action Button */}
<Button
className="w-full gap-2 mt-4"
className="w-full gap-2 mt-4 group-hover:gap-3 transition-all duration-300"
variant={card.variant === "primary" ? "default" : "outline"}
onClick={(e) => {
e.stopPropagation();