feat: Add Skip Button to Tour for Improved Usability (#261)

Signed-off-by: surya4419 <[email protected]>

Author: surya4419

src/components/Tour.ts

@@ -3,6 +3,9 @@ import "shepherd.js/dist/css/shepherd.css";
 
 const style = document.createElement("style");
 style.textContent = `
+  .shepherd-button-secondary {
+    background-color: #6c757d !important;
+  }
   .shepherd-button {
     background-color: #050c40 !important; 
     color: white !important;
@@ -22,6 +25,11 @@ tour.addStep({
   id: "intro",
   text: "Welcome to the Template Playground! This brief tour will help you get acquainted with the key features of the platform.",
   buttons: [
+    {
+      text: "Skip",
+      action: tour.cancel,
+      classes: "shepherd-button-secondary",
+    },
     {
       text: "Next",
       action: () => tour.next(),
@@ -37,6 +45,11 @@ tour.addStep({
     on: "bottom",
   },
   buttons: [
+    {
+      text: "Skip",
+      action: tour.cancel,
+      classes: "shepherd-button-secondary",
+    },
     {
       text: "Next",
       action: () => tour.next(),
@@ -52,6 +65,11 @@ tour.addStep({
     on: "bottom",
   },
   buttons: [
+    {
+      text: "Skip",
+      action: tour.cancel,
+      classes: "shepherd-button-secondary",
+    },
     {
       text: "Next",
       action: () => tour.next(),
@@ -67,6 +85,11 @@ tour.addStep({
     on: "bottom",
   },
   buttons: [
+    {
+      text: "Skip",
+      action: tour.cancel,
+      classes: "shepherd-button-secondary",
+    },
     {
       text: "Next",
       action: () => tour.next(),
@@ -82,6 +105,11 @@ tour.addStep({
     on: "bottom",
   },
   buttons: [
+    {
+      text: "Skip",
+      action: tour.cancel,
+      classes: "shepherd-button-secondary",
+    },
     {
       text: "Next",
       action: () => tour.next(),