@campxdev/shared 1.10.86 → 1.10.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.10.86",
+  "version": "1.10.87",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/ApplicationProfile/ApplicationProfile.tsx

@@ -22,9 +22,6 @@ import SearchBar from '../FilterComponents/SearchBar'
 import { DialogButton, DrawerButton } from '../ModalButtons'
 import Table from '../Tables/BasicTable/Table'
 import DepartmentFilter from './DepartmentFilter'
-// import Arrow, { DIRECTION } from 'react-arrows'
-import '../CustomJoyRideStyles.css'
-
 interface ApplicationProfileProps {
   application:
     | 'exams'

package/src/components/ReactJoyRide.tsx

@@ -5,6 +5,7 @@ import ReactJoyride, { Step } from 'react-joyride'
 import { useQuery } from 'react-query'
 import axios from '../config/axios'
 import './CustomJoyRideStyles.css'
+import Spinner from './Spinner'
 
 function ReactJoyRide({
   steps,
@@ -26,11 +27,7 @@ function ReactJoyRide({
     fetchTours,
   )
 
-  useEffect(() => {
-    if (toursData && !toursData.includes(tourName)) {
-      setRun(true)
-    }
-  }, [toursLoading])
+  useEffect(() => {}, [run])
 
   const completeTour = async () => {
     try {
@@ -43,15 +40,21 @@ function ReactJoyRide({
   const handleJoyRideCallback = (data) => {
     const { action, status } = data
 
-    if (action === 'skip') {
-      completeTour()
-    }
-    if (status === 'finished' || status === 'skip' || status === 'closed') {
+    if (action === 'reset') {
       setRun(false)
       completeTour()
     }
+  }
 
-    if (data.action == 'close' || data.action == 'skip') setRun(false)
+  const customSteps = steps.map((step) => ({
+    ...step,
+    content: (
+      <div style={{ fontFamily: 'Roboto, sans-serif' }}>{step.content}</div>
+    ),
+  }))
+
+  if (toursLoading) {
+    return <Spinner />
   }
 
   return (
@@ -60,25 +63,28 @@ function ReactJoyRide({
         <ReactJoyride
           callback={handleJoyRideCallback}
           run={run}
-          steps={steps}
+          steps={customSteps}
           styles={{
             buttonNext: {
-              backgroundColor: 'black',
-              color: 'yellow',
+              backgroundColor: '#D27D2D',
+              color: 'white',
               height: '28px',
               width: '100px',
               padding: '0px',
+              fontFamily: 'Roboto, sans-serif',
             },
 
             buttonBack: {
-              backgroundColor: 'cement',
+              backgroundColor: 'transparent',
               color: 'black',
               borderRadius: '4px',
-              height: '30px',
+              height: '28px',
               width: '100px',
               gap: '10px',
               marginLeft: '5px',
               padding: '0px',
+              border: '1px solid black',
+              fontFamily: 'Roboto, sans-serif',
             },
 
             buttonSkip: {
@@ -92,6 +98,7 @@ function ReactJoyRide({
               top: '0px',
               position: 'absolute',
               lineHeight: 1,
+              fontFamily: 'Roboto, sans-serif',
             },
           }}
           continuous
@@ -101,6 +108,12 @@ function ReactJoyRide({
           disableOverlayClose
           disableScrolling
           hideCloseButton
+          locale={{
+            last: 'Finish',
+            next: 'Next',
+            skip: 'Skip',
+            back: 'Previous',
+          }}
         />
 
         {children}