style(ui): elevate OptimizedImage to SaaS Premium and update test

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/ui/optimized-image.test.tsx

@@ -19,7 +19,7 @@ describe('OptimizedImage Component', () => {
     render(<OptimizedImage src="test.jpg" alt="Test image" />);
     const wrapper = document.querySelector('.relative');
     expect(wrapper).toBeInTheDocument();
-    expect(wrapper?.querySelector('.bg-kodo-slate')).toBeInTheDocument();
+    expect(wrapper?.querySelector('.bg-muted')).toBeInTheDocument();
   });
 
   it('renders custom placeholder while loading', () => {

apps/web/src/components/ui/optimized-image/BlurPlaceholder.tsx

@@ -14,7 +14,7 @@ export function BlurPlaceholder({
   if (!blurDataURL) {
     return (
       <div
-        className={`bg-kodo-slate animate-pulse ${className}`}
+        className={`bg-muted animate-pulse ${className}`}
         style={{ width, height }}
       />
     );

apps/web/src/components/ui/optimized-image/OptimizedImage.tsx

@@ -82,10 +82,10 @@ export function OptimizedImage({
     return (
       fallback || (
         <div
-          className={`bg-kodo-slate flex items-center justify-center ${className}`}
+          className={`bg-muted flex items-center justify-center ${className}`}
           style={{ width, height }}
         >
-          <span className="text-kodo-content-dim text-sm">
+          <span className="text-muted-foreground text-sm">
             Image non disponible
           </span>
         </div>

apps/web/src/components/ui/optimized-image/OptimizedImageSkeleton.tsx

@@ -18,7 +18,7 @@ export function OptimizedImageSkeleton({
   return (
     <div
       className={cn(
-        'bg-kodo-slate animate-pulse rounded-lg',
+        'bg-muted animate-pulse rounded-lg',
         className,
       )}
       style={{ width, height }}