Enhance UI components with improved styles, animations, and transitions for better user experience
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user