Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

Migrate UI components from AdminLTE to LucentUI Theme using Tailwind CSS

Browse Source 
- Updated tab-panel component to use Tailwind for styling and transitions.
- Refactored table-row component to implement Tailwind classes for hover effects and borders.
- Converted table-td component to utilize Tailwind for alignment and text styles.
- Changed table-th component to apply Tailwind for header styling and sorting indicators.
- Revised table component to adopt Tailwind for layout, borders, and responsive design.
- Enhanced tabs component with Tailwind for navigation styles and transitions.
- Updated toggle component to use Tailwind for switch styles and accessibility.
- Refactored tooltip component to implement Tailwind for positioning and styling.
- Added visual enhancements to app.css for improved UI interactions and animations.
This commit is contained in:
Joseph.Rawlings
2026-02-01 14:16:57 -05:00
parent fa0bc93c83
commit abff5a381f
42 changed files with 1061 additions and 2427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php
View File

@@ -1,5 +1,6 @@
{{--
Confirm Dialog Component - AdminLTE style
Confirm Dialog Component - LucentUI Theme
Migrated from AdminLTE to Tailwind
For dangerous actions like delete, stop, etc.
Usage:
@@ -26,142 +27,27 @@
$variants = [
'danger' => [
'icon' => 'ri-error-warning-line',
'iconBg' => 'background-color: rgba(220, 53, 69, 0.1);',
'iconColor' => 'color: var(--lte-danger, #dc3545);',
'buttonStyle' => 'background-color: var(--lte-danger, #dc3545); color: #fff;',
'buttonHover' => 'background-color: #bb2d3b;',
'iconBg' => 'bg-error/10',
'iconColor' => 'text-error',
'buttonClass' => 'bg-error text-white hover:bg-error/80',
],
'warning' => [
'icon' => 'ri-alert-line',
'iconBg' => 'background-color: rgba(255, 193, 7, 0.15);',
'iconColor' => 'color: #997404;',
'buttonStyle' => 'background-color: var(--lte-warning, #ffc107); color: #000;',
'buttonHover' => 'background-color: #ffca2c;',
'iconBg' => 'bg-warning/15',
'iconColor' => 'text-warning',
'buttonClass' => 'bg-warning text-black hover:bg-warning/80',
],
'primary' => [
'icon' => 'ri-question-line',
'iconBg' => 'background-color: rgba(13, 110, 253, 0.1);',
'iconColor' => 'color: var(--lte-primary, #0d6efd);',
'buttonStyle' => 'background-color: var(--lte-primary, #0d6efd); color: #fff;',
'buttonHover' => 'background-color: #0b5ed7;',
'iconBg' => 'bg-primary/10',
'iconColor' => 'text-primary',
'buttonClass' => 'bg-primary text-white hover:bg-primary/80',
],
];
$config = $variants[$variant] ?? $variants['danger'];
@endphp
<style>
.confirm-dialog-lte-backdrop {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
z-index: 99998;
}
.confirm-dialog-lte-container {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.confirm-dialog-lte {
position: relative;
width: 100%;
max-width: 28rem;
background-color: #fff;
border: 1px solid var(--lte-border-color, #dee2e6);
border-radius: var(--lte-border-radius, 0.375rem);
padding: 1.5rem;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}
.confirm-dialog-lte-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.confirm-dialog-lte-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
margin-bottom: 1.25rem;
}
.confirm-dialog-lte-icon svg {
width: 1.75rem;
height: 1.75rem;
}
.confirm-dialog-lte-title {
font-size: 1.125rem;
font-weight: 600;
color: #212529;
margin-bottom: 0.5rem;
}
.confirm-dialog-lte-message {
font-size: 0.875rem;
color: var(--lte-secondary, #6c757d);
margin-bottom: 1.5rem;
}
.confirm-dialog-lte-actions {
display: flex;
width: 100%;
gap: 0.75rem;
}
.confirm-dialog-lte-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: var(--lte-border-radius, 0.375rem);
border: none;
cursor: pointer;
transition: all var(--lte-transition-speed, 0.3s) ease;
}
.confirm-dialog-lte-btn-cancel {
background-color: #fff;
color: #495057;
border: 1px solid var(--lte-border-color, #dee2e6);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.confirm-dialog-lte-btn-cancel:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
}
.confirm-dialog-lte-btn-confirm {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.confirm-dialog-lte-btn-confirm:hover {
opacity: 0.9;
}
/* Dark mode */
.dark .confirm-dialog-lte {
background-color: #1f2937;
border-color: #374151;
}
.dark .confirm-dialog-lte-title {
color: #f3f4f6;
}
.dark .confirm-dialog-lte-message {
color: #9ca3af;
}
.dark .confirm-dialog-lte-btn-cancel {
background-color: #374151;
color: #d1d5db;
border-color: #4b5563;
}
.dark .confirm-dialog-lte-btn-cancel:hover {
background-color: #4b5563;
}
</style>
<div
x-data="{ open: @js($open) }"
x-show="open"
@@ -179,11 +65,11 @@
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
class="confirm-dialog-lte-backdrop"
class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[99998]"
></div>
<!-- Dialog Container -->
<div class="confirm-dialog-lte-container">
<div class="fixed inset-0 z-[99999] flex items-center justify-center p-4">
<div
x-show="open"
x-transition:enter="transition ease-out duration-200"
@@ -192,26 +78,26 @@
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="confirm-dialog-lte"
class="relative w-full max-w-md bg-background border border-neutral rounded-lg p-6 shadow-xl"
>
<div class="confirm-dialog-lte-content">
<div class="flex flex-col items-center text-center">
<!-- Icon -->
<div class="confirm-dialog-lte-icon" style="{{ $config['iconBg'] }}">
<x-dynamic-component :component="$config['icon']" style="{{ $config['iconColor'] }}" />
<div class="flex items-center justify-center size-14 rounded-full mb-5 {{ $config['iconBg'] }}">
<x-dynamic-component :component="$config['icon']" class="size-7 {{ $config['iconColor'] }}" />
</div>
<!-- Title -->
<h3 class="confirm-dialog-lte-title">{{ $title }}</h3>
<h3 class="text-lg font-semibold text-base mb-2">{{ $title }}</h3>
<!-- Message -->
<p class="confirm-dialog-lte-message">{{ $message }}</p>
<p class="text-sm text-base/60 mb-6">{{ $message }}</p>
<!-- Actions -->
<div class="confirm-dialog-lte-actions">
<div class="flex w-full gap-3">
<button
type="button"
@click="open = false"
class="confirm-dialog-lte-btn confirm-dialog-lte-btn-cancel"
class="flex-1 inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium rounded-lg border border-neutral bg-background-secondary text-base/80 hover:bg-neutral/20 transition-all duration-200 shadow-sm"
>
{{ $cancelLabel }}
</button>
@@ -219,8 +105,7 @@
type="button"
@click="open = false"
{{ $attributes->whereStartsWith('wire:click') }}
class="confirm-dialog-lte-btn confirm-dialog-lte-btn-confirm"
style="{{ $config['buttonStyle'] }}"
class="flex-1 inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 shadow-sm {{ $config['buttonClass'] }}"
>
{{ $confirmLabel }}
</button>