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

This commit is contained in:
2026-02-01 13:21:08 -05:00
parent 40ea5dc0b6
commit d291a3b743
9 changed files with 125 additions and 38 deletions

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>