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

17
themes/lucentui/views/components/button/danger.blade.php
View File

@@ -1,3 +1,14 @@
<x-button.primary {{ $attributes->merge(['class' => 'bg-red-700 bg-none text-white py-2 px-4 rounded hover:bg-red-600'])}}>
{{ $slot }}
</x-button.primary>
<button
{{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-red-600 text-white text-sm font-semibold hover:bg-red-700 active:scale-95 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:ring-offset-2 focus:ring-offset-background transition-transform']) }}>
@if (isset($type) && $type === 'submit')
<div role="status" wire:loading>
<x-ri-loader-5-fill aria-hidden="true" class="size-6 me-2 fill-white animate-spin" />
<span class="sr-only">Loading...</span>
</div>
<div wire:loading.remove>
{{ $slot }}
</div>
@else
{{ $slot }}
@endif
</button>

2
themes/lucentui/views/components/button/primary.blade.php
View File

@@ -1,5 +1,5 @@
<button
{{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-primary text-white text-sm font-semibold hover:bg-primary/80 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-background']) }}>
{{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-primary text-white text-sm font-semibold hover:bg-primary/80 active:scale-95 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-background transition-transform']) }}>
@if (isset($type) && $type === 'submit')
<div role="status" wire:loading>
<x-ri-loader-5-fill aria-hidden="true" class="size-6 me-2 fill-background animate-spin" />

2
themes/lucentui/views/components/button/secondary.blade.php
View File

@@ -1,5 +1,5 @@
<button
{{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-background-secondary text-sm font-semibold border border-neutral hover:bg-background-secondary/80 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-neutral/50 focus:ring-offset-2 focus:ring-offset-background']) }}>
{{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-background-secondary text-sm font-semibold border border-neutral hover:bg-background-secondary/80 active:scale-95 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-neutral/50 focus:ring-offset-2 focus:ring-offset-background transition-transform']) }}>
@if (isset($type) && $type === 'submit')
<div role="status" wire:loading>
<x-ri-loader-5-fill aria-hidden="true" class="size-6 me-2 fill-background animate-spin" />

4
themes/lucentui/views/components/form/select.blade.php
View File

@@ -23,8 +23,8 @@
<select id="{{ $id ?? $name }}" {{ $multiple ? 'multiple' : '' }} {{ $attributes->only(['required', 'wire:model',
'wire:dirty.class', 'wire:model.live']) }}
class="block px-2.5 py-2.5 w-full text-sm text-primary-100 bg-background-secondary border-2 border-neutral
rounded-md outline-none focus:outline-none focus:border-secondary transition-all duration-300 ease-in-out form-select">
class="block px-2.5 py-2.5 w-full text-sm text-base bg-background-secondary/50 border border-neutral
rounded-md shadow-sm outline-none focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-300 ease-in-out form-select">
@if (count($options) == 0 && $slot)
{{ $slot }}
@else

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>

10
themes/lucentui/views/invoices/index.blade.php
View File

@@ -64,8 +64,8 @@
</div>
<div class="flex items-center gap-3 flex-shrink-0 mt-3 md:mt-0">
<div class="text-sm font-semibold px-3 py-1 rounded-full flex items-center gap-1.5
@if ($invoice->status == 'paid') text-success bg-success/20
<div class="text-sm font-semibold px-3 py-1 rounded-full flex items-center gap-1.5 transition-all duration-200
@if ($invoice->status == 'paid') text-success bg-success/20 status-pulse
@elseif($invoice->status == 'cancelled') text-inactive bg-inactive/20
@else text-warning bg-warning/20
@endif">
@@ -85,13 +85,13 @@
</div>
</a>
@empty
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 rounded-xl shadow-lg p-8 lg:p-12 border border-neutral/50 text-center">
<div class="bg-blue-500/10 rounded-full p-6 w-fit mx-auto mb-6">
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 rounded-xl shadow-lg p-8 lg:p-12 border border-neutral/50 text-center group">
<div class="bg-blue-500/10 rounded-full p-6 w-fit mx-auto mb-6 transition-transform duration-300 group-hover:scale-110">
<x-ri-file-list-3-line class="size-12 text-blue-500" />
</div>
<h3 class="text-2xl font-bold text-color-base mb-3">No invoices yet</h3>
<p class="text-color-muted mb-6 max-w-md mx-auto">Your invoices will appear here once you make a purchase. Browse our products to get started.</p>
<a href="/" wire:navigate class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary/80 transition-colors duration-200">
<a href="/" wire:navigate class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary/80 transition-all duration-200 hover:scale-105 active:scale-95">
<x-ri-shopping-cart-line class="size-5" />
Browse Products
</a>

10
themes/lucentui/views/services/index.blade.php
View File

@@ -101,8 +101,8 @@
</div>
<div class="flex items-center gap-3 flex-shrink-0 mt-3 md:mt-0">
<div class="text-sm font-semibold px-3 py-1 rounded-full flex items-center gap-1.5
@if ($service->status == 'active') text-success bg-success/20
<div class="text-sm font-semibold px-3 py-1 rounded-full flex items-center gap-1.5 transition-all duration-200
@if ($service->status == 'active') text-success bg-success/20 status-pulse
@elseif($service->status == 'suspended') text-red-500 bg-red-500/20
@elseif($service->status == 'cancelled') text-inactive bg-inactive/20
@else text-warning bg-warning/20
@@ -126,13 +126,13 @@
</div>
</a>
@empty
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 rounded-xl shadow-lg p-8 lg:p-12 border border-neutral/50 text-center">
<div class="bg-primary/10 rounded-full p-6 w-fit mx-auto mb-6">
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 rounded-xl shadow-lg p-8 lg:p-12 border border-neutral/50 text-center group">
<div class="bg-primary/10 rounded-full p-6 w-fit mx-auto mb-6 transition-transform duration-300 group-hover:scale-110">
<x-ri-server-line class="size-12 text-primary" />
</div>
<h3 class="text-2xl font-bold text-color-base mb-3">No services yet</h3>
<p class="text-color-muted mb-6 max-w-md mx-auto">Get started by browsing our products and find the perfect solution for your needs.</p>
<a href="/" wire:navigate class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary/80 transition-colors duration-200">
<a href="/" wire:navigate class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary/80 transition-all duration-200 hover:scale-105 active:scale-95">
<x-ri-shopping-cart-line class="size-5" />
Browse Products
</a>