From 5e3b37288d96277a6eacb7d6464760b63f72874a Mon Sep 17 00:00:00 2001
From: Biswa Kalyan Bhuyan <biswa@surgot.in>
Date: Wed, 28 May 2025 19:44:26 +0530
Subject: feat: improved UI and added dynamic theme toggle

- improved the nav bar components
- added the theme toggle button to toggle theme
- fixed the button background for the nav bar
- fixed the theme color issue to the ThemeToggle funtion
- added more vibrant colors
- fixed the theme logo render
---
 frontend/src/components/product-card.tsx | 52 ++++++++++++++++----------------
 1 file changed, 26 insertions(+), 26 deletions(-)

(limited to 'frontend/src/components/product-card.tsx')

diff --git a/frontend/src/components/product-card.tsx b/frontend/src/components/product-card.tsx
index f790c98..25717f4 100644
--- a/frontend/src/components/product-card.tsx
+++ b/frontend/src/components/product-card.tsx
@@ -71,16 +71,16 @@ export function ProductCard({
 
   return (
     <Card 
-      className="group relative overflow-hidden border-0 shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer"
+      className="group relative overflow-hidden border-0 shadow-sm hover:shadow-xl dark:shadow-black/30 dark:hover:shadow-black/50 transition-all duration-300 cursor-pointer bg-white dark:bg-neutral-900"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       <Link href={`/product/${id}`}>
         <div className="relative overflow-hidden">
           {/* Product Image */}
-          <div className="aspect-[3/4] bg-neutral-100 relative overflow-hidden">
+          <div className="aspect-[3/4] bg-neutral-100 dark:bg-neutral-800 relative overflow-hidden">
             <div 
-              className="w-full h-full bg-gradient-to-br from-neutral-200 to-neutral-300 flex items-center justify-center transition-transform duration-300 group-hover:scale-105"
+              className="w-full h-full bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800 flex items-center justify-center transition-transform duration-300 group-hover:scale-105"
               style={{
                 backgroundImage: `url(${allImages[currentImage]})`,
                 backgroundSize: 'cover',
@@ -88,9 +88,9 @@ export function ProductCard({
               }}
             >
               {/* Placeholder for actual images */}
-              <div className="text-center text-neutral-500">
-                <div className="w-16 h-16 bg-neutral-400 rounded-full mx-auto mb-2 flex items-center justify-center">
-                  <ShoppingBag className="w-8 h-8 text-white" />
+              <div className="text-center text-neutral-500 dark:text-neutral-400">
+                <div className="w-16 h-16 bg-neutral-400 dark:bg-neutral-700 rounded-full mx-auto mb-2 flex items-center justify-center">
+                  <ShoppingBag className="w-8 h-8 text-white dark:text-neutral-300" />
                 </div>
                 <p className="text-sm font-medium">{name}</p>
               </div>
@@ -99,12 +99,12 @@ export function ProductCard({
             {/* Badges */}
             <div className="absolute top-3 left-3 flex flex-col gap-2">
               {isNew && (
-                <Badge className="bg-blue-500 hover:bg-blue-600 text-white">
+                <Badge className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white shadow-lg">
                   New
                 </Badge>
               )}
               {isSale && (
-                <Badge className="bg-red-500 hover:bg-red-600 text-white">
+                <Badge className="bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white shadow-lg">
                   -{discountPercentage}%
                 </Badge>
               )}
@@ -114,11 +114,11 @@ export function ProductCard({
             <Button
               variant="ghost"
               size="icon"
-              className="absolute top-3 right-3 bg-white/80 hover:bg-white text-gray-600 hover:text-red-500 transition-colors"
+              className="absolute top-3 right-3 bg-white/90 dark:bg-neutral-900/90 hover:bg-white dark:hover:bg-neutral-900 text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors shadow-lg dark:shadow-black/20"
               onClick={handleWishlistToggle}
             >
               <Heart 
-                className={`h-4 w-4 ${wishlisted ? 'fill-red-500 text-red-500' : ''}`} 
+                className={`h-4 w-4 ${wishlisted ? 'fill-red-500 text-red-500 dark:fill-red-400 dark:text-red-400' : ''}`} 
               />
             </Button>
 
@@ -129,7 +129,7 @@ export function ProductCard({
                   <button
                     key={index}
                     className={`w-2 h-2 rounded-full transition-colors ${
-                      index === currentImage ? 'bg-white' : 'bg-white/50'
+                      index === currentImage ? 'bg-white dark:bg-neutral-300' : 'bg-white/50 dark:bg-neutral-500/50'
                     }`}
                     onClick={(e) => {
                       e.preventDefault();
@@ -142,7 +142,7 @@ export function ProductCard({
             )}
 
             {/* Hover overlay with actions */}
-            <div className={`absolute inset-0 bg-black/20 flex items-center justify-center transition-opacity duration-300 ${
+            <div className={`absolute inset-0 bg-black/30 dark:bg-black/50 flex items-center justify-center transition-opacity duration-300 ${
               isHovered ? 'opacity-100' : 'opacity-0'
             }`}>
               <div className="flex gap-3">
@@ -150,7 +150,7 @@ export function ProductCard({
                   variant="secondary"
                   size="sm"
                   onClick={handleQuickView}
-                  className="bg-white/90 hover:bg-white text-gray-900"
+                  className="bg-white/95 dark:bg-neutral-900/95 hover:bg-white dark:hover:bg-neutral-900 text-gray-900 dark:text-white shadow-lg dark:shadow-black/20"
                 >
                   <Eye className="h-4 w-4 mr-2" />
                   Quick View
@@ -158,7 +158,7 @@ export function ProductCard({
                 <Button
                   size="sm"
                   onClick={handleAddToCart}
-                  className="bg-primary hover:bg-primary/90"
+                  className="bg-primary hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/90 shadow-lg dark:shadow-black/20"
                 >
                   <ShoppingBag className="h-4 w-4 mr-2" />
                   Add to Cart
@@ -168,14 +168,14 @@ export function ProductCard({
           </div>
 
           {/* Product Info */}
-          <CardContent className="p-4 space-y-3">
+          <CardContent className="p-4 space-y-3 bg-white dark:bg-neutral-900">
             {/* Category */}
-            <p className="text-xs text-muted-foreground uppercase tracking-wide">
+            <p className="text-xs text-muted-foreground dark:text-neutral-500 uppercase tracking-wide">
               {category}
             </p>
 
             {/* Product Name */}
-            <h3 className="font-semibold text-sm leading-tight line-clamp-2 group-hover:text-primary transition-colors">
+            <h3 className="font-semibold text-sm leading-tight line-clamp-2 group-hover:text-primary dark:group-hover:text-primary transition-colors text-foreground dark:text-neutral-100">
               {name}
             </h3>
 
@@ -187,13 +187,13 @@ export function ProductCard({
                     key={star}
                     className={`h-3 w-3 ${
                       star <= rating
-                        ? 'fill-yellow-400 text-yellow-400'
-                        : 'text-gray-300'
+                        ? 'fill-yellow-400 text-yellow-400 dark:fill-yellow-500 dark:text-yellow-500'
+                        : 'text-gray-300 dark:text-neutral-600'
                     }`}
                   />
                 ))}
               </div>
-              <span className="text-xs text-muted-foreground">
+              <span className="text-xs text-muted-foreground dark:text-neutral-500">
                 ({reviewCount})
               </span>
             </div>
@@ -204,12 +204,12 @@ export function ProductCard({
                 {colors.slice(0, 4).map((color, index) => (
                   <div
                     key={index}
-                    className="w-4 h-4 rounded-full border border-gray-300"
+                    className="w-4 h-4 rounded-full border border-gray-300 dark:border-neutral-600"
                     style={{ backgroundColor: color }}
                   />
                 ))}
                 {colors.length > 4 && (
-                  <span className="text-xs text-muted-foreground ml-1">
+                  <span className="text-xs text-muted-foreground dark:text-neutral-500 ml-1">
                     +{colors.length - 4}
                   </span>
                 )}
@@ -218,11 +218,11 @@ export function ProductCard({
 
             {/* Price */}
             <div className="flex items-center gap-2">
-              <span className="font-bold text-lg">
+              <span className="font-bold text-lg text-foreground dark:text-neutral-100">
                 ${price.toFixed(2)}
               </span>
               {originalPrice && (
-                <span className="text-sm text-muted-foreground line-through">
+                <span className="text-sm text-muted-foreground dark:text-neutral-500 line-through">
                   ${originalPrice.toFixed(2)}
                 </span>
               )}
@@ -232,12 +232,12 @@ export function ProductCard({
             {sizes.length > 0 && (
               <div className="flex flex-wrap gap-1">
                 {sizes.slice(0, 4).map((size) => (
-                  <Badge key={size} variant="outline" className="text-xs px-2 py-1">
+                  <Badge key={size} variant="outline" className="text-xs px-2 py-1 border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300">
                     {size}
                   </Badge>
                 ))}
                 {sizes.length > 4 && (
-                  <Badge variant="outline" className="text-xs px-2 py-1">
+                  <Badge variant="outline" className="text-xs px-2 py-1 border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300">
                     +{sizes.length - 4}
                   </Badge>
                 )}
-- 
cgit v1.2.3-59-g8ed1b