refactor: ItemWishList component

src/components/common/ItemWishList/ItemWishList.module.scss

@@ -7,4 +7,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    path{
+        stroke: theme("colors.negative");
+    }
+}
+.isToggleOn{
+    path{
+        stroke: theme("colors.primary");
+    }
 }

src/components/common/ItemWishList/ItemWishList.tsx

@@ -1,19 +1,26 @@
+import classNames from 'classnames'
 import { Heart } from '@components/icons'
-import React, { useState } from 'react'
+import React, { memo } from 'react'
 import s from './ItemWishList.module.scss'
 
 interface Props {
-    className?: string
-    children?: any
+    isActive?: boolean,
+    onClick?: () => void
 }
 
-const ItemWishList = ({}:Props) => {
-    const [isClick,setClick] = useState(false)
+const ItemWishList = memo(({isActive, onClick}:Props) => {
+    const handleClick = () => {
+        isActive = !isActive
+    }
     return(
-        <div className={s.heartToggle} onClick={() => setClick(!isClick)}>
-            <Heart color={isClick ? "#D1644D" : "#5B9A74"}/>
+        <div className={classNames({
+            [s.heartToggle]:true, 
+            [s.isToggleOn]:isActive
+        })}
+        onClick={handleClick}>
+            <Heart />
         </div>
     )
-}
+})
 
 export default ItemWishList

src/components/common/Logo/Logo.module.scss

@@ -1,6 +1,4 @@
 @import '../../../styles/utilities';
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
-
 
 .logo{
     display: flex;
@@ -12,7 +10,7 @@
         margin-right: 1.2rem;
     }
     .conTent{
-        font-family: 'Poppins', sans-serif;
+        @apply font-logo;
         text-transform: uppercase;
         line-height: 3.2rem;
         letter-spacing: -0.02rem;

src/components/common/Logo/Logo.tsx

@@ -9,7 +9,6 @@ const Logo = ({}: Props) => {
     return(
         <div className={s.logo}>
             <div className={s.eclipse}>
-
             </div>
             <div className={s.conTent}>
                 ONLINE GROCERY

src/components/common/ViewAllItem/ViewAllItem.module.scss

@@ -1,16 +1,18 @@
 @import '../../../styles/utilities';
-@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
 
 .viewAll{
     display: flex;
     color: theme("colors.primary");
     .conTent{
         margin: 0.8rem 0.8rem 0.8rem 1.6rem;
-        font-family: 'Nunito', sans-serif;
+        font-family: var(--font-sans);
         font-weight: bold;
     }
     .vecTor{
         margin: 0.8rem 0rem 0.8rem 0rem;
+        svg path{
+            fill: theme("colors.primary");
+        }
     }
 }