From c40c4420e24b7aa2c6e133822e313b13c18c22db Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 23:34:04 -0500
Subject: [PATCH] refactor: improve onboarding modal layout with enhanced image
 and content display, ensuring better visibility and user engagement

---
 .../resources/views/modal.blade.php           | 79 ++++++++++---------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index a49b7cd88..2c6685062 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -34,7 +34,8 @@
                  :class="showBackdrop ? 'bg-black/70' : 'bg-black/40'"
                  @click="finish()"></div>
 
-            <div class="relative w-full max-w-xl bg-background-secondary border border-neutral rounded-2xl shadow-2xl overflow-hidden"
+            <div class="relative w-full max-w-xl bg-background-secondary border border-neutral rounded-2xl shadow-2xl overflow-hidden min-h-[400px]"
+                 style="display: block !important;"
                  x-transition:enter="transition ease-out duration-300"
                  x-transition:enter-start="opacity-0 scale-90"
                  x-transition:enter-end="opacity-100 scale-100"
@@ -42,46 +43,50 @@
                  x-transition:leave-start="opacity-100 scale-100"
                  x-transition:leave-end="opacity-0 scale-90">
 
-                <div x-show="activeSlide" class="flex flex-col">
-                    <div x-show="activeSlide?.image_url" class="w-full h-56 overflow-hidden">
-                        <img :src="activeSlide?.image_url"
-                             :alt="activeSlide?.title"
-                             class="w-full h-full object-cover">
-                    </div>
+                <!-- Image Section -->
+                <div x-show="activeSlide && activeSlide.image_url" 
+                     class="w-full h-56 overflow-hidden"
+                     style="display: block;">
+                    <img x-bind:src="activeSlide ? activeSlide.image_url : ''"
+                         x-bind:alt="activeSlide ? activeSlide.title : ''"
+                         class="w-full h-full object-cover">
+                </div>
 
-                    <div class="p-6 space-y-3">
-                        <h3 class="text-primary-100 text-xl font-semibold"
-                            x-text="activeSlide?.title"></h3>
-                        <p class="text-base/80 text-sm leading-6"
-                           x-text="activeSlide?.description"></p>
-                    </div>
+                <!-- Content Section -->
+                <div class="p-6 space-y-3" style="display: block !important;">
+                    <h3 class="text-primary-100 text-xl font-semibold"
+                        x-text="activeSlide ? activeSlide.title : 'Loading...'"></h3>
+                    <p class="text-base/80 text-sm leading-6"
+                       x-text="activeSlide ? activeSlide.description : 'Please wait...'"></p>
+                </div>
 
-                    <div class="flex justify-center gap-2 px-6 pb-4">
-                        <template x-for="(slide, index) in slides" :key="'dot-' + slide.id">
-                            <div class="h-1.5 rounded-full transition-all duration-300"
-                                 :class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
-                        </template>
-                    </div>
+                <!-- Progress Dots -->
+                <div class="flex justify-center gap-2 px-6 pb-4" style="display: flex !important;">
+                    <template x-for="(slide, index) in slides" :key="'dot-' + slide.id">
+                        <div class="h-1.5 rounded-full transition-all duration-300"
+                             :class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
+                    </template>
+                </div>
 
-                    <div class="flex items-center justify-between px-6 pb-6">
-                        <button @click="previous()"
-                                :disabled="currentSlide === 0"
-                                class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
-                            <svg class="w-4 h-4" 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') }}
-                        </button>
+                <!-- Navigation Buttons -->
+                <div class="flex items-center justify-between px-6 pb-6" style="display: flex !important;">
+                    <button @click="previous()"
+                            :disabled="currentSlide === 0"
+                            class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
+                        <svg class="w-4 h-4" 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') }}
+                    </button>
 
-                        <button @click="next()"
-                                class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md">
-                            <span x-text="primaryActionLabel(currentSlide)"></span>
-                            <svg x-show="currentSlide !== slides.length - 1"
-                                 class="w-4 h-4" 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>
-                        </button>
-                    </div>
+                    <button @click="next()"
+                            class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md">
+                        <span x-text="primaryActionLabel(currentSlide)"></span>
+                        <svg x-show="currentSlide !== slides.length - 1"
+                             class="w-4 h-4" 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>
+                    </button>
                 </div>
             </div>
         </div>