From 48e35c9163f74599fb8abf2911f6b5971d9881c7 Mon Sep 17 00:00:00 2001
From: Willian Justen de Vasconcellos <willianjustenqui@gmail.com>
Date: Tue, 27 Oct 2020 17:56:59 -0300
Subject: [PATCH 1/4] Fix overlaping product titles on mobile

Add an `extra-loose` line-height so it prevents
produt title to overlap on mobile screens.
---
 components/product/ProductCard/ProductCard.module.css | 2 +-
 components/product/ProductCard/ProductCard.tsx        | 2 +-
 tailwind.config.js                                    | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 0c8dd1c04..72e517f18 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -101,7 +101,7 @@
 }
 
 .productTitle {
-  @apply pt-2 max-w-full w-full;
+  @apply max-w-full w-full;
   font-size: 2rem;
   letter-spacing: 0.4px;
 
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index f047136b4..3eacee42d 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -57,7 +57,7 @@ const ProductCard: FC<Props> = ({
             <div className={s.squareBg} />
             <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">
-                <h3 className={s.productTitle}>
+                <h3 className={cn('leading-extra-loose pt-0 sm:pt-2 sm:leading-normal', s['productTitle'])}>
                   <span>{p.name}</span>
                 </h3>
                 <span className={s.productPrice}>{price}</span>
diff --git a/tailwind.config.js b/tailwind.config.js
index ec80f58e3..3535079a7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -46,6 +46,9 @@ module.exports = {
         magical:
           'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
       },
+      lineHeight: {
+        'extra-loose': '2.3'
+      }
     },
   },
   plugins: [require('@tailwindcss/ui')],

From 65d6ba7a7ee83fe25ef5844ea02dba1170ed9311 Mon Sep 17 00:00:00 2001
From: Willian Justen de Vasconcellos <willianjustenqui@gmail.com>
Date: Tue, 27 Oct 2020 20:16:23 -0300
Subject: [PATCH 2/4] Move styles to use @apply instead of responsive classes

---
 components/product/ProductCard/ProductCard.module.css | 2 +-
 components/product/ProductCard/ProductCard.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 72e517f18..26dd05e84 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -101,7 +101,7 @@
 }
 
 .productTitle {
-  @apply max-w-full w-full;
+  @apply pt-0 max-w-full w-full leading-extra-loose;
   font-size: 2rem;
   letter-spacing: 0.4px;
 
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 3eacee42d..f047136b4 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -57,7 +57,7 @@ const ProductCard: FC<Props> = ({
             <div className={s.squareBg} />
             <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">
-                <h3 className={cn('leading-extra-loose pt-0 sm:pt-2 sm:leading-normal', s['productTitle'])}>
+                <h3 className={s.productTitle}>
                   <span>{p.name}</span>
                 </h3>
                 <span className={s.productPrice}>{price}</span>

From a0fee94223bb0ff35abb7a0c47a49fd1d7349c96 Mon Sep 17 00:00:00 2001
From: Willian Justen de Vasconcellos <willianjustenqui@gmail.com>
Date: Wed, 28 Oct 2020 11:47:45 -0300
Subject: [PATCH 3/4] Change extra-loose size to accomodate system font

---
 tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 3535079a7..24416d3e7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -47,7 +47,7 @@ module.exports = {
           'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
       },
       lineHeight: {
-        'extra-loose': '2.3'
+        'extra-loose': '2.2'
       }
     },
   },

From c4ed4e934de52a21be32a2a55c95cdc2ce4d0f04 Mon Sep 17 00:00:00 2001
From: Willian Justen de Vasconcellos <willianjustenqui@gmail.com>
Date: Wed, 28 Oct 2020 16:12:23 -0300
Subject: [PATCH 4/4] Simplify Simple ProductTitle

---
 components/product/ProductCard/ProductCard.module.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 26dd05e84..2a1c28c2e 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -88,10 +88,11 @@
   }
 
   & .productTitle {
-    margin-top: -7px;
+    @apply pt-2;
     font-size: 1rem;
+
     & span {
-      line-height: 3;
+      @apply leading-extra-loose;
     }
   }