From 808ad87413b92e0952da4f468692198e4925f7dd Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 3 Oct 2020 11:55:37 -0300
Subject: [PATCH] Responsive

---
 components/core/Searchbar/Searchbar.module.css  |  2 +-
 .../product/ProductCard/ProductCard.module.css  | 17 +++++++++++++++++
 components/product/ProductCard/ProductCard.tsx  | 16 +++++++---------
 .../product/ProductGrid/ProductGrid.module.css  | 16 ++++++++++++----
 4 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css
index e1e8e55e8..fdb4ef62c 100644
--- a/components/core/Searchbar/Searchbar.module.css
+++ b/components/core/Searchbar/Searchbar.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply px-4 flex items-center;
+  @apply px-4 items-center hidden md:flex;
 }
 
 .container {
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index c1e5df87f..94c5457eb 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -1,3 +1,20 @@
 .root {
   @apply relative w-full h-full p-6 box-border overflow-hidden;
 }
+
+.productTitle {
+  @apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex;
+  max-width: calc(100% - 50px);
+
+  @screen lg {
+    @apply text-xl;
+  }
+}
+
+.productPrice {
+  @apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6;
+}
+
+.wishlistButton {
+  @apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6;
+}
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 76cf24464..1c98d71b3 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -20,25 +20,23 @@ const ProductCard: FC<Props> = ({ className, productData }) => {
     <div className={rootClassName}>
       {/* Overlay */}
       <div className="flex flex-row justify-between box-border w-full z-10 relative">
-        <div className="flex flex-col">
-          <div>
-            <h1 className="p-3 h-14 bg-white text-black font-bold text-2xl truncate leading-8">
-              {productData.name}
-            </h1>
+        <div className="flex flex-col flex-1 overflow-hidden">
+          <div className="flex-1">
+            <h1 className={s.productTitle}>{productData.name}</h1>
           </div>
-          <div>
-            <div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
+          <div className="flex-0">
+            <div className={s.productPrice}>
               ${productData.prices.price.value}
             </div>
           </div>
         </div>
 
-        <div className="flex items-center justify-center h-12 w-12 bg-white text-black cursor-pointer">
+        <div className={s.wishlistButton}>
           <Heart />
         </div>
       </div>
 
-      <div className="absolute top-0 left-0 w-full h-full z-0">
+      <div className="absolute box-border top-0 left-0 w-full h-full z-0 m-12">
         {/* <img
           className="object-cover object-center w-full"
           src={productData.images.edges[0].node.urlSmall}
diff --git a/components/product/ProductGrid/ProductGrid.module.css b/components/product/ProductGrid/ProductGrid.module.css
index e9543e144..10afffada 100644
--- a/components/product/ProductGrid/ProductGrid.module.css
+++ b/components/product/ProductGrid/ProductGrid.module.css
@@ -4,16 +4,24 @@
 
   & > * {
     @apply row-span-1 lg:col-span-1 h-full bg-black box-border;
+    height: 500px;
+
+    @screen lg {
+      height: auto;
+    }
   }
 
-  & > div:nth-child(6n + 1) {
+  & > div:nth-child(6n + 1),
+  & > div:nth-child(6n + 5) {
     @apply row-span-2 lg:col-span-2 bg-violet;
-    min-height: var(--row-height);
+
+    @screen lg {
+      min-height: var(--row-height);
+    }
   }
 
   & > div:nth-child(6n + 5) {
-    @apply row-span-2 lg:col-span-2 bg-blue;
-    min-height: var(--row-height);
+    @apply bg-blue;
   }
 
   & > div:nth-child(6n + 3) {