feat: Onboarding

[SheepTester]

Info

Adds an onboarding experience with fancy animations. However, it is currently not well integrated into the site. You can directly access it by adding /onboard to the end of the home page URL.

I wrote onboarding so all of it lives in a component. Currently, it's used on a standalone page, but we can change it to be a thing that covers the page or have it replace the page contents instead of being a separate route.

Design deviations:

• I changed "Finish" to "Set up" and made it link to the edit user profile page (i.e. you're sent there when you complete onboarding) since the description sounds like a call to action to set up your profile

• the communities list should use the small ACM logo variants, but I'm not sure where to find them

• The design for the first step of onboarding hasn't been finished i think, so I just used the cat 404 images for now

Because there's no backend support for onboarding yet, this just stores onboarded in localStorage. This means that the user will be prompted to onboard on every device.

The user is only prompted to onboard after they close the check-in modal so that onboarding doesn't get in the way of checking in. However, it's possible they might just put their phone away after checking in, leaving the modal open

Changes

• onboarding component (OnboardingScreen) and onboarding page (/onboard)

• the navbar appears muted on the onboarding page to avoid having a double rainbow, which I think detracts from the experience

  • the navbar only exists because some parts of the page layout have the navbar's height hardcoded, and it also has the theme switcher

• the design of the Button component (mostly used in admin pages) has been changed because I think this one looks nicer and similar designs are already being used in many user-facing parts of the website

  

• several components were updated to allow them to be made noninteractive but accessible. this is so they can be included in the onboarding for illustrative purposes

Type of Change

• Bug Fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as
  expected)
• Logistics Change (A change to a README, description, or dev workflow setup like
  linting/formatting)
• Continuous Integration Change (Related to deployment steps or continuous integration
  workflows)
• Other: (Fill In)

Testing

I have tested that my changes fully resolve the linked issue ...

• locally on Desktop.
• on the live deployment preview on Desktop.
• on the live deployment preview on Mobile.
• I have added new Cypress tests that are passing.

Checklist

• I have performed a self-review of my own code.
• I have followed the style guidelines of this project.
• I have documented any new functions in /src/lib/* and commented hard to understand areas
  anywhere else.
• My changes produce no new warnings.

Screenshots

the leaderboard looks a bit wonky on mobile, oh well

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
membership-portal-ui-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 7:01am
testing-membership-portal-ui-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 7:01am

[alexzhang1618]

Changes are looking good! Let's push to have as much as possible ready for/before kickoff so people can use this feature 🎉

I think we can hide the earn your first 10 points for now so we can have onboarding ready by kickoff regardless if the backend is up or not

[alexzhang1618]

stamping to unblock

[SheepTester]

yolo