From 3358a97a6c11710e91a5cc4dddf8a4cc330313c4 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Mon, 30 Jun 2025 04:38:13 +0200
Subject: [PATCH] Remove button size increase

---
 components/Cart/CartItem.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/Cart/CartItem.vue b/components/Cart/CartItem.vue
index c37bf71a..834b2e19 100644
--- a/components/Cart/CartItem.vue
+++ b/components/Cart/CartItem.vue
@@ -3,14 +3,22 @@
     <div class="item">
       <span class="block mt-2 font-extrabold">Remove: <br /></span>
       <span class="item-content">
-        <nuxt-img
-          class="mt-2 ml-4 cursor-pointer"
-          :class="{ removing: isRemoving }"
-          alt="Remove icon"
-          aria-label="Remove"
-          src="/svg/Remove.svg"
+        <button
+          type="button"
           @click="emitRemove"
-        />
+          :disabled="isRemoving"
+          class="flex items-center justify-center w-12 h-12 p-2 rounded-full bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-400 transition disabled:opacity-50"
+          aria-label="Remove item from cart"
+        >
+          <nuxt-img
+            class="w-7 h-7"
+            :class="{ removing: isRemoving }"
+            alt="Remove icon"
+            src="/svg/Remove.svg"
+            aria-hidden="true"
+            draggable="false"
+          />
+        </button>
       </span>
     </div>
     <div class="item">