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

40
extensions/Servers/Proxmox/views/components/ui/allocation-card.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Resource Allocation Card Component - shadcn-style
Resource Allocation Card Component - TailAdmin style
For displaying CPU, Memory, and other resource allocation vs entitlement
Usage:
@@ -10,7 +10,7 @@
entitlement-label="4 vCPU entitlement"
description="Live hypervisor usage sampled directly from the cluster."
gradient="linear-gradient(90deg, #38bdf8 0%, #6366f1 100%)"
:badge="['label' => 'Healthy', 'class' => 'text-success bg-success/15']"
:badge="['label' => 'Healthy', 'class' => 'text-success-500 bg-success-50 dark:bg-success-500/15']"
/>
--}}
@@ -20,41 +20,41 @@
'usageSummary',
'entitlementLabel',
'description' => null,
'gradient' => 'linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%)',
'gradient' => 'linear-gradient(90deg, #465fff 0%, #8b5cf6 100%)',
'badge' => null,
'icon' => null,
'iconColor' => 'text-primary',
'iconColor' => 'text-brand-500',
])
<div {{ $attributes->class(['rounded-xl border bg-card p-4 shadow-sm transition-colors duration-150 hover:bg-accent/50']) }}>
<div class="flex flex-col gap-3">
<div {{ $attributes->class(['rounded-2xl border border-gray-200 bg-white p-5 transition-colors duration-150 hover:bg-gray-50 dark:border-gray-800 dark:bg-white/[0.03] dark:hover:bg-gray-800/50']) }}>
<div class="flex flex-col gap-4">
<div class="flex items-start justify-between gap-3">
<div class="flex items-start gap-3">
<div class="flex items-start gap-3.5">
@if($icon)
<div class="flex-shrink-0 size-9 rounded-lg bg-primary/10 flex items-center justify-center">
<x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
<div class="flex size-11 flex-shrink-0 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/10">
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }} dark:text-brand-400" />
</div>
@endif
<div class="min-w-0 space-y-0.5">
<p class="text-xs font-medium text-muted-foreground">{{ $label }}</p>
<p class="text-xl font-bold tracking-tight">{{ $usageSummary }}</p>
<p class="text-xs text-muted-foreground">{{ $entitlementLabel }}</p>
<div class="min-w-0 space-y-1">
<p class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">{{ $label }}</p>
<p class="text-xl font-bold text-gray-800 dark:text-white/90">{{ $usageSummary }}</p>
<p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $entitlementLabel }}</p>
</div>
</div>
@if($badge)
<span class="flex-shrink-0 text-xs font-medium px-2 py-0.5 rounded-full {{ $badge['class'] ?? 'text-muted-foreground bg-muted' }}">
<span class="flex-shrink-0 rounded-full px-2.5 py-1 text-theme-xs font-medium {{ $badge['class'] ?? 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-400' }}">
{{ $badge['label'] ?? '' }}
</span>
@endif
</div>
@if(!is_null($percent))
<div class="space-y-1.5">
<div class="flex items-center justify-between text-xs">
<span class="text-muted-foreground">Usage</span>
<span class="font-medium">{{ $percent }}%</span>
<div class="space-y-2">
<div class="flex items-center justify-between text-theme-xs">
<span class="text-gray-500 dark:text-gray-400">Usage</span>
<span class="font-semibold text-gray-800 dark:text-white/90">{{ $percent }}%</span>
</div>
<div class="h-1.5 rounded-full bg-muted overflow-hidden">
<div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div
class="h-full rounded-full transition-all duration-300"
style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
@@ -64,7 +64,7 @@
@endif
@if($description)
<p class="text-xs text-muted-foreground/70">{{ $description }}</p>
<p class="text-theme-xs text-gray-400 dark:text-gray-500">{{ $description }}</p>
@endif
</div>
</div>