feat: Enhance UI components with improved styles and responsiveness across various views

This commit is contained in:
2026-04-22 10:56:39 -04:00
parent 8baf7d6c7d
commit 71b031ca64
14 changed files with 108 additions and 103 deletions

View File

@@ -37,7 +37,7 @@
<div class="bg-success/10 border border-success/50 rounded-xl p-4 text-center status-card-hover">
<div class="flex items-center justify-center mb-2">
<x-ri-checkbox-circle-fill class="size-6 text-success mr-2" />
<span class="text-2xl font-bold text-success">{{ $services->where('status', 'active')->count() }}</span>
<span class="text-2xl font-bold tnum text-success">{{ $services->where('status', 'active')->count() }}</span>
</div>
<p class="text-sm font-medium text-success">{{ __('Active') }}</p>
</div>
@@ -45,23 +45,23 @@
<div class="bg-warning/10 border border-warning/50 rounded-xl p-4 text-center status-card-hover">
<div class="flex items-center justify-center mb-2">
<x-ri-error-warning-fill class="size-6 text-warning mr-2" />
<span class="text-2xl font-bold text-warning">{{ $services->where('status', 'pending')->count() }}</span>
<span class="text-2xl font-bold tnum text-warning">{{ $services->where('status', 'pending')->count() }}</span>
</div>
<p class="text-sm font-medium text-warning">{{ __('Pending') }}</p>
</div>
<div class="bg-error/10 border border-error/50 rounded-xl p-4 text-center status-card-hover">
<div class="flex items-center justify-center mb-2">
<x-ri-forbid-fill class="size-6 text-red-500 mr-2" />
<span class="text-2xl font-bold text-red-500">{{ $services->where('status', 'suspended')->count() }}</span>
<x-ri-forbid-fill class="size-6 text-error mr-2" />
<span class="text-2xl font-bold tnum text-error">{{ $services->where('status', 'suspended')->count() }}</span>
</div>
<p class="text-sm font-medium text-red-500">{{ __('Suspended') }}</p>
<p class="text-sm font-medium text-error">{{ __('Suspended') }}</p>
</div>
<div class="bg-inactive/10 border border-inactive/50 rounded-xl p-4 text-center status-card-hover">
<div class="flex items-center justify-center mb-2">
<x-ri-close-circle-fill class="size-6 text-inactive mr-2" />
<span class="text-2xl font-bold text-inactive">{{ $services->where('status', 'cancelled')->count() }}</span>
<span class="text-2xl font-bold tnum text-inactive">{{ $services->where('status', 'cancelled')->count() }}</span>
</div>
<p class="text-sm font-medium text-inactive">{{ __('Cancelled') }}</p>
</div>
@@ -86,8 +86,8 @@
@forelse ($services as $service)
<a href="{{ route('services.show', $service) }}" 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.02] 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">
@@ -140,7 +140,7 @@
<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 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 == 'suspended') text-error bg-error/20
@elseif($service->status == 'cancelled') text-inactive bg-inactive/20
@else text-warning bg-warning/20
@endif">