Walkthrough Tutorial

[MinhxNguyen7]

Summary

Semi-interactive tutorial for user onboarding. Justification is given in #772.

Tutorial library: reactour. We initially considered intro.js-react and ReactJoyride, but neither of them functioned properly with our app during testing.

Tutorial Steps (In Progress)

1) Search bar.

• Automatically add a class to calendar after proceeding?
• Import button? 2) Class schedule. 3) Finals button. 4) Added courses. 5) Map. 6) Save button. 7) Load button. 8) Export to .ics. Be verbose. Get inspiration from the tooltip in the download button

Request For Comment

• What should be added or removed? Both are important. stupidly long onboarding tutorials are stupid.
• Does the ordering need to change?
• When should the tutorial be showed or not be showed?
  • If the user dismisses it, don't show it next time.
  • What if the user leaves the page, should it show next time? I'm leaning towards yes.

TODO

• [x] Choose and test tutorial library.
• [x] Enumerate the tutorial steps.
• [x] Implement the steps.
• [x] Make sure it functions and looks decent.
  • [x] Style tooltip.
  • [x] Dark mode.
• [x] Disable tutorial on subsequent visits.
  • [x] Including if someone has schedule in localstorage.
• [x] Disable tutorial when the patch notes are up.
• [x] MUI FAB button with low opacity on subsequent visits.
• [x] Click buttons for users if they skip through.

Test Plan

TBA

Issues

Closes #772

[EricPedley]

Pressing esc doesn't work on firefox until you click on the page

[MinhxNguyen7]

Pressing esc doesn't work on firefox until you click on the page

It works on Chrome/Chromium and Safari. We'll just call it a Firefox L for now.

[KevinWu098]

Changes look good at first pass, will delve deeper post IH