Private
Public Access
1
0

Refactor modal close behavior and improve styling

- Changed modal close event from `@click.away` to `@click.self` for better control over closing modals.
- Updated various modal button styles for consistency and improved accessibility.
- Adjusted transition durations for modal animations to enhance user experience.
- Added aria-labels to close buttons for better screen reader support.
This commit is contained in:
2026-02-23 20:02:41 -05:00
parent f394483daa
commit af62a16354
45 changed files with 393 additions and 4700 deletions

View File

@@ -28,7 +28,7 @@
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
@click.self="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
@@ -97,7 +97,7 @@
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
@click.self="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;">
@@ -226,7 +226,7 @@
</h3>
<div class="space-y-4 text-sm text-base/70">
@foreach($this->displayOptions as $value => $meta)
<div class="border border-neutral/40 rounded-md p-3 {{ $value === $selectedDisplay ? 'bg-background' : '' }}">
<div wire:key="display-{{ $value }}" class="border border-neutral/40 rounded-md p-3 {{ $value === $selectedDisplay ? 'bg-background' : '' }}">
<div class="flex items-center justify-between">
<span class="font-semibold text-base">{{ $meta['label'] }}</span>
@if($value === $selectedDisplay)