Fixes Issue 168

app/__tests__/intro_skip.test.tsx

@@ -0,0 +1,36 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+// TestComponent renders a button with the styles we want to test.
+const TestComponent = () => {
+  return (
+    <button
+      className="introjs-skipbutton"
+      // Applying styles inline to ensure they are available during the test
+      style={{
+        fontSize: '1.0em',
+        left: 'auto',
+        right: '10px',
+        color: '#555',
+      }}
+    >
+      Skip
+    </button>
+  );
+};
+
+// Test to verify that the .introjs-skipbutton styles are applied correctly
+test('renders .introjs-skipbutton with correct styles', () => {
+  // Render the TestComponent
+  const { getByText } = render(<TestComponent />);
+
+  // Select the button element by its text content
+  const skipButton = getByText('Skip');
+
+  // Assertions to verify that each style is applied as expected
+  expect(skipButton).toHaveStyle('font-size: 1.0em'); // Check font size
+  expect(skipButton).toHaveStyle('left: auto');       // Check left alignment
+  expect(skipButton).toHaveStyle('right: 10px');      // Check right position
+  expect(skipButton).toHaveStyle('color: #555');      // Check text color
+});

app/globals.css

@@ -473,3 +473,12 @@ body {
   background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);
   pointer-events: none; /* This ensures the shadow doesn't interfere with clicking or scrolling */
 }
+
+/* Adjusts the position and size of the 'Skip' label */
+.introjs-skipbutton {
+  font-size: 1.0em;  
+  left: auto;       
+  right: 10px;       
+  color: #555;       
+}
+

app/lib/pages/map/page.tsx

@@ -11,6 +11,7 @@ import { Switch } from "@/components/ui/switch";
 import { Skeleton } from "@/components/ui/skeleton";
 import introJs from "intro.js"
 import "intro.js/introjs.css"
+import "../../../globals.css";
 
 import {
   CompassIcon,
@@ -119,7 +120,7 @@ const Page = () => {
 
           scrollToElement: true,
           dontShowAgain: true,
-          skipLabel: "Skip",
+          skipLabel: "Skip", //change the look of this button
         });
 
         intro.oncomplete(() => {