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

refactor: update UI components to shadcn-style

Browse Source 
- Refactored select component to align with shadcn design principles.
- Updated server status indicator component for consistency with shadcn style.
- Modified spinner component to follow shadcn design guidelines.
- Enhanced stat card component with shadcn-inspired styles.
- Adjusted tab panel component to reflect shadcn design updates.
- Revamped table row and table data cell components to match shadcn aesthetics.
- Updated table header cell component for improved styling consistency.
- Refined table component to align with shadcn design principles.
- Enhanced tabs component with shadcn-inspired styles.
- Updated toggle component to follow shadcn design guidelines.
- Refactored tooltip component to align with shadcn design principles.
- Updated server card component to reflect shadcn-inspired design.
This commit is contained in:
Joseph.Rawlings
2025-12-17 11:47:42 -05:00
parent e7b33a2f6c
commit 7190d7a818
34 changed files with 522 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
{{--
Resource Allocation Card Component - TailServer Theme
Resource Allocation Card Component - shadcn-style
For displaying CPU, Memory, and other resource allocation vs entitlement
Usage:
@@ -26,26 +26,23 @@
'iconColor' => 'text-primary',
])
<div {{ $attributes->class(['group relative border border-neutral/20 rounded-xl p-4 bg-background hover:border-neutral/30 hover:shadow-sm transition-all duration-200']) }}>
{{-- Subtle gradient overlay on hover --}}
<div class="absolute inset-0 rounded-xl bg-gradient-to-br from-primary/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
<div class="relative flex flex-col gap-3">
<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 class="flex items-start justify-between gap-3">
<div class="flex items-start gap-3">
@if($icon)
<div class="flex-shrink-0 w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center">
<x-dynamic-component :component="$icon" class="size-4.5 {{ $iconColor }}" />
<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>
@endif
<div class="min-w-0">
<p class="text-[11px] font-semibold tracking-wider uppercase text-base/50">{{ $label }}</p>
<p class="text-xl font-bold text-base leading-tight mt-0.5">{{ $usageSummary }}</p>
<p class="text-xs text-base/50 mt-0.5">{{ $entitlementLabel }}</p>
<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>
</div>
@if($badge)
<span class="flex-shrink-0 text-[10px] font-bold px-2 py-1 rounded-full {{ $badge['class'] ?? 'text-base/60 bg-neutral/10' }}">
<span class="flex-shrink-0 text-xs font-medium px-2 py-0.5 rounded-full {{ $badge['class'] ?? 'text-muted-foreground bg-muted' }}">
{{ $badge['label'] ?? '' }}
</span>
@endif
@@ -54,12 +51,12 @@
@if(!is_null($percent))
<div class="space-y-1.5">
<div class="flex items-center justify-between text-xs">
<span class="text-base/50">Usage</span>
<span class="font-semibold text-base/70">{{ $percent }}%</span>
<span class="text-muted-foreground">Usage</span>
<span class="font-medium">{{ $percent }}%</span>
</div>
<div class="h-1.5 rounded-full bg-neutral/10 overflow-hidden">
<div class="h-1.5 rounded-full bg-muted overflow-hidden">
<div
class="h-full rounded-full transition-all duration-500 ease-out"
class="h-full rounded-full transition-all duration-300"
style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
></div>
</div>
@@ -67,7 +64,7 @@
@endif
@if($description)
<p class="text-[11px] text-base/40 leading-relaxed">{{ $description }}</p>
<p class="text-xs text-muted-foreground/70">{{ $description }}</p>
@endif
</div>
</div>