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

Remove unnecessary .gitignore files and enhance button and notification components with improved accessibility and styling

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-02-01 10:53:01 -05:00
parent 24886a3d58
commit 10c978eae9
10 changed files with 60 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,26 @@
<div x-data>
<div x-data class="fixed bottom-4 right-4 z-50 flex flex-col-reverse gap-3 max-w-sm w-full pointer-events-none">
<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"
x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90" @click="$store.notifications.removeNotification(notification.id)"
:class="notification.type === 'success' ? 'bg-secondary' : 'bg-red-500'"
class="fixed text-white px-4 py-2 rounded shadow-md mb-4 z-50"
:style="'top: ' + (20 + index * 60) + 'px;left: 50%; transform: translateX(-50%);'">
<p x-text="notification.message"></p>
<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: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"
: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>
</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>