From 117629fb08b1870275a77080990d36d1f1170059 Mon Sep 17 00:00:00 2001
From: Joanna Cheng <joannacheng21@outlook.com>
Date: Thu, 4 Apr 2024 19:18:02 -0400
Subject: [PATCH] style and display tour

---
 src/components/App/index.tsx            | 94 ++++++++++++++++---------
 src/components/Feedback/stylesheet.scss |  3 +-
 2 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 415a9a76..48099e00 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { TooltipProvider } from 'react-tooltip';
+import { TourProvider } from '@reactour/tour';
 
 import { classes } from '../../utils/misc';
 import Feedback from '../Feedback';
@@ -16,6 +17,7 @@ import useThemeFromStorage from '../../data/hooks/useThemeFromStorage';
 import { DESKTOP_BREAKPOINT } from '../../constants';
 import useScreenWidth from '../../hooks/useScreenWidth';
 import InformationModal from '../InformationModal';
+import Tour, { nextButton, steps, Close } from '../Tour';
 
 import 'react-virtualized/styles.css';
 import './stylesheet.scss';
@@ -32,48 +34,70 @@ export default function App(): React.ReactElement {
     <ThemeContext.Provider value={themeContextValue}>
       <AppCSSRoot>
         <TooltipProvider>
-          {/* To bring the website down for maintenance purposes, 
+          <TourProvider
+            steps={steps}
+            startAt={1}
+            showBadge={false}
+            showDots={false}
+            components={{ Close }}
+            disableInteraction
+            nextButton={nextButton}
+            prevButton={(): React.ReactElement => <p />}
+            styles={{
+              popover: (base) => ({
+                ...base,
+                borderRadius: '10px',
+                backgroundColor: '#333333',
+                padding: '30px',
+              }),
+            }}
+          >
+            {/* To bring the website down for maintenance purposes, 
             insert <Maintenance /> here and disable everything below.
             See https://github.com/gt-scheduler/website/pull/194 for reference. */}
-          <ErrorBoundary
-            fallback={(error, errorInfo): React.ReactElement => (
-              <AppSkeleton>
-                <SkeletonContent>
-                  <ErrorHeader />
-                  <ErrorDisplay
-                    errorDetails={
-                      <ReactErrorDetails error={error} errorInfo={errorInfo} />
-                    }
-                  >
-                    <div>
-                      There was en error somewhere in the core application logic
-                      and it can&apos;t continue.
-                    </div>
-                    <div>
-                      Try refreshing the page to see if it fixes the issue.
-                    </div>
-                  </ErrorDisplay>
-                </SkeletonContent>
-              </AppSkeleton>
-            )}
-          >
-            <AppNavigation>
-              {/* AppDataLoader is in charge of ensuring that there are valid values
+            <ErrorBoundary
+              fallback={(error, errorInfo): React.ReactElement => (
+                <AppSkeleton>
+                  <SkeletonContent>
+                    <ErrorHeader />
+                    <ErrorDisplay
+                      errorDetails={
+                        <ReactErrorDetails
+                          error={error}
+                          errorInfo={errorInfo}
+                        />
+                      }
+                    >
+                      <div>
+                        There was en error somewhere in the core application
+                        logic and it can&apos;t continue.
+                      </div>
+                      <div>
+                        Try refreshing the page to see if it fixes the issue.
+                      </div>
+                    </ErrorDisplay>
+                  </SkeletonContent>
+                </AppSkeleton>
+              )}
+            >
+              <AppNavigation>
+                {/* AppDataLoader is in charge of ensuring that there are valid values
                 for the Terms and Term contexts before rendering its children.
                 If any data is still loading,
                 then it displays an "app skeleton" with a spinner.
                 If there was an error while loading
                 then it displays an error screen. */}
-              <AppDataLoader>
-                <AppContent />
-              </AppDataLoader>
-            </AppNavigation>
-            <Feedback />
-
-            {/* Display a popup when first visiting the site */}
-            {/* Include <InformationModal /> or <MaintenanceModal /> here */}
-            <InformationModal />
-          </ErrorBoundary>
+                <AppDataLoader>
+                  <AppContent />
+                </AppDataLoader>
+              </AppNavigation>
+              <Feedback />
+              <Tour />
+              {/* Display a popup when first visiting the site */}
+              {/* Include <InformationModal /> or <MaintenanceModal /> here */}
+              <InformationModal />
+            </ErrorBoundary>
+          </TourProvider>
         </TooltipProvider>
       </AppCSSRoot>
     </ThemeContext.Provider>
diff --git a/src/components/Feedback/stylesheet.scss b/src/components/Feedback/stylesheet.scss
index 18c1a17c..4a0acb89 100644
--- a/src/components/Feedback/stylesheet.scss
+++ b/src/components/Feedback/stylesheet.scss
@@ -6,7 +6,7 @@
   border-radius: 5px;
   position: absolute;
   bottom: 24px;
-  right: 24px;
+  right: 100px;
   width: 60px;
   height: 60px;
 
@@ -46,6 +46,7 @@
   min-height: 350px;
   display: flex;
   flex-direction: column;
+  z-index: 1;
 
   @include popup;
   @extend %common;