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

@@ -8,8 +8,11 @@
<div class="p-6 lg:p-8">
<div class="flex items-start justify-between mb-6">
<div class="flex items-center gap-2">
<div class="size-2 bg-green-500 rounded-full animate-pulse"></div>
<span class="text-xs font-medium text-green-600 uppercase tracking-wide">Available</span>
<span class="relative flex size-2.5">
<span class="absolute inline-flex h-full w-full rounded-full bg-success opacity-60 animate-ping"></span>
<span class="relative inline-flex size-2.5 rounded-full bg-success"></span>
</span>
<span class="text-xs font-medium text-success uppercase tracking-wide">Available</span>
</div>
</div>
@@ -269,12 +272,12 @@
&& auth()->check() && empty(auth()->user()->tfa_secret)
)
{{-- TFA Required --}}
<div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl">
<div class="flex items-center gap-2 text-red-600 dark:text-red-400">
<div class="p-4 bg-error/10 border border-error/30 rounded-xl">
<div class="flex items-center gap-2 text-error">
<x-ri-error-warning-fill class="size-5" />
<span class="font-medium">Two-Factor Authentication Required</span>
</div>
<p class="text-sm text-red-500 dark:text-red-300 mt-1">
<p class="text-sm text-error/80 mt-1">
You must enable two-factor authentication to order this product.
</p>
</div>
@@ -286,24 +289,24 @@
&& !auth()->check()
)
{{-- Login Required --}}
<div class="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl">
<div class="flex items-center gap-2 text-blue-600 dark:text-blue-400">
<div class="p-4 bg-info/10 border border-info/30 rounded-xl">
<div class="flex items-center gap-2 text-info">
<x-ri-information-fill class="size-5" />
<span class="font-medium">Login and Two-Factor Authentication Required</span>
</div>
<p class="text-sm text-blue-500 dark:text-blue-300 mt-1">
<p class="text-sm text-info/80 mt-1">
You must be logged in to order this product and enable two-factor authentication.
</p>
</div>
@else
{{-- Currently Unavailable --}}
<div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl">
<div class="flex items-center gap-2 text-red-600 dark:text-red-400">
<div class="p-4 bg-error/10 border border-error/30 rounded-xl">
<div class="flex items-center gap-2 text-error">
<x-ri-error-warning-fill class="size-5" />
<span class="font-medium">Currently Unavailable</span>
</div>
<p class="text-sm text-red-500 dark:text-red-300 mt-1">
<p class="text-sm text-error/80 mt-1">
This product is currently out of stock or not available for purchase.
</p>
</div>