From 5899988d60ca7c3ceeb9169796e24313e2145b43 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Wed, 5 Nov 2025 03:48:11 +0100
Subject: [PATCH] Enhance Checkout Page UI with Edit Icon and Button Refactor

- Added an Edit3 icon from 'lucide-vue-next' to the "Warenkorb bearbeiten" button for improved visual clarity.
- Refactored button structure for better alignment and responsiveness, consolidating button attributes into a single line for cleaner code.
---
 app/pages/checkout.vue | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/pages/checkout.vue b/app/pages/checkout.vue
index 6219eaa..c8f2f06 100644
--- a/app/pages/checkout.vue
+++ b/app/pages/checkout.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Edit3 } from 'lucide-vue-next'
+
 /**
  * Checkout Page (/checkout)
  *
@@ -152,10 +154,7 @@ async function handleCheckout(checkoutData: CheckoutData) {
                       }}
                     </p>
                   </div>
-                  <button
-                    @click="openCart"
-                    class="text-sm text-experimenta-accent hover:underline"
-                  >
+                  <button @click="openCart" class="text-sm text-experimenta-accent hover:underline">
                     Bearbeiten
                   </button>
                 </div>
@@ -232,12 +231,11 @@ async function handleCheckout(checkoutData: CheckoutData) {
                 </div>
 
                 <!-- Edit Cart Link -->
-                <div class="mt-6 pt-6 border-t border-white/20">
-                  <button
-                    @click="openCart"
-                    class="text-sm text-experimenta-accent hover:underline"
-                  >
-                    Warenkorb bearbeiten
+                <div class="pt-6 border-t border-white/20">
+                  <button @click="openCart"
+                    class="inline-flex items-center gap-2 text-sm text-experimenta-accent hover:text-experimenta-accent/80 transition-colors">
+                    <Edit3 :size="16" />
+                    <span>Warenkorb bearbeiten</span>
                   </button>
                 </div>
               </Card>