x

apps/website/src/components/WishlistButton.tsx

@@ -1,4 +1,4 @@
-"use client";
+"use client"
 
 import { Heart } from 'lucide-react'
 import type { Product } from '@homaroma/types'
@@ -22,10 +22,10 @@ export default function WishlistButton({ product }: WishlistButtonProps) {
         toggleItem(product)
       }}
       aria-label={isInWishlist ? 'Remove from wishlist' : 'Add to wishlist'}
-      className={`absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-white/90 shadow-sm backdrop-blur transition hover:scale-105 ${
+      className={`absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-surface-card/90 shadow-sm backdrop-blur transition hover:scale-105 ${
         isInWishlist
           ? 'border-rose-200 text-rose-500'
-          : 'border-gray-200 text-pop-black hover:border-rose-200 hover:text-rose-500'
+          : 'border-line-primary/20 text-text-main hover:border-rose-200 hover:text-rose-500'
       }`}
     >
       <Heart className={`h-5 w-5 ${isInWishlist ? 'fill-current' : ''}`} />