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

refactor: update Proxmox UI components to use TailAdmin styling

Browse Source 
- Changed component styles and classes to align with TailAdmin design patterns.
- Updated color schemes, typography, and layout for consistency across components.
- Refactored Info Row, Network Address Card, Notice Banner, Progress Bar, Resource Gauge, Section Header, Server Status, Spinner, Stat Card, and Tab Panel components.
- Enhanced responsiveness and accessibility features in various components.
This commit is contained in:
Joseph.Rawlings
2025-12-17 12:33:10 -05:00
parent 7a089f53e2
commit b4e2923a2c
23 changed files with 364 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
extensions/Servers/Proxmox/views/components/ui/info-row.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Info Row / Key-Value Pair Component - shadcn-style
Info Row / Key-Value Pair Component - TailAdmin style
Usage:
<x-proxmox::ui.info-row label="IP Address" value="192.168.1.1" />
@@ -16,17 +16,18 @@
'muted' => false,
])
<div {{ $attributes->class(['flex items-center justify-between py-2 border-b last:border-b-0']) }}>
<div class="flex items-center gap-2 text-sm text-muted-foreground">
<div {{ $attributes->class(['flex items-center justify-between border-b border-gray-200 py-3 last:border-b-0 dark:border-gray-800']) }}>
<div class="flex items-center gap-2.5 text-theme-sm text-gray-500 dark:text-gray-400">
@if($icon)
<x-dynamic-component :component="$icon" class="size-4" />
@endif
<span>{{ $label }}</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-2.5">
<span @class([
'text-sm font-medium',
'text-muted-foreground' => $muted,
'text-theme-sm font-medium',
'text-gray-500 dark:text-gray-400' => $muted,
'text-gray-800 dark:text-white/90' => !$muted,
])>
{{ $value ?? $slot }}
</span>
@@ -39,11 +40,11 @@
copied = true;
setTimeout(() => copied = false, 2000);
"
class="rounded-sm p-1 text-muted-foreground hover:text-foreground transition-colors duration-150"
class="rounded-lg p-1 text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
title="Copy to clipboard"
>
<x-ri-file-copy-line x-show="!copied" class="size-4" />
<x-ri-check-line x-show="copied" x-cloak class="size-4 text-success" />
<x-ri-check-line x-show="copied" x-cloak class="size-4 text-success-500" />
</button>
@endif
</div>