From 62b346ea37cf169c50c76d71afaa8c98873a688a Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 22:42:29 -0500
Subject: [PATCH] refactor: enhance modal layout and styling in onboarding
 component for improved user experience

---
 .../resources/views/modal.blade.php           | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index 9d96d1e0e..105530835 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -11,11 +11,13 @@
              document.documentElement.style.overflow = ''; 
          } 
      })"
-     class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden pointer-events-none">
-    
+     class="fixed inset-0 z-50 overflow-hidden"
+     style="display: flex; align-items: center; justify-content: center; pointer-events: none;">
     
+    {{-- Backdrop --}}
     @if($this->showBackdrop)
-    <div class="absolute inset-0 bg-black/50 transition-opacity duration-300 pointer-events-auto"
+    <div class="absolute inset-0 bg-black/50 transition-opacity duration-300"
+         style="pointer-events: auto;"
          x-show="open"
          x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0"
@@ -26,8 +28,9 @@
          wire:click="finish"></div>
     @endif
     
-    
-    <div class="w-full max-w-xl mx-4 md:mx-auto bg-background-secondary border border-neutral rounded-lg shadow-2xl overflow-hidden h-[500px] flex flex-col relative z-10 pointer-events-auto"
+    {{-- Modal Dialog --}}
+    <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-hidden relative"
+         style="width: 100%; max-width: 32rem; height: 500px; margin: 1rem; pointer-events: auto;"
          x-show="open"
          x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0 scale-90"
@@ -36,7 +39,7 @@
          x-transition:leave-start="opacity-100 scale-100"
          x-transition:leave-end="opacity-0 scale-90">
 
-        
+        {{-- Slides --}}
         @foreach($slides as $index => $slide)
             <div wire:key="slide-{{ $slide['id'] }}" 
                  x-show="currentSlide === {{ $index }}"
@@ -46,56 +49,59 @@
                  x-transition:leave="transition ease-in duration-150"
                  x-transition:leave-start="opacity-100"
                  x-transition:leave-end="opacity-0"
-                 class="flex flex-col h-full absolute inset-0">
-                
+                 class="absolute inset-0 flex flex-col"
+                 style="display: flex; flex-direction: column; height: 100%;">
                 
+                {{-- Slide Image --}}
                 @if($slide['image'])
-                <div class="w-full h-56 flex-shrink-0 overflow-hidden rounded-t-lg">
-                    <img class="w-full h-full object-cover" 
+                <div style="width: 100%; height: 14rem; flex-shrink: 0; overflow: hidden; border-radius: 0.75rem 0.75rem 0 0;">
+                    <img style="width: 100%; height: 100%; object-fit: cover;" 
                          src="{{ Storage::url($slide['image']) }}" 
                          alt="{{ $slide['title'] }}">
                 </div>
                 @endif
                 
-                
-                <div class="p-6 flex-1 overflow-y-auto">
-                    <h3 class="text-xl font-bold text-primary-100 mb-2.5">
+                {{-- Slide Content --}}
+                <div style="padding: 1.5rem; flex: 1; overflow-y: auto;">
+                    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;" class="text-primary-100">
                         {{ $slide['title'] }}
                     </h3>
-                    <p class="text-sm text-base/80 leading-relaxed">
+                    <p style="font-size: 0.875rem; line-height: 1.625;" class="text-base/80">
                         {{ $slide['description'] }}
                     </p>
                 </div>
 
-                
-                <div class="flex justify-center gap-2 px-6 pb-4 flex-shrink-0">
+                {{-- Slide Indicators --}}
+                <div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem; flex-shrink: 0;">
                     @foreach($slides as $dotIndex => $dot)
-                        <div class="h-1.5 rounded-full transition-all duration-300" 
-                             :class="currentSlide === {{ $dotIndex }} ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
+                        <div style="height: 0.375rem; border-radius: 9999px; transition: all 0.3s;" 
+                             :style="currentSlide === {{ $dotIndex }} ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.375rem; background-color: var(--color-neutral, #525252);'"></div>
                     @endforeach
                 </div>
 
-                
-                <div class="flex justify-between items-center px-6 pb-5 pt-1 flex-shrink-0">
+                {{-- Navigation Buttons --}}
+                <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 1.5rem 1.25rem 1.5rem; flex-shrink: 0;">
                     <button wire:click="previousSlide" 
                             :disabled="currentSlide === 0"
-                            class="px-4 py-1.5 text-sm text-base/70 hover:text-primary-100 font-medium transition disabled:opacity-50 disabled:cursor-not-allowed">
-                        <div class="flex items-center gap-1.5">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            style="padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; border: none; background: transparent; cursor: pointer;"
+                            class="text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed">
+                        <span style="display: flex; align-items: center; gap: 0.375rem;">
+                            <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                             </svg>
                             Back
-                        </div>
+                        </span>
                     </button>
 
                     <button @click="currentSlide === {{ count($slides) - 1 }} ? $wire.finish() : $wire.nextSlide()" 
-                            class="px-5 py-1.5 text-sm bg-primary hover:bg-primary/90 text-white font-medium rounded-md transition shadow-sm">
-                        <div class="flex items-center gap-1.5">
+                            style="padding: 0.375rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; transition: all 0.15s; border: none; cursor: pointer; color: white;"
+                            class="bg-primary hover:bg-primary/90">
+                        <span style="display: flex; align-items: center; gap: 0.375rem;">
                             <span x-text="currentSlide === {{ count($slides) - 1 }} ? 'Finish' : (@js($slide['is_guided'] ?? false) ? 'Continue' : 'Next')"></span>
-                            <svg x-show="currentSlide !== {{ count($slides) - 1 }}" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <svg x-show="currentSlide !== {{ count($slides) - 1 }}" style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                             </svg>
-                        </div>
+                        </span>
                     </button>
                 </div>
             </div>