bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor UI components for improved styling and user experience

Browse Source 
- Updated UserMenu.vue to enhance button and avatar styles for a more modern look.
- Adjusted alert component styles in index.ts for consistent rounded corners.
- Simplified loading state markup in order confirmation page for cleaner code.
- Enhanced button and link text for better clarity and user navigation.

These changes aim to improve the overall aesthetic and usability of the application, ensuring a more cohesive user experience.
This commit is contained in:
Bastian Masanek
2025-11-03 17:17:40 +01:00
parent 782bd6cdd7
commit f6f09ca147
4 changed files with 22 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/pages/order/confirm/[orderId].vue
View File

@@ -119,9 +119,7 @@ onMounted(() => {
<!-- Loading State -->
<div v-if="isLoading" class="text-center py-12">
<div
class="animate-spin rounded-full h-12 w-12 border-4 border-white/20 border-t-white mx-auto mb-4"
/>
<div class="animate-spin rounded-full h-12 w-12 border-4 border-white/20 border-t-white mx-auto mb-4" />
<p class="text-white/60">Lade Bestellung...</p>
</div>
@@ -135,19 +133,11 @@ onMounted(() => {
<!-- Warning Notice -->
<Alert class="border-yellow-500/50 bg-yellow-500/10">
<div class="flex items-start gap-3">
<svg
class="w-5 h-5 text-yellow-500 mt-0.5 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
></path>
<svg class="w-5 h-5 text-yellow-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
</path>
</svg>
<div>
<AlertTitle class="text-yellow-500">Wichtiger Hinweis</AlertTitle>
@@ -162,34 +152,18 @@ onMounted(() => {
<!-- Confirmation Button -->
<Card class="p-6">
<div class="space-y-4">
<Button
@click="confirmOrder"
:disabled="isConfirming"
variant="experimenta"
size="experimenta"
class="w-full"
>
<Button @click="confirmOrder" :disabled="isConfirming" variant="experimenta" size="experimenta"
class="w-full">
<span v-if="!isConfirming" class="flex items-center justify-center gap-2">
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>Jetzt verbindlich bestellen</span>
</span>
<span v-else class="flex items-center gap-2">
<div
class="animate-spin rounded-full h-4 w-4 border-2 border-white/20 border-t-white"
/>
<div class="animate-spin rounded-full h-4 w-4 border-2 border-white/20 border-t-white" />
Bestätigung läuft...
</span>
</Button>
@@ -210,8 +184,8 @@ onMounted(() => {
<!-- Back Link -->
<div class="text-center pt-4">
<NuxtLink to="/checkout" class="text-sm text-experimenta-accent hover:underline">
← Zurück zur Kasse
<NuxtLink to="/warenkorb" class="text-sm text-experimenta-accent hover:underline">
← Zurück zum Warenkorb
</NuxtLink>
</div>
</div>