Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Enhance UI components with improved styles, animations, and transitions for better user experience

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-02-01 13:21:08 -05:00
parent 40ea5dc0b6
commit d291a3b743
9 changed files with 125 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
themes/lucentui/views/components/notification.blade.php
View File

@@ -2,25 +2,40 @@
<template x-for="(notification, index) in $store.notifications.notifications" :key="notification.id">
<div x-show="notification.show"
x-transition:enter="transition ease-out duration-300 transform"
x-transition:enter-start="opacity-0 translate-x-full"
x-transition:enter-end="opacity-100 translate-x-0"
x-transition:enter-start="opacity-0 translate-x-full scale-95"
x-transition:enter-end="opacity-100 translate-x-0 scale-100"
x-transition:leave="transition ease-in duration-200 transform"
x-transition:leave-start="opacity-100 translate-x-0"
x-transition:leave-end="opacity-0 translate-x-full"
x-transition:leave-start="opacity-100 translate-x-0 scale-100"
x-transition:leave-end="opacity-0 translate-x-full scale-95"
:class="notification.type === 'success' ? 'bg-success border-success/50' : 'bg-error border-error/50'"
class="flex items-center justify-between gap-3 text-white px-4 py-3 rounded-xl shadow-lg border backdrop-blur-sm pointer-events-auto">
<div class="flex items-center gap-3">
<template x-if="notification.type === 'success'">
<svg class="size-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</template>
<template x-if="notification.type !== 'success'">
<svg class="size-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</template>
<p x-text="notification.message" class="text-sm font-medium"></p>
class="relative flex flex-col text-white rounded-xl shadow-lg border backdrop-blur-sm pointer-events-auto overflow-hidden">
<div class="flex items-center justify-between gap-3 px-4 py-3">
<div class="flex items-center gap-3">
<template x-if="notification.type === 'success'">
<svg class="size-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</template>
<template x-if="notification.type !== 'success'">
<svg class="size-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</template>
<p x-text="notification.message" class="text-sm font-medium"></p>
</div>
<button @click="$store.notifications.removeNotification(notification.id)" class="text-white/70 hover:text-white transition-colors p-1 rounded-full hover:bg-white/10">
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
{{-- Auto-dismiss countdown progress bar --}}
<div class="h-1 bg-white/20">
<div class="h-full bg-white/50 notification-progress"
:class="notification.type === 'success' ? 'bg-white/60' : 'bg-white/60'"
style="animation: notification-countdown 5s linear forwards;"></div>
</div>
<button @click="$store.notifications.removeNotification(notification.id)" class="text-white/70 hover:text-white transition-colors p-1 rounded-full hover:bg-white/10">
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
</template>
</div>
<style>
@keyframes notification-countdown {
from { width: 100%; }
to { width: 0%; }
}
</style>