feat: Enhance UI components with improved styles and responsiveness across various views
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user