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:
@@ -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 ===
|
||||
|
||||
|
||||
Reference in New Issue
Block a user