From ebb6dc0b27f2ce9b3f0b7bb1ee183ddcf7bf6392 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Mon, 3 Nov 2025 13:18:26 +0100
Subject: [PATCH] Refactor CartFAB and CartSidebar components for improved UI
 and functionality

- Simplified Transition component structure in CartFAB.vue for better readability.
- Enhanced FAB button size and adjusted ShoppingCart icon scale for improved visibility.
- Updated Badge component styling for better alignment and visual appeal.
- Modified CartSidebar.vue to adjust empty state layout, improving user experience when the cart is empty.

These changes aim to enhance the overall user interface and interaction within the shopping cart components.
---
 .claude/settings.local.json         |  3 ++-
 app/components/Cart/CartFAB.vue     | 30 ++++++++++-------------------
 app/components/Cart/CartSidebar.vue |  2 +-
 3 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index d9535b9..4764bda 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -71,7 +71,8 @@
       "Bash(pnpm shadcn-nuxt add:*)",
       "Bash(npm run:*)",
       "Bash(pnpm exec eslint:*)",
-      "Bash(npx -y vue-tsc:*)"
+      "Bash(npx -y vue-tsc:*)",
+      "Bash(awk:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/app/components/Cart/CartFAB.vue b/app/components/Cart/CartFAB.vue
index dcd5d48..670ffa6 100644
--- a/app/components/Cart/CartFAB.vue
+++ b/app/components/Cart/CartFAB.vue
@@ -34,42 +34,32 @@ function handleClick() {
 </script>
 
 <template>
-  <Transition
-    enter-active-class="transition-all duration-200 ease-out"
-    enter-from-class="scale-0 opacity-0"
-    enter-to-class="scale-100 opacity-100"
-    leave-active-class="transition-all duration-150 ease-in"
-    leave-from-class="scale-100 opacity-100"
-    leave-to-class="scale-0 opacity-0"
-  >
+  <Transition enter-active-class="transition-all duration-200 ease-out" enter-from-class="scale-0 opacity-0"
+    enter-to-class="scale-100 opacity-100" leave-active-class="transition-all duration-150 ease-in"
+    leave-from-class="scale-100 opacity-100" leave-to-class="scale-0 opacity-0">
     <div v-if="isVisible" class="fixed bottom-20 right-4 z-40">
       <!-- FAB Button -->
-      <Button
-        @click="handleClick"
-        class="h-14 w-14 rounded-full shadow-lg transition-all duration-200 hover:scale-110 active:scale-95"
-        variant="default"
-        size="icon"
-        aria-label="Warenkorb öffnen"
-      >
+      <Button @click="handleClick"
+        class="h-16 w-16 rounded-full shadow-gray-900 shadow-lg transition-all duration-200 hover:scale-110 active:scale-95"
+        variant="default" size="icon" aria-label="Warenkorb öffnen">
         <!-- Cart icon with relative positioning for badge -->
         <div class="relative">
-          <ShoppingCart class="h-6 w-6" />
+          <ShoppingCart class="h-6 w-6 scale-150" />
 
           <!-- Item count badge -->
           <Badge
-            class="absolute -top-2 -right-2 h-5 min-w-[20px] px-0.5 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border border-white dark:border-zinc-950"
-          >
+            class="absolute -top-4 -right-4 h-5.5 min-w-[22px] px-1.5 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border-2 border-purple-darkest shadow-lg scale-75">
             {{ itemCount > 99 ? '99+' : itemCount }}
           </Badge>
         </div>
       </Button>
 
       <!-- Price text below button -->
-      <div class="mt-2 text-center">
+      <!-- <div class="mt-2 text-center">
         <p class="text-xs font-semibold text-foreground whitespace-nowrap">
           {{ formattedTotal }}
         </p>
-      </div>
+      </div> -->
     </div>
   </Transition>
 </template>
diff --git a/app/components/Cart/CartSidebar.vue b/app/components/Cart/CartSidebar.vue
index 7a354bc..2d28fea 100644
--- a/app/components/Cart/CartSidebar.vue
+++ b/app/components/Cart/CartSidebar.vue
@@ -42,7 +42,7 @@ function handleCheckout() {
       </SheetHeader>
 
       <!-- Empty State -->
-      <div v-if="itemCount === 0" class="flex-1 flex items-center justify-center px-6">
+      <div v-if="itemCount === 0" class="flex-1 flex items-start justify-center px-6 pt-8">
         <CartEmpty />
       </div>