From e35cf46021e0b7d6ba40e05635d804d8777dd73b Mon Sep 17 00:00:00 2001
From: "madjid.asa" <madjid.asa@gmail.com>
Date: Fri, 28 Jun 2024 20:06:31 +0200
Subject: [PATCH] add custom css

---
 .../static/django_shepherd/user_guide.js      | 26 ++++--
 lemarche/static/itou_marche/utils.scss        | 81 +++++++++++++++++++
 2 files changed, 102 insertions(+), 5 deletions(-)

diff --git a/lemarche/django_shepherd/static/django_shepherd/user_guide.js b/lemarche/django_shepherd/static/django_shepherd/user_guide.js
index 6adcd1d56..d512e823f 100644
--- a/lemarche/django_shepherd/static/django_shepherd/user_guide.js
+++ b/lemarche/django_shepherd/static/django_shepherd/user_guide.js
@@ -4,7 +4,10 @@ class UserGuide {
             useModalOverlay: true,
             defaultStepOptions: {
                 classes: 'shepherd-theme-arrows',
-                scrollTo: true
+                scrollTo: {
+                    behavior: 'smooth',
+                    block: 'center'
+                },
             }
         });
     }
@@ -29,7 +32,9 @@ class UserGuide {
             .then(response => response.json())
             .then(data => {
                 this.tour.steps = []; // Clear previous steps
-                data.steps.forEach(step => {
+                data.steps.forEach((step, index) => {
+                    const isFirstStep = index === 0;
+                    const isLastStep = index === data.steps.length - 1;
                     this.tour.addStep({
                         title: step.title,
                         text: step.text,
@@ -39,10 +44,21 @@ class UserGuide {
                         },
                         buttons: [
                             {
-                                text: 'Next',
-                                action: this.tour.next
+                                text: 'Ignorer',
+                                action: this.tour.cancel,
+                                classes: 'btn btn-secondary'
+                            },
+                            !isFirstStep && {
+                                text: 'Précédent',
+                                action: this.tour.back,
+                                classes: 'btn btn-primary'
+                            },
+                            {
+                                text: isLastStep ? 'Finir' : 'Suivant',
+                                action: this.tour.next,
+                                classes: 'btn ' + (isLastStep ? 'btn-success' : 'btn-primary')
                             }
-                        ]
+                        ].filter(Boolean)
                     });
                 });
                 this.tour.start();
diff --git a/lemarche/static/itou_marche/utils.scss b/lemarche/static/itou_marche/utils.scss
index e5dc55d38..bb30482fc 100644
--- a/lemarche/static/itou_marche/utils.scss
+++ b/lemarche/static/itou_marche/utils.scss
@@ -42,3 +42,84 @@
     color: $green;
     font-weight: bold;
 }
+
+/* custom_theme.css */
+
+/* Shepherd.js custom styles */
+.shepherd-element {
+    z-index: 1050; /* Ensure Shepherd elements are above Bootstrap modals */
+    max-width: 600px !important;
+}
+
+.shepherd-content {
+    background-color: #fff;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    padding: 1.5rem;
+}
+
+.shepherd-header {
+    font-size: 1.25rem;
+    margin-bottom: 0.75rem;
+}
+
+.shepherd-text {
+    font-size: 1rem;
+    color: #212529;
+}
+
+.shepherd-footer {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.shepherd-button {
+    background-color: #007bff;
+    border: none;
+    color: #fff;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease-in-out;
+}
+
+.shepherd-button:hover {
+    background-color: #0056b3;
+}
+
+.shepherd-button-secondary {
+    background-color: #6c757d;
+}
+
+.shepherd-button-secondary:hover {
+    background-color: #5a6268;
+}
+
+/* Responsive adjustments */
+@media (max-width: 576px) {
+    .shepherd-content {
+        padding: 1rem;
+        font-size: 0.875rem;
+    }
+
+    .shepherd-header {
+        font-size: 1rem;
+    }
+
+    .shepherd-text {
+        font-size: 0.875rem;
+    }
+
+    .shepherd-footer {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .shepherd-button {
+        margin-top: 0.5rem;
+        width: 100%;
+    }
+}