New tailwind required changes

components/product/ProductCard/ProductCard.tsx

@@ -11,6 +11,7 @@ interface Props {
   product: Product
   variant?: 'default' | 'slim' | 'simple'
   imgProps?: Omit<ImageProps, 'src'>
+  noNameTag?: boolean
 }
 
 const placeholderImg = '/product-img-placeholder.svg'
@@ -18,8 +19,9 @@ const placeholderImg = '/product-img-placeholder.svg'
 const ProductCard: FC<Props> = ({
   className,
   product,
-  variant = 'default',
   imgProps,
+  variant = 'default',
+  noNameTag = false,
   ...props
 }) => (
   <Link href={`/product/${product.slug}`} {...props}>
@@ -62,17 +64,20 @@ const ProductCard: FC<Props> = ({
               variant={product.variants[0] as any}
             />
           )}
+
           <div className="flex flex-row justify-between box-border w-full z-20 absolute ">
-            <div className="absolute top-0 left-0 pr-16 max-w-full">
+            {!noNameTag && (
-              <h3 className={s.productTitle}>
+              <div className="absolute top-0 left-0 pr-16 max-w-full">
-                <span>{product.name}</span>
+                <h3 className={s.productTitle}>
-              </h3>
+                  <span>{product.name}</span>
-              <span className={s.productPrice}>
+                </h3>
-                {product.price.value}
+                <span className={s.productPrice}>
-                &nbsp;
+                  {product.price.value}
-                {product.price.currencyCode}
+                  &nbsp;
-              </span>
+                  {product.price.currencyCode}
-            </div>
+                </span>
+              </div>
+            )}
           </div>
           <div className={s.imageContainer}>
             {product?.images && (

components/product/ProductView/ProductView.module.css

@@ -1,69 +1,37 @@
 .root {
   @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden;
-
-  @screen lg {
-    @apply grid-cols-12;
-  }
 }
 
 .main {
   @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
   min-height: 600px;
-
-  @screen md {
-    min-height: 700px;
-  }
-
-  @screen lg {
-    @apply mx-0 col-span-8;
-  }
 }
 
 .nameBox {
   @apply absolute top-0 left-0 z-20 pr-16;
+}
 
-  @screen lg {
+.nameBox .name {
-    @apply left-0 pr-16;
+  @apply px-6 py-2 bg-primary text-primary font-bold;
-  }
+  font-size: 1.8rem;
+  letter-spacing: 0.4px;
+}
 
-  & .name {
+.nameBox .price {
-    @apply px-6 py-2 bg-primary text-primary font-bold;
+  @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
-    font-size: 1.8rem;
-    letter-spacing: 0.4px;
-  }
-
-  & .price {
-    @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
-  }
-
-  @screen lg {
-    & .name,
-    & .price {
-      @apply bg-accent-0 text-accent-9;
-    }
-  }
 }
 
 .sidebar {
   @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
-
-  @screen lg {
-    @apply col-span-4 py-12;
-  }
 }
 
 .sliderContainer {
   @apply flex items-center justify-center overflow-x-hidden bg-violet;
 }
 
-.imageContainer {
+.imageContainer > div,
-  @apply text-center;
+.imageContainer > div > div {
-  & > div {
+  @apply h-full;
-    @apply h-full;
-    & > div {
-      @apply h-full;
-    }
-  }
 }
 
 .sliderContainer .img {
@@ -71,15 +39,44 @@
 }
 
 .button {
-  text-align: center;
+  min-width: 300px;
-  width: 100%;
-  max-width: 300px;
-
-  @screen sm {
-    min-width: 300px;
-  }
 }
 
 .wishlistButton {
   @apply absolute z-30 top-0 right-0;
 }
+
+@screen md {
+  .main {
+    min-height: 700px;
+  }
+
+  .button {
+    text-align: center;
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+@screen lg {
+  .root {
+    @apply grid-cols-12;
+  }
+
+  .main {
+    @apply mx-0 col-span-8;
+  }
+
+  .nameBox {
+    @apply left-0 pr-16;
+  }
+
+  .nameBox .name,
+  .nameBox .price {
+    @apply bg-accent-0 text-accent-9;
+  }
+
+  .sidebar {
+    @apply col-span-4 py-12;
+  }
+}

components/product/ProductView/ProductView.tsx

@@ -185,9 +185,11 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
             >
               <ProductCard
                 key={p.path}
+                className={s.relatedProduct}
                 variant="simple"
                 className="animated fadeIn"
                 product={p}
+                noNameTag
                 imgProps={{
                   width: 275,
                   height: 275,