More changes

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;
 

components/product/ProductCard/ProductCard.module.css

@@ -63,8 +63,7 @@
 
 .squareBg,
 .productTitle > span,
-.productPrice,
+.productPrice {
-.wishlistButton {
   @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 {

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>

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-duration: 0.2s;
-  transition: transform 0.2s ease;
+  transition-timing-function: ease;
+  transition-property: transform, fill;
+  color: currentColor;
 }
 
-.icon {
+.icon.loading {
-  transition: fill 0.4s ease;
+  fill: var(--pink-light);
+}
+
+.icon.inWishlist {
+  fill: var(--pink);
+}
+
+@screen lg {
+  .root {
+    @apply p-4;
+  }
 }

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -72,8 +72,10 @@ const WishlistButton: FC<Props> = ({
       {...props}
     >
       <Heart
-        className={cn(s.icon, { 'opacity-80': loading })}
+        className={cn(s.icon, {
-        fill={itemInWishlist ? 'var(--pink)' : 'none'}
+          [s.loading]: loading,
+          [s.inWishlist]: itemInWishlist,
+        })}
       />
     </button>
   )

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)',