From d3c99764633c2ed2393607fe32d2300c621e1f9e Mon Sep 17 00:00:00 2001
From: StephDietz <steph.dietz@vercel.com>
Date: Thu, 6 Jul 2023 21:15:24 -0500
Subject: [PATCH] begin to fix light/dark mode and fix some overlap clicking
 issues

---
 components/cart/delete-item-button.tsx        |  2 +-
 components/cart/edit-item-quantity-button.tsx |  4 +-
 components/cart/modal.tsx                     | 43 ++++++++++---------
 components/icons/cart.tsx                     |  9 ++--
 tailwind.config.js                            |  3 +-
 5 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx
index 1c4366036..7fc4d98d3 100644
--- a/components/cart/delete-item-button.tsx
+++ b/components/cart/delete-item-button.tsx
@@ -28,7 +28,7 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
       }}
       disabled={isPending}
       className={clsx(
-        'ease flex h-4 w-4 items-center justify-center rounded-full bg-base-gray-900 transition-all duration-200  ',
+        'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-base-gray-900 transition-all duration-200  ',
         {
           'cursor-not-allowed px-0': isPending
         }
diff --git a/components/cart/edit-item-quantity-button.tsx b/components/cart/edit-item-quantity-button.tsx
index 24c22e169..fe6d899d1 100644
--- a/components/cart/edit-item-quantity-button.tsx
+++ b/components/cart/edit-item-quantity-button.tsx
@@ -52,9 +52,9 @@ export default function EditItemQuantityButton({
       {isPending ? (
         <LoadingDots className="bg-black dark:bg-white" />
       ) : type === 'plus' ? (
-        <PlusIcon className="w-4 h-4" />
+        <PlusIcon className="w-4 h-4 dark:text-base-gray-900" />
       ) : (
-        <MinusIcon className="w-4 h-4" />
+        <MinusIcon className="w-4 h-4 dark:text-base-gray-900" />
       )}
     </button>
   );
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 0b3dc4352..9ac5061f5 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -66,7 +66,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
             leaveFrom="opacity-100 backdrop-blur-[.5px]"
             leaveTo="opacity-0 backdrop-blur-none"
           >
-            <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+            <div className="fixed inset-0 " aria-hidden="true" />
           </Transition.Child>
           <Transition.Child
             as={Fragment}
@@ -77,7 +77,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col bg-white/90 p-6 text-black backdrop-blur-xl dark:bg-black/90 dark:text-white md:w-[390px]">
+            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col bg-white/80 p-6 text-black backdrop-blur-xl dark:bg-black/80 dark:text-white md:w-[390px]">
               <div className="flex items-center justify-between">
                 <p className="text-lg font-semibold">My Cart</p>
 
@@ -112,30 +112,28 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
                         <li
                           key={i}
                           data-testid="cart-item"
-                          className="flex flex-col w-full border-b"
+                          className="flex flex-col w-full border-b border-dark-gray-4"
                         >
                           <div className="flex flex-row justify-between w-full py-4">
+                            <div className="absolute z-40 -mt-2 ml-[55px]">
+                              <DeleteItemButton item={item} />
+                            </div>
                             <Link
                               href={merchandiseUrl}
                               onClick={closeCart}
-                              className="flex flex-row space-x-4"
+                              className="z-30 flex flex-row space-x-4"
                             >
-                              <div className="relative rounded-md border border-dark-gray-4 bg-white/[6.6%] hover:bg-white/[8.7%]">
-                                <div className="absolute right-0 -mt-2 -mr-2">
-                                  <DeleteItemButton item={item} />
-                                </div>
-                                <div className="w-16 h-16 overflow-hidden rounded-md cursor-pointer">
-                                  <Image
-                                    className="object-cover w-full h-full "
-                                    width={64}
-                                    height={64}
-                                    alt={
-                                      item.merchandise.product.featuredImage.altText ||
-                                      item.merchandise.product.title
-                                    }
-                                    src={item.merchandise.product.featuredImage.url}
-                                  />
-                                </div>
+                              <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md rounded-md border border-dark-gray-4 bg-white/[6.6%] hover:bg-white/[8.7%]">
+                                <Image
+                                  className="object-cover w-full h-full "
+                                  width={64}
+                                  height={64}
+                                  alt={
+                                    item.merchandise.product.featuredImage.altText ||
+                                    item.merchandise.product.title
+                                  }
+                                  src={item.merchandise.product.featuredImage.url}
+                                />
                               </div>
 
                               <div className="flex flex-col flex-1 text-base">
@@ -143,7 +141,10 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
                                   {item.merchandise.product.title}
                                 </span>
                                 {item.merchandise.title !== DEFAULT_OPTION ? (
-                                  <p className="font-semibold " data-testid="cart-product-variant">
+                                  <p
+                                    className="text-sm text-white/[54%]"
+                                    data-testid="cart-product-variant"
+                                  >
                                     {item.merchandise.title}
                                   </p>
                                 ) : null}
diff --git a/components/icons/cart.tsx b/components/icons/cart.tsx
index 31b606f74..57cc5223d 100644
--- a/components/icons/cart.tsx
+++ b/components/icons/cart.tsx
@@ -9,15 +9,12 @@ export default function CartIcon({
   quantity?: number;
 }) {
   return (
-    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-dark-gray-4 text-black transition-colors dark:text-gray-100">
+    <div className="relative flex items-center justify-center text-black transition-colors border rounded-md h-11 w-11 border-light-gray-4 dark:border-dark-gray-4 dark:text-white">
       <ShoppingCartIcon
-        className={clsx(
-          'h-6 transition-all ease-in-out hover:scale-110 hover:text-gray-500 dark:hover:text-gray-300',
-          className
-        )}
+        className={clsx('h-6 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-500 text-[11px] font-medium">
+        <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-blue-500 text-[11px] font-medium ">
           {quantity}
         </div>
       ) : null}
diff --git a/tailwind.config.js b/tailwind.config.js
index b6985e96c..4c8280c87 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,7 +21,8 @@ module.exports = {
         light: '#FAFAFA',
         violetDark: '#4c2889',
         'dark-gray-4': '#2E2E2E',
-        'base-gray-900': '#666666'
+        'base-gray-900': '#666666',
+        'light-gray-4': '#EAEAEA'
       },
       keyframes: {
         fadeIn: {