feat: Enhance UI components with improved styles and responsiveness across various views
This commit is contained in:
@@ -40,18 +40,18 @@
|
||||
|
||||
@forelse ($invoices as $invoice)
|
||||
<a href="{{ route('invoices.show', $invoice) }}" wire:navigate class="block">
|
||||
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 hover:bg-secondary/25 border border-neutral/50 p-6 rounded-xl shadow-lg
|
||||
transition-all duration-300 hover:scale-[1.01] hover:shadow-xl hover:border-primary/50
|
||||
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 hover:bg-secondary/25 border border-neutral/50 p-6 rounded-xl shadow-lg hover-lift
|
||||
transition-all duration-300 hover:shadow-xl hover:border-primary/50
|
||||
flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
||||
|
||||
<div class="flex items-start md:items-center gap-4 flex-grow">
|
||||
<div class="bg-blue-500/10 p-3 rounded-full flex-shrink-0 shadow-sm">
|
||||
<x-ri-bill-line class="size-6 text-blue-500" />
|
||||
<div class="bg-primary/10 p-3 rounded-full flex-shrink-0 shadow-sm">
|
||||
<x-ri-bill-line class="size-6 text-primary" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xl font-bold text-color-base leading-tight">{{ __('Invoice') }} #{{ $invoice->number }}</span>
|
||||
<p class="text-color-muted text-sm mt-1">
|
||||
{{ __('Total') }}: <span class="font-bold text-primary">{{ $invoice->formattedTotal }}</span>
|
||||
{{ __('Total') }}: <span class="font-bold tnum text-primary">{{ $invoice->formattedTotal }}</span>
|
||||
<span class="mx-2 text-color-muted/50">•</span>
|
||||
{{ __('invoices.invoice_date') }}: {{ $invoice->created_at->format('d M Y') }}
|
||||
</p>
|
||||
@@ -86,8 +86,8 @@
|
||||
</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 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 empty-state-float">
|
||||
<x-ri-file-list-3-line class="size-12 text-blue-500" />
|
||||
<div class="bg-primary/10 rounded-full p-6 w-fit mx-auto mb-6 transition-transform duration-300 group-hover:scale-110 empty-state-float">
|
||||
<x-ri-file-list-3-line class="size-12 text-primary" />
|
||||
</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>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="space-y-4">
|
||||
@foreach ($invoices as $invoice)
|
||||
<a href="{{ route('invoices.show', $invoice) }}" wire:navigate>
|
||||
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 p-4 rounded-lg mb-4">
|
||||
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 p-4 rounded-lg mb-4 hover-lift">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-secondary/10 p-2 rounded-full">
|
||||
@@ -11,7 +11,7 @@
|
||||
<span class="text-base/50 font-semibold">
|
||||
<x-ri-circle-fill class="size-1 text-base/20" />
|
||||
</span>
|
||||
<span class="text-base text-sm">{{ $invoice->formattedTotal }}</span>
|
||||
<span class="text-base text-sm tnum">{{ $invoice->formattedTotal }}</span>
|
||||
</div>
|
||||
<div class="size-5 rounded-full p-0.5
|
||||
@if ($invoice->status == 'paid') text-success bg-success/20
|
||||
|
||||
Reference in New Issue
Block a user