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

8
app/components/UserMenu.vue
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>

5
app/components/ui/alert/index.ts
View File

@@ -6,15 +6,14 @@ export { default as AlertDescription } from './AlertDescription.vue'
export { default as AlertTitle } from './AlertTitle.vue'
export const alertVariants = cva(
'relative w-full rounded-lg border p-4 flex items-center gap-3 [&>svg]:shrink-0 [&>svg]:text-foreground',
'relative w-full rounded-[25px] border p-4 flex items-center gap-3 [&>svg]:shrink-0 [&>svg]:text-foreground',
{
variants: {
variant: {
default: 'bg-background text-foreground',
destructive:
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
error:
'bg-white/15 border-l-4 border-warning text-white [&>svg]:text-warning',
error: 'bg-white/15 border-l-4 border-warning text-white [&>svg]:text-warning',
},
},
defaultVariants: {