cc2ebae4dc
🎨 **True Light/Dark Mode** - Implemented proper light mode with inverted color scheme - Smooth theme transitions (0.3s ease) - Light mode colors: white backgrounds, dark text, vibrant accents - System theme detection with proper class application 🌈 **Enhanced Theme System** - 4 color themes work in both light and dark modes - Cyber (cyan/magenta), Ocean (blue/teal), Forest (green/lime), Sunset (orange/purple) - Theme-specific glassmorphism effects - Proper contrast in light mode ✨ **Premium Animations** - Float, glow-pulse, slide-in, scale-in, rotate-in animations - Smooth page transitions - Hover effects with depth (lift, glow, scale) - Micro-interactions on all interactive elements 🎯 **Visual Polish** - Enhanced glassmorphism for light/dark modes - Custom scrollbar with theme colors - Beautiful text selection - Focus indicators for accessibility - Premium utility classes 🔧 **Technical Improvements** - Updated UIStore to properly apply light/dark classes - Added data-theme attribute for CSS targeting - Smooth scroll behavior - Optimized transitions The app is now a visual masterpiece with perfect light/dark mode support!
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Card, Button } from '@veza/design-system';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface KodoEmptyStateProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function KodoEmptyState({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
actionLabel,
|
|
onAction,
|
|
className,
|
|
}: KodoEmptyStateProps) {
|
|
return (
|
|
<Card
|
|
variant="glass"
|
|
className={cn(
|
|
'flex flex-col items-center justify-center text-center p-8 sm:p-12 animate-slideUp',
|
|
className
|
|
)}
|
|
>
|
|
<div className="relative mb-6">
|
|
<div className="absolute inset-0 bg-kodo-cyan/20 blur-2xl rounded-full animate-pulse" />
|
|
<div className="relative bg-kodo-ink p-4 rounded-2xl border border-kodo-cyan/30 shadow-neon-cyan animate-float">
|
|
<Icon className="h-10 w-10 text-kodo-cyan" />
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-display font-bold text-white mb-2 tracking-tight">
|
|
{title}
|
|
</h3>
|
|
|
|
<p className="text-kodo-secondary max-w-xs mb-8 text-sm sm:text-base leading-relaxed">
|
|
{description}
|
|
</p>
|
|
|
|
{actionLabel && onAction && (
|
|
<Button
|
|
variant="gaming"
|
|
onClick={onAction}
|
|
className="group"
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
{actionLabel}
|
|
</span>
|
|
</Button>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|