Refactor UI components for improved styling and user experience

- 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

View File

@@ -44,24 +44,24 @@ async function handleLogout() {
<template>
<!-- Not logged in: Show login prompt -->
<NuxtLink v-if="!loggedIn" to="/auth"
class="flex items-center gap-2 px-4 py-2 rounded-2xl border-2 border-dashed border-muted-foreground/30 hover:border-experimenta-accent hover:bg-experimenta-accent/10 transition-all"
class="flex items-center gap-2 px-4 py-2 rounded-[35px] border-2 border-dashed border-muted-foreground/30 hover:border-experimenta-accent hover:bg-experimenta-accent/10 transition-all"
aria-label="Anmelden oder Registrieren">
<Avatar class="h-10 w-10 border-2 border-muted-foreground/30 rounded-2xl">
<AvatarFallback class="bg-muted text-muted-foreground rounded-2xl">
<User class="h-5 w-5" />
</AvatarFallback>
</Avatar>
<span class="text-sm font-medium hidden sm:inline">Anmelden</span>
<span class="font-medium hidden sm:inline">Anmelden</span>
</NuxtLink>
<!-- Logged in: Show user menu -->
<DropdownMenu v-else>
<DropdownMenuTrigger as-child>
<button
class="flex items-center gap-3 rounded-2xl px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 transition-all hover:bg-white/10"
class="flex items-center gap-3 rounded-[35px] px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 transition-all hover:bg-white/10"
aria-label="Benutzermenü öffnen">
<!-- Greeting text (Desktop only) -->
<span class="hidden md:inline font-medium text-white">
<span class="hidden md:inline font-medium text-white pl-2">
Hallo, {{ user?.firstName }}
</span>