From da2fb44dd40c2d390d46b37899e724ab8e457bc7 Mon Sep 17 00:00:00 2001
From: Bel Curcio <curciobel@gmail.com>
Date: Tue, 1 Jun 2021 13:47:54 -0300
Subject: [PATCH] More changes

---
 assets/base.css                               |  6 ++++-
 .../ProductCard/ProductCard.module.css        |  5 ++--
 .../product/ProductView/ProductView.tsx       |  1 -
 .../WishlistButton/WishlistButton.module.css  | 26 ++++++++++++++-----
 .../WishlistButton/WishlistButton.tsx         |  6 +++--
 tailwind.config.js                            |  1 +
 6 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index 097e59c6f..271b831f1 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -15,10 +15,14 @@
   --cyan: #22b8cf;
   --green: #37b679;
   --red: #da3c3c;
-  --pink: #e64980;
   --purple: #f81ce5;
   --blue: #0070f3;
 
+  --pink: #ff0080;
+  --pink-light: #ff379c;
+
+  --magenta: #eb367f;
+
   --violet: #7928ca;
   --violet-dark: #4c2889;
 
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index ebbc837c5..2d2fa9f5e 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -63,8 +63,7 @@
 
 .squareBg,
 .productTitle > span,
-.productPrice,
-.wishlistButton {
+.productPrice {
   @apply transition-colors ease-in-out duration-500;
 }
 
@@ -119,7 +118,7 @@
 }
 
 .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;
+  @apply top-0 right-0 z-50 absolute;
 }
 
 .imageContainer {
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 47cdf6c6f..12c983d66 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -147,7 +147,6 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
                 </div>
               </div>
             ))}
-
             <div className="pb-14 break-words w-full max-w-xl">
               <Text html={product.descriptionHtml || product.description} />
             </div>
diff --git a/components/wishlist/WishlistButton/WishlistButton.module.css b/components/wishlist/WishlistButton/WishlistButton.module.css
index 4a7276f91..3bdf1e710 100644
--- a/components/wishlist/WishlistButton/WishlistButton.module.css
+++ b/components/wishlist/WishlistButton/WishlistButton.module.css
@@ -1,8 +1,10 @@
 .root {
-  @apply p-5 text-accent-9 flex items-center
+  transition-duration: 0.2s;
+  transition-timing-function: ease;
+  transition-property: color, background-color, opacity;
+  @apply p-3 text-accent-9 flex items-center
   justify-center font-semibold cursor-pointer
   bg-accent-0 text-sm;
-  transition: opacity 0.2s ease;
 }
 
 .root:focus {
@@ -10,10 +12,22 @@
 }
 
 .icon {
-  @apply text-accent-9;
-  transition: transform 0.2s ease;
+  transition-duration: 0.2s;
+  transition-timing-function: ease;
+  transition-property: transform, fill;
+  color: currentColor;
 }
 
-.icon {
-  transition: fill 0.4s ease;
+.icon.loading {
+  fill: var(--pink-light);
+}
+
+.icon.inWishlist {
+  fill: var(--pink);
+}
+
+@screen lg {
+  .root {
+    @apply p-4;
+  }
 }
diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx
index e05d1709e..9bb4c9a0b 100644
--- a/components/wishlist/WishlistButton/WishlistButton.tsx
+++ b/components/wishlist/WishlistButton/WishlistButton.tsx
@@ -72,8 +72,10 @@ const WishlistButton: FC<Props> = ({
       {...props}
     >
       <Heart
-        className={cn(s.icon, { 'opacity-80': loading })}
-        fill={itemInWishlist ? 'var(--pink)' : 'none'}
+        className={cn(s.icon, {
+          [s.loading]: loading,
+          [s.inWishlist]: itemInWishlist,
+        })}
       />
     </button>
   )
diff --git a/tailwind.config.js b/tailwind.config.js
index e76a7e8b9..46c8bb1c5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,6 +40,7 @@ module.exports = {
         violet: 'var(--violet)',
         'violet-light': 'var(--violet-light)',
         pink: 'var(--pink)',
+        'pink-light': 'var(--pink-light)',
         cyan: 'var(--cyan)',
         blue: 'var(--blue)',
         green: 'var(--green)',