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

40
extensions/Servers/Proxmox/views/components/ui/section-header.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Section Header Component - TailServer Theme
Section Header Component - shadcn-style
Usage:
<x-proxmox::ui.section-header title="Section Title" />
@@ -24,8 +24,8 @@
$titleSizes = [
'sm' => 'text-base font-semibold',
'md' => 'text-lg font-semibold',
'lg' => 'text-xl font-semibold',
'xl' => 'text-2xl font-bold',
'lg' => 'text-xl font-semibold tracking-tight',
'xl' => 'text-2xl font-bold tracking-tight',
];
$titleClass = $titleSizes[$size] ?? $titleSizes['lg'];
@endphp
@@ -33,29 +33,29 @@
<div {{ $attributes->class(['flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between']) }}>
<div class="flex items-start gap-3">
@if($icon)
<div class="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
<div class="flex-shrink-0 flex items-center justify-center size-9 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
</div>
@endif
<div>
<div class="space-y-1">
<div class="flex items-center gap-2 min-w-0">
<h2 class="{{ $titleClass }} text-base break-words">{{ $title }}</h2>
<h2 class="{{ $titleClass }}">{{ $title }}</h2>
@if($helpText)
<div class="relative" x-data="{ open: false }" x-cloak>
<button
type="button"
@click="open = true"
class="text-base/50 hover:text-base/70 transition-colors"
class="text-muted-foreground hover:text-foreground transition-colors duration-150"
>
<x-ri-question-line class="size-4" />
</button>
{{-- Help Modal --}}
<div
x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
@@ -65,29 +65,29 @@
></div>
<div
x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;"
>
<div class="relative w-full max-w-lg max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
<x-ri-close-line class="size-5" />
<div class="relative w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-lg border bg-background shadow-lg p-6">
<button @click="open = false" class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity duration-150 hover:opacity-100">
<x-ri-close-line class="size-4" />
</button>
<div class="flex items-center gap-3 mb-4 pr-8">
@if($icon)
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
<div class="flex items-center justify-center size-9 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
</div>
@endif
<h6 class="text-lg font-semibold">{{ $title }}</h6>
<h3 class="text-lg font-semibold leading-none tracking-tight">{{ $title }}</h3>
</div>
<div class="text-sm text-base/70 leading-relaxed">
<div class="text-sm text-muted-foreground">
{{ $helpText }}
</div>
</div>
@@ -96,7 +96,7 @@
@endif
</div>
@if($subtitle)
<p class="text-sm text-base/60 mt-0.5">{{ $subtitle }}</p>
<p class="text-sm text-muted-foreground">{{ $subtitle }}</p>
@endif
</div>
</div>