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

30
extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Help Modal Trigger Component - TailServer Theme
Help Modal Trigger Component - shadcn-style
Question mark button that opens an info modal
Usage:
@@ -19,17 +19,17 @@
])
<div class="relative" x-data="{ open: false }" x-cloak {{ $attributes }}>
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
<button type="button" @click="open = true" class="text-muted-foreground hover:text-foreground transition-colors duration-150">
<x-ri-question-line class="size-4" />
</button>
<!-- Modal Backdrop -->
<div
x-show="open"
x-transition:enter="transition ease-out duration-200"
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-150"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
@@ -41,38 +41,38 @@
<!-- Modal Content -->
<div
x-show="open"
x-transition:enter="transition ease-out duration-200"
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-150"
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-2xl max-h-[90vh] overflow-y-auto bg-background 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-2xl max-h-[90vh] overflow-y-auto rounded-xl 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">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-5 text-primary" />
<div class="flex items-center justify-center size-9 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-4 text-primary" />
</div>
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
<h3 class="text-lg font-semibold leading-none tracking-tight">
{{ $title }}
</h6>
</h3>
</div>
@if(isset($description))
<div class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
<div class="text-sm text-muted-foreground mb-4">
{{ $description }}
</div>
@endif
@if(isset($details))
<div class="pt-4 mt-4 border-t border-neutral/20 space-y-2.5 text-xs leading-relaxed text-base/75">
<div class="pt-4 mt-4 border-t space-y-2 text-sm text-muted-foreground">
{{ $details }}
</div>
@endif