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

44
extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Info Notice / Alert Banner Component - shadcn-style
Info Notice / Alert Banner Component - TailAdmin style
Collapsible notice banners for important information
Usage:
@@ -25,28 +25,28 @@
@php
$variants = [
'info' => [
'bg' => 'bg-info/10',
'border' => 'border-info/20',
'bg' => 'bg-blue-light-50 dark:bg-blue-light-500/10',
'border' => 'border-blue-light-200 dark:border-blue-light-800',
'icon' => $icon ?? 'ri-information-line',
'iconColor' => 'text-info',
'iconColor' => 'text-blue-light-500',
],
'warning' => [
'bg' => 'bg-warning/10',
'border' => 'border-warning/20',
'bg' => 'bg-warning-50 dark:bg-warning-500/10',
'border' => 'border-warning-200 dark:border-warning-800',
'icon' => $icon ?? 'ri-alert-line',
'iconColor' => 'text-warning',
'iconColor' => 'text-warning-500',
],
'danger' => [
'bg' => 'bg-danger/10',
'border' => 'border-danger/20',
'bg' => 'bg-error-50 dark:bg-error-500/10',
'border' => 'border-error-200 dark:border-error-800',
'icon' => $icon ?? 'ri-error-warning-line',
'iconColor' => 'text-danger',
'iconColor' => 'text-error-500',
],
'success' => [
'bg' => 'bg-success/10',
'border' => 'border-success/20',
'bg' => 'bg-success-50 dark:bg-success-500/10',
'border' => 'border-success-200 dark:border-success-800',
'icon' => $icon ?? 'ri-checkbox-circle-line',
'iconColor' => 'text-success',
'iconColor' => 'text-success-500',
],
];
@@ -73,24 +73,24 @@
$config['bg'],
'border',
$config['border'],
'rounded-lg p-4',
'rounded-xl p-4',
]) }}
>
<div class="flex items-start gap-3">
<x-dynamic-component :component="$config['icon']" class="size-4 {{ $config['iconColor'] }} flex-shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<div class="flex items-start gap-3.5">
<x-dynamic-component :component="$config['icon']" class="mt-0.5 size-5 flex-shrink-0 {{ $config['iconColor'] }}" />
<div class="min-w-0 flex-1">
@if($title)
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-medium">{{ $title }}</h3>
<div class="mb-2 flex items-center justify-between">
<h3 class="text-theme-sm font-medium text-gray-800 dark:text-white/90">{{ $title }}</h3>
@if($collapsible)
<button @click="toggle()" type="button" class="text-muted-foreground hover:text-foreground transition-colors duration-150">
<x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-4 transition-transform rotate-180' : 'size-4 transition-transform'" />
<button @click="toggle()" type="button" class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
<x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-5 rotate-180 transition-transform' : 'size-5 transition-transform'" />
</button>
@endif
</div>
@endif
<div @if($collapsible) x-show="!isCollapsed" x-transition @endif class="text-sm text-muted-foreground">
<div @if($collapsible) x-show="!isCollapsed" x-transition @endif class="text-theme-sm text-gray-600 dark:text-gray-400">
{{ $slot }}
</div>
</div>