From af4b0cea03e5843706e4e17d48b2de7cfc5027de Mon Sep 17 00:00:00 2001
From: Daniele Pancottini <daniele.pancottini@studio.unibo.it>
Date: Sat, 11 Feb 2023 11:14:31 +0100
Subject: [PATCH] Wrap product card with chackra card

---
 .../product/ProductCard/ProductCard.tsx       | 238 +++++++++---------
 site/pages/contact.tsx                        |  10 +-
 2 files changed, 127 insertions(+), 121 deletions(-)

diff --git a/site/components/product/ProductCard/ProductCard.tsx b/site/components/product/ProductCard/ProductCard.tsx
index 56388e705..9d264ab5c 100644
--- a/site/components/product/ProductCard/ProductCard.tsx
+++ b/site/components/product/ProductCard/ProductCard.tsx
@@ -6,7 +6,7 @@ import s from './ProductCard.module.css'
 import Image, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'
 import usePrice from '@framework/product/use-price'
-import { Stack, Text, Heading, Box, useColorModeValue } from '@chakra-ui/react'
+import { Stack, Text, Heading, Box, useColorModeValue, Card, CardBody } from '@chakra-ui/react'
 
 interface Props {
   className?: string
@@ -42,132 +42,136 @@ const ProductCard: FC<Props> = ({
   const fontColor = useColorModeValue("black", "black");
 
   return (
-    <Link href={`/product/${product.slug}`}>
-      <a className={rootClassName} aria-label={product.name} onMouseOut={() => setIsHover(false)} onMouseOver={() => setIsHover(true)}>
-        {variant === 'slim' && !isHover && (
-          <>
-            <div className={s.header}>
-              <span>{product.name}</span>
-            </div>
-            {product?.images && (
-              <div>
-                <Image
-                  quality="85"
-                  src={product.images[0]?.url || placeholderImg}
-                  alt={product.name || 'Product Image'}
-                  height={320}
-                  width={320}
-                  layout="fixed"
-                  {...imgProps}
-                />
-              </div>
-            )}
-          </>
-        )}
-
-        {variant === 'simple' && !isHover && (
-          <>
-            {process.env.COMMERCE_WISHLIST_ENABLED && (
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0]}
-              />
-            )}
-            <div className={s.imageContainer}>
-              {product?.images && (
-                <div>
-                  <Image
-                    alt={product.name || 'Product Image'}
-                    className={s.productImage}
-                    src={product.images[0]?.url || placeholderImg}
-                    height={540}
-                    width={540}
-                    quality="85"
-                    layout="responsive"
-                    {...imgProps}
-                  />
+    <Card>
+      <CardBody>
+        <Link href={`/product/${product.slug}`}>
+          <a className={rootClassName} aria-label={product.name} onMouseOut={() => setIsHover(false)} onMouseOver={() => setIsHover(true)}>
+            {variant === 'slim' && !isHover && (
+              <>
+                <div className={s.header}>
+                  <span>{product.name}</span>
                 </div>
-              )}
-            </div>
-          </>
-        )}
-
-        {variant === 'default' && !isHover && (
-          <>
-            {process.env.COMMERCE_WISHLIST_ENABLED && (
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0] as any}
-              />
-            )}
-            <div className={s.imageContainer}>
-              {product?.images && (
-                <div>
-                  <Image
-                    alt={product.name || 'Product Image'}
-                    className={s.productImage}
-                    src={product.images[0]?.url || placeholderImg}
-                    height={540}
-                    width={540}
-                    quality="85"
-                    layout="responsive"
-                    {...imgProps}
-                  />
-                </div>
-              )}
-            </div>
-          </>
-        )}
-
-        {isHover && (
-          <>
-            <Box
-              role={'group'}
-              p={6}
-              w={'full'}
-              bg={hoverCardBgColor}
-              zIndex={1}>
-              {process.env.COMMERCE_WISHLIST_ENABLED && (
-                <WishlistButton
-                  className={s.wishlistButton}
-                  productId={product.id}
-                  variant={product.variants[0] as any}
-                />
-              )}
-              <div className={s.imageContainer}>
                 {product?.images && (
                   <div>
                     <Image
-                      alt={product.name || 'Product Image'}
-                      className={s.productImage}
-                      src={product.images[0]?.url || placeholderImg}
-                      height={540}
-                      width={540}
                       quality="85"
-                      layout="responsive"
+                      src={product.images[0]?.url || placeholderImg}
+                      alt={product.name || 'Product Image'}
+                      height={320}
+                      width={320}
+                      layout="fixed"
                       {...imgProps}
                     />
                   </div>
                 )}
-              </div>
-              <Stack backgroundColor={"white"} pt={10} align={'center'}>
-                  <Heading color={fontColor} fontSize={'lg'} fontFamily={'body'} fontWeight={500} textAlign={"center"}>
-                    {product.name}
-                  </Heading>
-                  <Stack direction={'row'} align={'center'}>
-                    <Text color={fontColor} fontWeight={800} fontSize={'xl'}>
-                    {`${price} ${product.price?.currencyCode}`}
-                    </Text>
+              </>
+            )}
+
+            {variant === 'simple' && !isHover && (
+              <>
+                {process.env.COMMERCE_WISHLIST_ENABLED && (
+                  <WishlistButton
+                    className={s.wishlistButton}
+                    productId={product.id}
+                    variant={product.variants[0]}
+                  />
+                )}
+                <div className={s.imageContainer}>
+                  {product?.images && (
+                    <div>
+                      <Image
+                        alt={product.name || 'Product Image'}
+                        className={s.productImage}
+                        src={product.images[0]?.url || placeholderImg}
+                        height={540}
+                        width={540}
+                        quality="85"
+                        layout="responsive"
+                        {...imgProps}
+                      />
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+
+            {variant === 'default' && !isHover && (
+              <>
+                {process.env.COMMERCE_WISHLIST_ENABLED && (
+                  <WishlistButton
+                    className={s.wishlistButton}
+                    productId={product.id}
+                    variant={product.variants[0] as any}
+                  />
+                )}
+                <div className={s.imageContainer}>
+                  {product?.images && (
+                    <div>
+                      <Image
+                        alt={product.name || 'Product Image'}
+                        className={s.productImage}
+                        src={product.images[0]?.url || placeholderImg}
+                        height={540}
+                        width={540}
+                        quality="85"
+                        layout="responsive"
+                        {...imgProps}
+                      />
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+
+            {isHover && (
+              <>
+                <Box
+                  role={'group'}
+                  p={6}
+                  w={'full'}
+                  bg={hoverCardBgColor}
+                  zIndex={1}>
+                  {process.env.COMMERCE_WISHLIST_ENABLED && (
+                    <WishlistButton
+                      className={s.wishlistButton}
+                      productId={product.id}
+                      variant={product.variants[0] as any}
+                    />
+                  )}
+                  <div className={s.imageContainer}>
+                    {product?.images && (
+                      <div>
+                        <Image
+                          alt={product.name || 'Product Image'}
+                          className={s.productImage}
+                          src={product.images[0]?.url || placeholderImg}
+                          height={540}
+                          width={540}
+                          quality="85"
+                          layout="responsive"
+                          {...imgProps}
+                        />
+                      </div>
+                    )}
+                  </div>
+                  <Stack backgroundColor={"white"} pt={10} align={'center'}>
+                      <Heading color={fontColor} fontSize={'lg'} fontFamily={'body'} fontWeight={500} textAlign={"center"}>
+                        {product.name}
+                      </Heading>
+                      <Stack direction={'row'} align={'center'}>
+                        <Text color={fontColor} fontWeight={800} fontSize={'xl'}>
+                        {`${price} ${product.price?.currencyCode}`}
+                        </Text>
+                      </Stack>
                   </Stack>
-              </Stack>
-            </Box>
-          </>
-        )}
-        
-      </a>
-    </Link>
+                </Box>
+              </>
+            )}
+            
+          </a>
+        </Link>
+      </CardBody>
+    </Card>
   )
 }
 
diff --git a/site/pages/contact.tsx b/site/pages/contact.tsx
index c956f4600..0f40d8676 100644
--- a/site/pages/contact.tsx
+++ b/site/pages/contact.tsx
@@ -6,10 +6,12 @@ import { Text as TextUI } from '@components/ui'
 export default function Contact() {
   return (
     <div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
-      <TextUI className='mb-5' variant="heading">Contatti</TextUI>
-      <TextUI className="">
-        Puoi contattarci usando i recapiti che trovi qui sotto...
-      </TextUI>
+      <Box textAlign="center" mb={"10"}>
+        <TextUI className='mb-5' variant="heading">Contatti</TextUI>
+        <TextUI className="">
+          Puoi contattarci usando i recapiti che trovi qui sotto!
+        </TextUI>
+      </Box>
       <Stack direction={['column', 'row']} spacing='24px'>
         <Box textAlign="center" py={10} px={6}>
           <AtSignIcon boxSize={'40px'} color={'orange.300'} />