Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code 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

34
extensions/Servers/Proxmox/views/components/ui/card.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Card Component - shadcn-inspired
Card Component - TailAdmin Theme
Usage:
<x-proxmox::ui.card>Content</x-proxmox::ui.card>
@@ -11,7 +11,7 @@
'title' => null,
'subtitle' => null,
'icon' => null,
'iconColor' => 'text-primary',
'iconColor' => 'text-brand-500',
'actions' => null,
'footer' => null,
'footerClass' => '',
@@ -24,8 +24,8 @@
<div
{{ $attributes->class([
'rounded-xl border bg-card shadow-sm',
'hover:bg-accent/50 transition-colors duration-150' => $hover || $clickable,
'rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]',
'hover:shadow-theme-md transition-shadow duration-200' => $hover || $clickable,
'cursor-pointer' => $clickable,
]) }}
@if($collapsible)
@@ -33,19 +33,19 @@
@endif
>
@if($title || $actions)
<div class="flex items-center justify-between gap-4 p-6 pb-0">
<div class="flex items-center justify-between gap-4 px-6 py-5">
<div class="flex items-center gap-3">
@if($icon)
<div class="flex items-center justify-center size-9 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
<div class="flex items-center justify-center size-10 rounded-xl bg-brand-50 dark:bg-brand-500/10">
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
</div>
@endif
<div class="space-y-1">
<div class="space-y-0.5">
@if($title)
<h3 class="font-semibold leading-none tracking-tight">{{ $title }}</h3>
<h3 class="text-base font-medium text-gray-800 dark:text-white/90">{{ $title }}</h3>
@endif
@if($subtitle)
<p class="text-sm text-muted-foreground">{{ $subtitle }}</p>
<p class="text-theme-sm text-gray-500 dark:text-gray-400">{{ $subtitle }}</p>
@endif
</div>
</div>
@@ -58,10 +58,10 @@
<button
type="button"
@click="isCollapsed = !isCollapsed"
class="p-1.5 rounded-md hover:bg-muted transition-colors duration-150"
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition-colors duration-200"
>
<x-ri-arrow-down-s-line
class="size-4 text-muted-foreground transition-transform duration-150"
class="size-5 text-gray-500 dark:text-gray-400 transition-transform duration-200"
x-bind:class="isCollapsed ? 'rotate-180' : ''"
/>
</button>
@@ -73,15 +73,15 @@
<div
@class([
'p-6',
'pt-4' => $title,
'border-t border-gray-100 dark:border-gray-800' => $title,
'p-5 sm:p-6',
])
@if($collapsible)
x-show="!isCollapsed"
x-transition:enter="transition ease-out duration-150"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@endif
@@ -90,7 +90,7 @@
</div>
@if($footer)
<div class="flex items-center p-6 pt-0 {{ $footerClass }}">
<div class="flex items-center border-t border-gray-100 dark:border-gray-800 px-6 py-4 {{ $footerClass }}">
{{ $footer }}
</div>
@endif