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

50
extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Confirm Dialog Component - shadcn-style
Confirm Dialog Component - TailAdmin style
For dangerous actions like delete, stop, etc.
Usage:
@@ -26,21 +26,21 @@
$variants = [
'danger' => [
'icon' => 'ri-error-warning-line',
'iconBg' => 'bg-danger/10',
'iconColor' => 'text-danger',
'buttonClass' => 'bg-danger text-danger-foreground hover:bg-danger/90',
'iconBg' => 'bg-error-50 dark:bg-error-500/10',
'iconColor' => 'text-error-500',
'buttonClass' => 'bg-error-500 text-white shadow-theme-xs hover:bg-error-600',
],
'warning' => [
'icon' => 'ri-alert-line',
'iconBg' => 'bg-warning/10',
'iconColor' => 'text-warning',
'buttonClass' => 'bg-warning text-warning-foreground hover:bg-warning/90',
'iconBg' => 'bg-warning-50 dark:bg-warning-500/10',
'iconColor' => 'text-warning-500',
'buttonClass' => 'bg-warning-500 text-white shadow-theme-xs hover:bg-warning-600',
],
'primary' => [
'icon' => 'ri-question-line',
'iconBg' => 'bg-primary/10',
'iconColor' => 'text-primary',
'buttonClass' => 'bg-primary text-primary-foreground hover:bg-primary/90',
'iconBg' => 'bg-brand-50 dark:bg-brand-500/10',
'iconColor' => 'text-brand-500',
'buttonClass' => 'bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600',
],
];
@@ -52,52 +52,52 @@
x-show="open"
x-cloak
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 overflow-y-auto"
class="fixed inset-0 z-99999 overflow-y-auto"
{{ $attributes->whereDoesntStartWith('wire:click') }}
>
<div class="flex items-center justify-center min-h-screen p-4">
<div class="flex min-h-screen items-center justify-center p-4">
<!-- Backdrop -->
<div
x-show="open"
x-transition:enter="ease-out duration-150"
x-transition:enter="ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-100"
x-transition:leave="ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
class="fixed inset-0 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 bg-gray-900/50 backdrop-blur-sm dark:bg-gray-900/80"
></div>
<!-- Dialog -->
<div
x-show="open"
x-transition:enter="ease-out duration-150"
x-transition:enter="ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="ease-in duration-100"
x-transition:leave="ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="relative rounded-lg border bg-background shadow-lg w-full max-w-md p-6"
class="relative w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900"
>
<div class="flex flex-col items-center text-center">
<!-- Icon -->
<div class="p-3 rounded-full {{ $config['iconBg'] }} mb-4">
<x-dynamic-component :component="$config['icon']" class="size-6 {{ $config['iconColor'] }}" />
<div class="mb-5 flex size-14 items-center justify-center rounded-full {{ $config['iconBg'] }}">
<x-dynamic-component :component="$config['icon']" class="size-7 {{ $config['iconColor'] }}" />
</div>
<!-- Title -->
<h3 class="text-lg font-semibold leading-none tracking-tight mb-2">{{ $title }}</h3>
<h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h3>
<!-- Message -->
<p class="text-sm text-muted-foreground mb-6">{{ $message }}</p>
<p class="mb-6 text-theme-sm text-gray-500 dark:text-gray-400">{{ $message }}</p>
<!-- Actions -->
<div class="flex gap-2 w-full">
<div class="flex w-full gap-3">
<button
type="button"
@click="open = false"
class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-150 h-9 px-4 py-2 border bg-background hover:bg-accent hover:text-accent-foreground"
class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-lg bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-gray-300 transition-colors duration-150 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700"
>
{{ $cancelLabel }}
</button>
@@ -105,7 +105,7 @@
type="button"
@click="open = false"
{{ $attributes->whereStartsWith('wire:click') }}
class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-150 h-9 px-4 py-2 {{ $config['buttonClass'] }}"
class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2.5 text-theme-sm font-medium transition-colors duration-150 {{ $config['buttonClass'] }}"
>
{{ $confirmLabel }}
</button>