Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: Update UI components to TailAdmin theme

Browse Source 
- 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:
Joseph.Rawlings
2025-12-17 12:07:54 -05:00
parent 5004408751
commit 7a089f53e2
15 changed files with 184 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Tabs Component - shadcn-style
Tabs Component - TailAdmin style
Usage:
<x-proxmox::ui.tabs :tabs="['Overview', 'Settings', 'Logs']" active="Overview">
@@ -18,22 +18,22 @@
@php
$variantClasses = [
'default' => [
'container' => 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
'active' => 'bg-background text-foreground shadow',
'inactive' => 'hover:bg-background/50 hover:text-foreground',
'container' => 'inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-800 dark:bg-gray-800/50',
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-theme-sm font-medium transition-all duration-150',
'active' => 'bg-white text-gray-800 shadow-theme-xs dark:bg-gray-900 dark:text-white/90',
'inactive' => 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
],
'pills' => [
'container' => 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all duration-150',
'active' => 'bg-background text-foreground shadow',
'inactive' => 'hover:bg-background/50 hover:text-foreground',
'container' => 'inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-800 dark:bg-gray-800/50',
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-theme-sm font-medium transition-all duration-150',
'active' => 'bg-white text-gray-800 shadow-theme-xs dark:bg-gray-900 dark:text-white/90',
'inactive' => 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
],
'buttons' => [
'container' => 'flex gap-2',
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors duration-150',
'active' => 'bg-primary text-primary-foreground shadow',
'inactive' => 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2.5 text-theme-sm font-medium transition-colors duration-150',
'active' => 'bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600',
'inactive' => 'bg-white text-gray-700 shadow-theme-xs ring-1 ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700',
],
];
@@ -65,7 +65,7 @@
@endif
<span>{{ $tabLabel }}</span>
@if($tabBadge)
<span class="ml-1.5 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
<span class="ml-1.5 rounded-full bg-brand-50 px-2 py-0.5 text-theme-xs font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400">
{{ $tabBadge }}
</span>
@endif
@@ -74,7 +74,7 @@
</div>
{{-- Tab Panels --}}
<div class="mt-4">
<div class="mt-5">
{{ $slot }}
</div>
</div>