mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-08 15:11:21 +02:00
maziggy
1d344a8536
The app was built dark-first, so hundreds of hardcoded Tailwind semantic text/icon utilities at light shades (text-amber-400, text-blue-300, ...) had no dark: variant. With darkMode:'class' they applied in light theme too, producing washed-out text on pale tints and white cards — including the three reported spots (AMS Drying banner, Archives no-3MF warning, debug-logging banner). Give each a theme-aware pair: a darker readable shade in light theme with the original pinned to dark:, so dark theme is unchanged. ~100 files. The bambu-* CSS-variable palette (self-correcting) and the dark-only SpoolBuddy kiosk are left untouched. Plain text-white is already theme-aware via the existing index.css .text-white override, so it needed no changes.
47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
import { Play, Clock, Timer, Weight, CheckCircle } from 'lucide-react';
|
|
import { formatDuration } from '../utils/date';
|
|
|
|
function formatWeight(g: number): string {
|
|
if (g >= 1000) return `${(g / 1000).toFixed(1)}kg`;
|
|
return `${Math.round(g)}g`;
|
|
}
|
|
|
|
export function QueueStatsBar({
|
|
activeCount,
|
|
pendingCount,
|
|
totalTime,
|
|
totalWeight,
|
|
historyCount,
|
|
t,
|
|
}: {
|
|
activeCount: number;
|
|
pendingCount: number;
|
|
totalTime: number;
|
|
totalWeight: number;
|
|
historyCount: number;
|
|
t: (key: string) => string;
|
|
}) {
|
|
const stats = [
|
|
{ icon: Play, value: activeCount, label: t('queue.summary.printing'), color: 'text-blue-600 dark:text-blue-400' },
|
|
{ icon: Clock, value: pendingCount, label: t('queue.summary.queued'), color: 'text-yellow-600 dark:text-yellow-400' },
|
|
{ icon: Timer, value: formatDuration(totalTime), label: t('queue.summary.totalTime'), color: 'text-bambu-green' },
|
|
{ icon: Weight, value: formatWeight(totalWeight), label: t('queue.summary.totalWeight'), color: 'text-purple-600 dark:text-purple-400' },
|
|
{ icon: CheckCircle, value: historyCount, label: t('queue.summary.history'), color: 'text-bambu-gray' },
|
|
];
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 sm:gap-5 flex-wrap px-4 py-3 bg-bambu-dark-secondary rounded-xl border border-bambu-dark-tertiary mb-6">
|
|
{stats.map((stat, i) => (
|
|
<div key={i} className="flex items-center gap-3">
|
|
{i > 0 && <span className="hidden sm:block text-bambu-dark-tertiary">|</span>}
|
|
<div className="flex items-center gap-1.5">
|
|
<stat.icon className={`w-4 h-4 ${stat.color}`} />
|
|
<span className="text-sm font-semibold text-white">{stat.value}</span>
|
|
<span className="text-xs sm:text-sm text-bambu-gray">{stat.label}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|