refactor: update Proxmox UI components to use TailAdmin styling

- 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:
2025-12-17 12:33:10 -05:00
parent 7a089f53e2
commit b4e2923a2c
23 changed files with 364 additions and 350 deletions

View File

@@ -3,25 +3,25 @@
===================================
This file documents all available UI components for the Proxmox server views.
All components follow shadcn-inspired styling with TailServer theme CSS variables.
All components styled using TailAdmin CSS Framework patterns from:
https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template
Design Patterns:
- Card: rounded-xl border bg-card shadow-sm
- Typography: text-2xl font-bold (values), text-sm font-medium (labels), text-xs text-muted-foreground (descriptions)
TailAdmin Design Patterns:
- Card: rounded-2xl border border-gray-200 bg-white shadow-theme-sm dark:border-gray-800 dark:bg-white/[0.03]
- Typography: text-theme-sm (14px), text-theme-xs (12px)
- Text Colors: text-gray-800 dark:text-white/90 (headings), text-gray-500 dark:text-gray-400 (muted)
- Layout: flex/grid with gap-4/gap-6 spacing
- Transitions: duration-150 for all interactions (speed-optimized)
- Borders: border (uses CSS variable), rounded-lg/rounded-xl
- Backgrounds: bg-card, bg-muted, bg-muted/50 (no gradient overlays)
- Transitions: duration-150 for all interactions
- Shadows: shadow-theme-xs, shadow-theme-sm, shadow-theme-md, shadow-theme-lg
- Borders: rounded-2xl for cards, rounded-lg for inputs/buttons
CSS Variables Used:
- --color-background: Page background color
- --color-neutral: Neutral/gray tones
- --color-primary: Primary accent color (purple)
- --color-base: Text color
- --color-success: Success/positive states
- --color-warning: Warning states
- --color-danger: Error/danger states
- --color-info: Informational states
TailAdmin Color System:
- brand-500: #465fff (primary accent)
- gray-50 through gray-950 (neutral tones)
- success-500: Success/positive states
- warning-500: Warning states
- error-500: Error/danger states
- blue-light-500: Informational states
=== LAYOUT COMPONENTS ===