From a9e67c43bb2d776e74678e665367ae1511c8b00c Mon Sep 17 00:00:00 2001
From: Lee Robinson <lrobinson2011@gmail.com>
Date: Sun, 28 Jul 2024 15:19:53 -0500
Subject: [PATCH] Larger delete button, my fingers are too large

---
 components/cart/delete-item-button.tsx |  4 +--
 components/cart/modal.tsx              | 39 +++++++++++++-------------
 components/layout/footer.tsx           |  2 +-
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx
index d3cbc5ec7..fb2aa310b 100644
--- a/components/cart/delete-item-button.tsx
+++ b/components/cart/delete-item-button.tsx
@@ -26,9 +26,9 @@ export function DeleteItemButton({
       <button
         type="submit"
         aria-label="Remove cart item"
-        className="ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200"
+        className="flex h-[24px] w-[24px] items-center justify-center rounded-full bg-neutral-500"
       >
-        <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
+        <XMarkIcon className="mx-[1px] h-4 w-4 text-white dark:text-black" />
       </button>
       <p aria-live="polite" className="sr-only" role="status">
         {message}
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index c6a253626..ca1e34652 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -114,15 +114,11 @@ export default function CartModal() {
                             className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
                           >
                             <div className="relative flex w-full flex-row justify-between px-1 py-4">
-                              <div className="absolute z-40 -mt-2 ml-[55px]">
+                              <div className="absolute z-40 -ml-1 -mt-2">
                                 <DeleteItemButton item={item} optimisticUpdate={updateCartItem} />
                               </div>
-                              <Link
-                                href={merchandiseUrl}
-                                onClick={closeCart}
-                                className="z-30 flex flex-row space-x-4"
-                              >
-                                <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
+                              <div className="flex flex-row">
+                                <div className="relative h-16 w-16 overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
                                   <Image
                                     className="h-full w-full object-cover"
                                     width={64}
@@ -134,18 +130,23 @@ export default function CartModal() {
                                     src={item.merchandise.product.featuredImage.url}
                                   />
                                 </div>
-
-                                <div className="flex flex-1 flex-col text-base">
-                                  <span className="leading-tight">
-                                    {item.merchandise.product.title}
-                                  </span>
-                                  {item.merchandise.title !== DEFAULT_OPTION ? (
-                                    <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                                      {item.merchandise.title}
-                                    </p>
-                                  ) : null}
-                                </div>
-                              </Link>
+                                <Link
+                                  href={merchandiseUrl}
+                                  onClick={closeCart}
+                                  className="z-30 ml-2 flex flex-row space-x-4"
+                                >
+                                  <div className="flex flex-1 flex-col text-base">
+                                    <span className="leading-tight">
+                                      {item.merchandise.product.title}
+                                    </span>
+                                    {item.merchandise.title !== DEFAULT_OPTION ? (
+                                      <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                                        {item.merchandise.title}
+                                      </p>
+                                    ) : null}
+                                  </div>
+                                </Link>
+                              </div>
                               <div className="flex h-16 flex-col justify-between">
                                 <Price
                                   className="flex justify-end space-y-2 text-right text-sm"
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 1759d1ea6..fc9336ea4 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -61,7 +61,7 @@ export default async function Footer() {
           </p>
           <p className="md:ml-auto">
             <a href="https://vercel.com" className="text-black dark:text-white">
-              Crafted by ▲ Vercel
+              Created by ▲ Vercel
             </a>
           </p>
         </div>