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

46
extensions/Servers/Proxmox/views/components/ui/button.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Button Component - shadcn-inspired
Button Component - TailAdmin Theme
Usage:
<x-proxmox::ui.button>Click me</x-proxmox::ui.button>
@@ -24,36 +24,36 @@
@php
$tag = $href ? 'a' : 'button';
$baseClasses = 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';
$baseClasses = 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-brand-500/10 disabled:pointer-events-none disabled:opacity-50';
$variantClasses = [
'primary' => 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
'secondary' => 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
'outline' => 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
'ghost' => 'hover:bg-accent hover:text-accent-foreground',
'danger' => 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
'success' => 'bg-success text-white shadow-sm hover:bg-success/90',
'warning' => 'bg-warning text-white shadow-sm hover:bg-warning/90',
'info' => 'bg-info text-white shadow-sm hover:bg-info/90',
'link' => 'text-primary underline-offset-4 hover:underline',
'primary' => 'bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600',
'secondary' => 'bg-white text-gray-700 shadow-theme-xs ring-1 ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03]',
'outline' => 'border border-gray-300 bg-white shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200',
'ghost' => 'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-white/5 dark:hover:text-gray-300',
'danger' => 'bg-error-500 text-white shadow-theme-xs hover:bg-error-600',
'success' => 'bg-success-500 text-white shadow-theme-xs hover:bg-success-600',
'warning' => 'bg-warning-500 text-white shadow-theme-xs hover:bg-warning-600',
'info' => 'bg-blue-light-500 text-white shadow-theme-xs hover:bg-blue-light-600',
'link' => 'text-brand-500 hover:text-brand-600 hover:underline underline-offset-4',
];
$sizeClasses = [
'xs' => 'h-7 px-2 text-xs',
'sm' => 'h-8 px-3 text-xs',
'md' => 'h-9 px-4 py-2',
'lg' => 'h-10 px-8',
'xl' => 'h-11 px-10 text-base',
'icon' => 'h-9 w-9',
'xs' => 'h-8 px-2.5 text-xs',
'sm' => 'h-9 px-3 text-sm',
'md' => 'h-10 px-4 text-sm',
'lg' => 'h-11 px-5 text-sm',
'xl' => 'h-12 px-6 text-base',
'icon' => 'h-10 w-10',
];
$iconSizes = [
'xs' => 'size-3',
'sm' => 'size-3.5',
'xs' => 'size-3.5',
'sm' => 'size-4',
'md' => 'size-4',
'lg' => 'size-4',
'lg' => 'size-5',
'xl' => 'size-5',
'icon' => 'size-4',
'icon' => 'size-5',
];
$classes = collect([
@@ -80,11 +80,11 @@
<span>{{ $loadingText ?? $slot }}</span>
@else
@if($icon)
<x-dynamic-component :component="$icon" class="{{ $iconSize }}" />
<x-dynamic-component :component="$icon" class="fill-current {{ $iconSize }}" />
@endif
{{ $slot }}
@if($iconRight)
<x-dynamic-component :component="$iconRight" class="{{ $iconSize }}" />
<x-dynamic-component :component="$iconRight" class="fill-current {{ $iconSize }}" />
@endif
@endif
</{{ $tag }}>