Merge pull request #14 from okbel/arzfran/improve-imgs

Improve Image styles

components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css

@@ -4,20 +4,20 @@
   @screen md {
     @apply flex-row;
   }
-}
 
-.asideWrapper {
-  @apply pr-3 w-full relative;
+  & .asideWrapper {
+    @apply pr-3 w-full relative;
 
-  @screen md {
-    @apply w-48;
-  }
-}
-
-.aside {
-  @apply flex flex-row w-full justify-around mb-12;
-
-  @screen md {
-    @apply mb-0 block sticky top-32;
+    @screen md {
+      @apply w-48;
+    }
+  }
+
+  & .aside {
+    @apply flex flex-row w-full justify-around mb-12;
+
+    @screen md {
+      @apply mb-0 block sticky top-32;
+    }
   }
 }

components/product/ProductCard/ProductCard.module.css

@@ -1,5 +1,6 @@
 .root {
-  @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
+  @apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
+  height: 100% !important;
 
   &:hover {
     & .squareBg:before {
@@ -119,17 +120,19 @@
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer z-10;
+  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
 }
 
 .imageContainer {
-  @apply absolute z-10 inset-0 flex items-center justify-center;
-
   & > div {
-    @apply h-full;
     & > div {
-      @apply h-full;
-      padding-bottom: 0 !important;
+      height: 100%;
+      margin: 0 auto;
     }
   }
 }
+
+.product-image {
+  height: 120% !important;
+  top: -10% !important;
+}

components/product/ProductCard/ProductCard.tsx

@@ -70,7 +70,7 @@ const ProductCard: FC<Props> = ({
             variant={p.variants.edges?.[0]!}
           />
         </div>
-        <div className={cn(s.imageContainer)}>
+        <div className={s.imageContainer}>
           <EnhancedImage
             alt={p.name}
             className={cn('w-full object-cover', s['product-image'])}

pages/index.tsx

@@ -79,8 +79,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The first image is the largest one in the grid
-            imgWidth={i === 0 ? '65vw' : '30vw'}
-            imgHeight={i === 0 ? '45vw' : '22vw'}
+            imgWidth={i === 0 ? 1600 : 820}
+            imgHeight={i === 0 ? 1600 : 820}
             priority
           />
         ))}