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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user