Browse Source

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.
main
Bastian Masanek 1 month ago
parent
commit
5899988d60
  1. 18
      app/pages/checkout.vue

18
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>

Loading…
Cancel
Save