From 0478b43e9ce3eee7bd75279269f91d3c0487195a Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Mon, 26 Oct 2020 21:45:39 -0300
Subject: [PATCH] improve the images

---
 .../core/EnhancedImage/EnhancedImage.module.css    | 14 --------------
 components/core/EnhancedImage/EnhancedImage.tsx    |  3 +--
 .../product/ProductCard/ProductCard.module.css     |  8 ++++++++
 components/product/ProductCard/ProductCard.tsx     |  2 +-
 4 files changed, 10 insertions(+), 17 deletions(-)
 delete mode 100644 components/core/EnhancedImage/EnhancedImage.module.css

diff --git a/components/core/EnhancedImage/EnhancedImage.module.css b/components/core/EnhancedImage/EnhancedImage.module.css
deleted file mode 100644
index 9caafc3be..000000000
--- a/components/core/EnhancedImage/EnhancedImage.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.root {
-  @apply transform transition-transform duration-500;
-  height: 100%;
-  margin: auto;
-
-  &:hover {
-    transform: scale(1.05);
-  }
-
-  & div {
-    height: 100%;
-    margin: auto;
-  }
-}
diff --git a/components/core/EnhancedImage/EnhancedImage.tsx b/components/core/EnhancedImage/EnhancedImage.tsx
index ceae4918b..3ff97224b 100644
--- a/components/core/EnhancedImage/EnhancedImage.tsx
+++ b/components/core/EnhancedImage/EnhancedImage.tsx
@@ -1,7 +1,6 @@
 import { FC } from 'react'
 import { useInView } from 'react-intersection-observer'
 import Image from 'next/image'
-import s from './EnhancedImage.module.css'
 
 type Props = Omit<
   JSX.IntrinsicElements['img'],
@@ -34,7 +33,7 @@ const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
   })
 
   return (
-    <div ref={ref} className={s.root}>
+    <div ref={ref}>
       <Image {...props} />
     </div>
   )
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 1276a7c0b..412721464 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -122,3 +122,11 @@
 .wishlistButton {
   @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
 }
+
+.product-image {
+  margin: auto;
+
+  & div {
+    margin: auto;
+  }
+}
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index e1a0a3d91..3243e8261 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -72,7 +72,7 @@ const ProductCard: FC<Props> = ({
         </div>
         <EnhancedImage
           alt={p.name}
-          className="w-full object-cover"
+          className={cn('w-full object-cover', s['product-image'])}
           src={src}
           width={imgWidth}
           height={imgHeight}