From 1f9824a0b6cdc40ac3c7dec50a7eb0a9d8cbe50c Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 23:15:37 -0500
Subject: [PATCH] refactor: simplify onboarding modal structure with improved
 slide display logic and responsive styling for enhanced user experience

---
 .../resources/views/modal.blade.php           | 87 ++++++++-----------
 1 file changed, 35 insertions(+), 52 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index 33839c726..8107a7937 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -26,17 +26,15 @@
          x-init="init()"
          x-cloak>
         <div x-show="open"
-             style="position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;"
+             x-transition.opacity
+             class="fixed inset-0 z-50 flex items-center justify-center px-4 py-6 sm:py-10"
              x-cloak>
 
-            <div class="absolute inset-0 transition-opacity duration-300 ease-out pointer-events-auto"
-                 :style="open
-                    ? (showBackdrop ? 'background-color: rgba(0,0,0,0.65); opacity: 1;' : 'background-color: rgba(0,0,0,0.35); opacity: 1;')
-                    : 'opacity: 0;'"
+            <div class="absolute inset-0 transition-opacity duration-300"
+                 :class="showBackdrop ? 'bg-black/70' : 'bg-black/40'"
                  @click="finish()"></div>
 
-            <div class="bg-background-secondary border border-neutral rounded-2xl shadow-2xl pointer-events-auto"
-                 style="position: relative; width: min(32rem, calc(100% - 2rem)); pointer-events: auto; z-index: 10;"
+            <div class="relative w-full max-w-xl bg-background-secondary border border-neutral rounded-2xl shadow-2xl overflow-hidden"
                  x-transition:enter="transition ease-out duration-300"
                  x-transition:enter-start="opacity-0 scale-90"
                  x-transition:enter-end="opacity-100 scale-100"
@@ -44,65 +42,47 @@
                  x-transition:leave-start="opacity-100 scale-100"
                  x-transition:leave-end="opacity-0 scale-90">
 
-                <template x-for="(slide, index) in slides" :key="slide.id">
-                    <div x-show="currentSlide === index"
-                         x-transition:enter="transition ease-out duration-200"
-                         x-transition:enter-start="opacity-0 translate-y-2"
-                         x-transition:enter-end="opacity-100 translate-y-0"
-                         x-transition:leave="transition ease-in duration-150"
-                         x-transition:leave-start="opacity-100 translate-y-0"
-                         x-transition:leave-end="opacity-0 translate-y-2"
-                         style="display: flex; flex-direction: column;"
-                         x-cloak>
-
-                        <template x-if="slide.image">
-                            <div style="width: 100%; height: 14rem; overflow: hidden; border-radius: 1rem 1rem 0 0;">
-                                <img :src="slide.image_url ?? slide.image"
-                                     :alt="slide.title"
+                <template x-if="activeSlide">
+                    <div style="display: flex; flex-direction: column;">
+                        <template x-if="activeSlide.image_url">
+                            <div class="w-full" style="height: 14rem; overflow: hidden;">
+                                <img :src="activeSlide.image_url"
+                                     :alt="activeSlide.title"
                                      style="width: 100%; height: 100%; object-fit: cover;">
                             </div>
                         </template>
 
-                        <div style="padding: 1.5rem;">
-                            <h3 class="text-primary-100"
-                                style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;"
-                                x-text="slide.title"></h3>
-                            <p class="text-base/80"
-                               style="font-size: 0.9rem; line-height: 1.6;"
-                               x-text="slide.description"></p>
+                        <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>
 
-                        <div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem;">
-                            <template x-for="dotIndex in slides.length" :key="'dot-' + dotIndex">
-                                <div style="height: 0.4rem; border-radius: 9999px; transition: all 0.3s;"
-                                     :style="currentSlide === dotIndex - 1 ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.4rem; background-color: var(--color-neutral, #525252);'"></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>
 
-                        <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1.5rem 1.5rem 1.5rem;">
+                        <div class="flex items-center justify-between px-6 pb-6">
                             <button @click="previous()"
                                     :disabled="currentSlide === 0"
-                                    class="text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed"
-                                    style="padding: 0.4rem 1rem; font-size: 0.875rem; font-weight: 500; border: none; background: transparent; cursor: pointer;">
-                                <span style="display: flex; align-items: center; gap: 0.4rem;">
-                                    <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') }}
-                                </span>
+                                    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="bg-primary hover:bg-primary/90"
-                                    style="padding: 0.45rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; border: none; color: white; cursor: pointer;">
-                                <span style="display: flex; align-items: center; gap: 0.4rem;">
-                                    <span x-text="primaryActionLabel(index)"></span>
-                                    <svg x-show="index !== slides.length - 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>
-                                </span>
+                                    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>
@@ -129,6 +109,9 @@
                             document.documentElement.style.overflow = 'hidden';
                         }
                     },
+                    get activeSlide() {
+                        return this.slides[this.currentSlide] ?? null;
+                    },
                     primaryActionLabel(index) {
                         const isLast = index === this.slides.length - 1;
                         if (isLast) {