Enhance UI components with improved styles, animations, and transitions for better user experience

themes/lucentui/views/components/button/danger.blade.php

@@ -1,3 +1,14 @@
-<x-button.primary {{ $attributes->merge(['class' => 'bg-red-700 bg-none text-white py-2 px-4 rounded hover:bg-red-600'])}}>
-    {{ $slot }}
-</x-button.primary>
+<button 
+    {{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-red-600 text-white text-sm font-semibold hover:bg-red-700 active:scale-95 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:ring-offset-2 focus:ring-offset-background transition-transform']) }}>
+    @if (isset($type) && $type === 'submit')
+        <div role="status" wire:loading>
+            <x-ri-loader-5-fill aria-hidden="true" class="size-6 me-2 fill-white animate-spin" />
+            <span class="sr-only">Loading...</span>
+        </div>
+        <div wire:loading.remove>
+            {{ $slot }}
+        </div>
+    @else
+        {{ $slot }}
+    @endif
+</button>