refactor: replace icons, change heart styles

src/components/Header/Header.tsx

@@ -7,7 +7,10 @@ import HeaderHeart from '../UI/HeaderHeart/HeaderHeart'
 
 export default function Header() {
   return (
-    <header className="sticky left-0 top-0 z-10 mx-auto mt-2 flex h-20 w-full items-center justify-between bg-primary pl-6 pr-6">
+    <header
+      className="sticky left-0 top-0 z-10 mx-auto mt-2 flex h-20 w-full items-center justify-between bg-primary
+shadow-header sm:px-20"
+    >
       <Link href="/">
         <div className=" flex items-center gap-4">
           <div className="h-[21px] w-[19px] sm:h-[31px] sm:w-[28px]">
@@ -19,7 +22,7 @@ export default function Header() {
           </span>
         </div>
       </Link>
-      <div className="flex h-12 items-center ">
+      <div className="flex h-12 items-center gap-4 sm:gap-5 ">
         <HeaderHeart />
         <CartButton />
         <LoginIcon />

src/components/UI/AuthIcon/LoginIcon.tsx

@@ -36,7 +36,7 @@ export default function LoginIcon() {
           className="inline-flex"
           onClick={toggleModal}
         >
-          <div className=" mx-6 flex h-[48px] items-center justify-center rounded-[48px] bg-brand-solid px-6 text-lg text-inverted">
+          <div className="flex h-[48px] items-center justify-center rounded-[48px] bg-brand-solid px-6 text-lg text-inverted">
             Log in
           </div>
         </Link>

src/components/UI/Buttons/CartButton/CartButton.tsx

@@ -10,15 +10,15 @@ export default function CartButton() {
 
   return (
     <Link href={'/cart'}>
-      <div className="relative flex h-[48px] items-center gap-2 px-4  ">
+      <div className="relative flex h-[48px] w-[48px] items-center justify-center gap-2 ">
         <div className="flex flex-col items-center ">
-          <Image src={cart_icon} width={24} height={24} alt="Cart" priority />
+          <Image src={cart_icon} alt="Cart" priority />
           <p className="hidden items-center font-medium text-primary text-opacity-50 sm:flex">
             cart
           </p>
         </div>
         {!!count && (
-          <div className="absolute right-[13px] top-[9px] flex h-4 w-4 items-center justify-center rounded-full border  bg-brand-solid p-1 sm:right-[12px] sm:top-[-8px] sm:h-5 sm:w-5 ">
+          <div className=" absolute right-[8px] top-[9px] flex h-4 w-4 items-center justify-center rounded-full border bg-brand-solid  p-1 shadow-header sm:right-[4px] sm:top-[-8px] sm:h-5 sm:w-5 ">
             <span className="text-[8px] text-white">{count}</span>
           </div>
         )}

src/components/UI/HeaderHeart/HeaderHeart.tsx

@@ -1,8 +1,7 @@
 'use client'
 import Link from 'next/link'
 import Image from 'next/image'
-import heart_black from '../../../../public/heart_black.svg'
-import heart_purple from '../../../../public/heart_purple.svg'
+import heart_icon from '../../../../public/heart_icon.svg'
 
 import { useFavouritesStore } from '@/store/favStore'
 
@@ -11,19 +10,18 @@ export default function HeaderHeart() {
 
   return (
     <Link href={'/favourites'}>
-      <div className="relative flex items-center gap-2 rounded-full px-4 font-medium text-primary">
+      <div className="relative flex h-[48px]  w-[48px]  items-center justify-center gap-2">
         <div className="flex flex-col items-center">
-          <div className="flex h-[24px] w-[24px] justify-center sm:mb-2 sm:h-[24px] sm:w-[24px]">
-            <Image
-              src={favouriteIds.length > 0 ? heart_purple : heart_black}
-              alt={'heart'}
-              className="flex"
-            />
-          </div>
-          <p className="hidden items-center text-primary text-opacity-50 sm:flex">
+          <Image src={heart_icon} alt="heart" priority />
+          <p className="hidden items-center font-medium text-primary text-opacity-50 sm:flex">
             favorites
           </p>
         </div>
+        {!!favouriteIds.length && (
+          <div className=" absolute right-[8px] top-[9px] flex h-4 w-4 items-center justify-center rounded-full border bg-brand-solid  p-1 shadow-header sm:right-[4px] sm:top-[-8px] sm:h-5 sm:w-5 ">
+            <span className="text-[8px] text-white">{favouriteIds.length}</span>
+          </div>
+        )}
       </div>
     </Link>
   )

tailwind.config.ts

@@ -42,7 +42,8 @@ module.exports = {
         focus: '#682EFF',
       },
       boxShadow: {
-        'primary': '0px -1px 0px 0px #0000001A',
+        primary: '0px -1px 0px 0px #0000001A',
+        header: '0px 2px 2px 0px #682EFF14',
       },
       fontSize: {
         'XS': ['14px', '18px'],