bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Complete dark mode support for all dashboard components

Browse Source 
- OrchestrationSummaryCard: Full dark mode support with CSS variables
- InsightsGrid: Replace Tailwind classes with theme-aware CSS variables
- All dashboard components now properly adapt to light/dark themes
- Skeleton loaders use theme colors for seamless transitions
- ProductionTimelineCard filters for today's PENDING/ON_HOLD batches

All dashboard components now use CSS variables exclusively for colors,
ensuring proper theme adaptation and consistent user experience across
light and dark modes.
This commit is contained in:
Claude
2025-11-08 07:29:18 +00:00
parent 09e21d0967
commit fbb76ecc02
2 changed files with 92 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/dashboard/InsightsGrid.tsx
View File

@@ -18,22 +18,22 @@ interface InsightsGridProps {
const colorConfig = {
green: {
bg: 'bg-green-50',
border: 'border-green-200',
text: 'text-green-800',
detail: 'text-green-600',
bgColor: 'var(--color-success-50)',
borderColor: 'var(--color-success-200)',
textColor: 'var(--color-success-800)',
detailColor: 'var(--color-success-600)',
},
amber: {
bg: 'bg-amber-50',
border: 'border-amber-200',
text: 'text-amber-900',
detail: 'text-amber-600',
bgColor: 'var(--color-warning-50)',
borderColor: 'var(--color-warning-200)',
textColor: 'var(--color-warning-900)',
detailColor: 'var(--color-warning-600)',
},
red: {
bg: 'bg-red-50',
border: 'border-red-200',
text: 'text-red-900',
detail: 'text-red-600',
bgColor: 'var(--color-error-50)',
borderColor: 'var(--color-error-200)',
textColor: 'var(--color-error-900)',
detailColor: 'var(--color-error-600)',
},
};
@@ -52,16 +52,20 @@ function InsightCard({
return (
<div
className={`${config.bg} ${config.border} border-2 rounded-xl p-4 md:p-6 transition-all duration-200 hover:shadow-lg cursor-pointer`}
className="border-2 rounded-xl p-4 md:p-6 transition-all duration-200 hover:shadow-lg cursor-pointer"
style={{
backgroundColor: config.bgColor,
borderColor: config.borderColor,
}}
>
{/* Label */}
<div className="text-sm md:text-base font-bold text-gray-700 mb-2">{label}</div>
<div className="text-sm md:text-base font-bold mb-2" style={{ color: 'var(--text-primary)' }}>{label}</div>
{/* Value */}
<div className={`text-xl md:text-2xl font-bold ${config.text} mb-1`}>{value}</div>
<div className="text-xl md:text-2xl font-bold mb-1" style={{ color: config.textColor }}>{value}</div>
{/* Detail */}
<div className={`text-sm ${config.detail} font-medium`}>{detail}</div>
<div className="text-sm font-medium" style={{ color: config.detailColor }}>{detail}</div>
</div>
);
}
@@ -71,10 +75,10 @@ export function InsightsGrid({ insights, loading }: InsightsGridProps) {
return (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="animate-pulse bg-gray-100 rounded-xl p-6">
<div className="h-4 bg-gray-200 rounded w-1/2 mb-3"></div>
<div className="h-8 bg-gray-200 rounded w-3/4 mb-2"></div>
<div className="h-4 bg-gray-200 rounded w-2/3"></div>
<div key={i} className="animate-pulse rounded-xl p-6" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
<div className="h-4 rounded w-1/2 mb-3" style={{ backgroundColor: 'var(--bg-quaternary)' }}></div>
<div className="h-8 rounded w-3/4 mb-2" style={{ backgroundColor: 'var(--bg-quaternary)' }}></div>
<div className="h-4 rounded w-2/3" style={{ backgroundColor: 'var(--bg-quaternary)' }}></div>
</div>
))}
</div>