mirror of
https://github.com/jhbruhn/respira.git
synced 2026-01-27 10:23:41 +00:00
621de91bc8
- Fixed CSS variable format by wrapping HSL values in hsl() function - Removed double hsl() wrapping in @theme section (now uses var() directly) - Switched dark mode card background to OKLCH for better perceptual uniformity - Improved dark mode border visibility (17.5% → 37.5% lightness) - Improved dark mode input visibility (17.5% → 47.5% lightness) - Changed app background from gray-300 to gray-100 for cleaner appearance - Enhanced PatternCanvasPlaceholder to match PatternCanvas styling with icon and description These changes ensure shadcn components use colors correctly and improve overall dark mode readability. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
94 lines
4.1 KiB
TypeScript
94 lines
4.1 KiB
TypeScript
import {
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardContent,
|
|
CardDescription,
|
|
} from "@/components/ui/card";
|
|
import { PhotoIcon } from "@heroicons/react/24/solid";
|
|
|
|
export function PatternCanvasPlaceholder() {
|
|
return (
|
|
<Card
|
|
className={`p-0 gap-0 lg:h-full flex flex-col border-l-4 border-gray-400 dark:border-gray-600`}
|
|
>
|
|
<CardHeader className="p-4 pb-3">
|
|
<div className="flex items-start gap-3">
|
|
<PhotoIcon
|
|
className={`w-6 h-6 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5`}
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<CardTitle className="text-sm">Pattern Preview</CardTitle>
|
|
<CardDescription className="text-xs">
|
|
No pattern loaded
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-6 flex-1 flex flex-col">
|
|
<div className="h-[400px] sm:h-[500px] lg:flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 relative overflow-hidden">
|
|
{/* Decorative background pattern */}
|
|
<div className="absolute inset-0 opacity-5 dark:opacity-10">
|
|
<div className="absolute top-10 left-10 w-32 h-32 border-4 border-gray-400 dark:border-gray-500 rounded-full"></div>
|
|
<div className="absolute bottom-10 right-10 w-40 h-40 border-4 border-gray-400 dark:border-gray-500 rounded-full"></div>
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-48 h-48 border-4 border-gray-400 dark:border-gray-500 rounded-full"></div>
|
|
</div>
|
|
|
|
<div className="text-center relative z-10">
|
|
<div className="relative inline-block mb-6">
|
|
<svg
|
|
className="w-28 h-28 mx-auto text-gray-300 dark:text-gray-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={1.5}
|
|
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
<div className="absolute -top-2 -right-2 w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
|
|
<svg
|
|
className="w-5 h-5 text-primary-600 dark:text-primary-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 4v16m8-8H4"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-gray-700 dark:text-gray-200 text-base lg:text-lg font-semibold mb-2">
|
|
No Pattern Loaded
|
|
</h3>
|
|
<p className="text-gray-500 dark:text-gray-400 text-sm mb-4 max-w-sm mx-auto">
|
|
Connect to your machine and choose a PES embroidery file to see
|
|
your design preview
|
|
</p>
|
|
<div className="flex items-center justify-center gap-6 text-xs text-gray-400 dark:text-gray-500">
|
|
<div className="flex items-center gap-1">
|
|
<div className="w-2 h-2 bg-primary-400 dark:bg-primary-500 rounded-full"></div>
|
|
<span>Drag to Position</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<div className="w-2 h-2 bg-success-400 dark:bg-success-500 rounded-full"></div>
|
|
<span>Zoom & Pan</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<div className="w-2 h-2 bg-accent-400 dark:bg-accent-500 rounded-full"></div>
|
|
<span>Real-time Preview</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|