refactor: Update UI components to TailAdmin theme

- Changed badge, button, card, dropdown, input, modal, select, table, tabs, toggle, and tooltip components to align with the TailAdmin design system.
- Updated class names and styles for consistency across components.
- Enhanced accessibility and responsiveness in various components.
- Improved hover and focus states for better user experience.
This commit is contained in:
2025-12-17 12:07:54 -05:00
parent 5004408751
commit 7a089f53e2
15 changed files with 184 additions and 180 deletions

View File

@@ -1,5 +1,5 @@
{{--
Table Component - shadcn-style
Table Component - TailAdmin style
Usage:
<x-proxmox::ui.table>
@@ -21,27 +21,27 @@
'compact' => false,
])
<div @class(['relative w-full overflow-auto' => $responsive])>
<div @class(['relative w-full overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-800' => $responsive])>
<table
{{ $attributes->class([
'w-full caption-bottom text-sm',
'[&_tbody_tr:nth-child(even)]:bg-muted/50' => $striped,
'w-full text-theme-sm',
'[&_tbody_tr:nth-child(even)]:bg-gray-50 dark:[&_tbody_tr:nth-child(even)]:bg-gray-800/50' => $striped,
]) }}
data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
data-compact="{{ $compact ? 'true' : 'false' }}"
>
@if(isset($head))
<thead class="[&_tr]:border-b">
<tr class="border-b transition-colors">
<thead class="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-800/50">
<tr>
{{ $head }}
</tr>
</thead>
@endif
<tbody class="[&_tr:last-child]:border-0">
<tbody class="divide-y divide-gray-200 dark:divide-gray-800">
{{ $slot }}
</tbody>
@if(isset($foot))
<tfoot class="border-t bg-muted/50 font-medium [&>tr]:last:border-b-0">
<tfoot class="border-t border-gray-200 bg-gray-50 font-medium dark:border-gray-800 dark:bg-gray-800/50">
{{ $foot }}
</tfoot>
@endif