Separate cart-icon into open-cart and close-cart (#1071)

components/cart/close-cart.tsx

@@ -0,0 +1,10 @@
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export default function CloseCart({ className }: { className?: string }) {
+  return (
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-gray-200 text-black transition-colors dark:border-gray-700 dark:text-white">
+      <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
+    </div>
+  );
+}

components/cart/modal.tsx

@@ -2,7 +2,6 @@
 
 import { Dialog, Transition } from '@headlessui/react';
 import { ShoppingCartIcon } from '@heroicons/react/24/outline';
-import CartIcon from 'components/icons/cart';
 import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
 import type { Cart } from 'lib/shopify/types';
@@ -11,8 +10,10 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { useCookies } from 'react-cookie';
+import CloseCart from './close-cart';
 import DeleteItemButton from './delete-item-button';
 import EditItemQuantityButton from './edit-item-quantity-button';
+import OpenCart from './open-cart';
 
 type MerchandiseSearchParams = {
   [key: string]: string;
@@ -52,7 +53,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
   return (
     <>
       <button aria-label="Open cart" onClick={openCart} data-testid="open-cart">
-        <CartIcon quantity={cart.totalQuantity} />
+        <OpenCart quantity={cart.totalQuantity} />
       </button>
       <Transition show={isOpen}>
         <Dialog onClose={closeCart} className="relative z-50" data-testid="cart">
@@ -81,7 +82,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
                 <p className="text-lg font-semibold">My Cart</p>
 
                 <button aria-label="Close cart" onClick={closeCart} data-testid="close-cart">
-                  <CartIcon quantity={cart.totalQuantity} icon="close" />
+                  <CloseCart />
                 </button>
               </div>
 

components/cart/open-cart.tsx

@@ -1,24 +1,18 @@
-import { ShoppingCartIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { ShoppingCartIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 
-export default function CartIcon({
+export default function OpenCart({
   className,
-  quantity,
-  icon
+  quantity
 }: {
   className?: string;
   quantity?: number;
-  icon?: string;
 }) {
   return (
     <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-gray-200 text-black transition-colors dark:border-gray-700 dark:text-white">
-      {icon === 'close' ? (
-        <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
-      ) : (
-        <ShoppingCartIcon
-          className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
-        />
-      )}
+      <ShoppingCartIcon
+        className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
+      />
 
       {quantity ? (
         <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-blue-600 text-[11px] font-medium text-white">

components/layout/navbar/index.tsx

@@ -1,5 +1,5 @@
 import Cart from 'components/cart';
-import CartIcon from 'components/icons/cart';
+import OpenCart from 'components/cart/open-cart';
 import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
@@ -48,7 +48,7 @@ export default async function Navbar() {
           <Search />
         </div>
         <div className="flex justify-end md:w-1/3">
-          <Suspense fallback={<CartIcon className="h-6" />}>
+          <Suspense fallback={<OpenCart className="h-6" />}>
             <Cart />
           </Suspense>
         </div>