feat: Onboarding #265
Merged
feat: Onboarding #265
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
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
…rship-portal-ui-v2 into feature/onboarding
SheepTester
requested review from
farisashai,
raymosun and
trevorkw7
as code owners
alexzhang1618
approved these changes
Sep 30, 2024
|
yolo |
Chaitya2108
pushed a commit
that referenced
this pull request
Jan 9, 2025
* set up a modal for onboarding * Show steps and progress bar * Change design of buttons * Create onboarding page * Add animations for steps 1 and 5 * temporary images for intro * add rainbow bar to top of page previews * Quiet navbar, perhaps? * address some feedback * Move event list to its own component * separate event filter into its own component * try annotating badges on event card * store collection * Combine Store and Events components * Make annotations look nicer * Leaderboard rows * start onboarding after checking in * fix type error * un-component EventList so the diff is cleaner * move EventsPageProps back where it used to be * Remove periods and exclamation marks from onboarding headings
Chaitya2108
added a commit
that referenced
this pull request
Jan 17, 2025
* Added retroactive attendance / milestone for admin * Fixed feedback from Sean * fixed feedback * fixed feedback * Reordered checkout layout for store (#263) * Added new component for pickup dropdown for desktop view * Conditionally adds visible overflow for desktop * Removed min height * fulfill (#244) * Add fulfill button * Remove Fulfill view and move fulfill buttons to prepare view * Do not show fulfill button if it's already fulfilled * make order status component * hide fulfill button if pickup event hasnt started yet * Apparently partially fulfilled means they are missing some items * move order row to separate component * fulfill selected * fix type errors * always show fulfilled items * sorting things and other misc changes: - show green "fulfilled" when fulfilling a previously partially fulfilled order - sort orders by PLACED first - sort items alphabetically - item breakdown: ignore fulfilled. (hmm, this isn't the right thing to do for rescheduled orders) - indicate when no items were picked up * exclude fulfilled items from item breakdown * default checkboxes to unchecked * fix fulfilling selected. always indicate whether an item was fulfilled * Show fulfilled badges * Labels back to emoji, have checkbox select all of an entire variant at a time If we want granularity in the future then that can be added later * Display "fulfilled" on fulfilled items in fulfilled/partially fulfilled orders * Make "picked up" badge green * Address feedback * Use Pacific Time on server side (#264) * feat: Onboarding (#265) * set up a modal for onboarding * Show steps and progress bar * Change design of buttons * Create onboarding page * Add animations for steps 1 and 5 * temporary images for intro * add rainbow bar to top of page previews * Quiet navbar, perhaps? * address some feedback * Move event list to its own component * separate event filter into its own component * try annotating badges on event card * store collection * Combine Store and Events components * Make annotations look nicer * Leaderboard rows * start onboarding after checking in * fix type error * un-component EventList so the diff is cleaner * move EventsPageProps back where it used to be * Remove periods and exclamation marks from onboarding headings * Reduce onboarding frequency (#266) * Don't show onboarding when user has already attended events * remove vim tab * Add A.S. funded food field to event form (#269) * Add A.S. funded food field to event form * Make food items nullable * Make food items nullable in apiRequests.ts as well Mostly out of laIziness (idk if backend truly would enjoy receiving a null) but it's in line with Discord events * Minor updates to onboarding (#267) * add potential photos for onboarding first slide from justin * increase leaderboard row height on mobile?? * fmt * fmt * use css var for positioning * Arrange onboarding photos * 3d effect for mouse users * mobile collage layout * improve leaderboard on mobile * use backend support for whether onboarding seen * refactor intro images * [ImgBot] Optimize images (#271) *Total -- 56,903.46kb -> 54,747.72kb (3.79%) /public/assets/graphics/onboarding/Fall23Allocation-JustinLu.jpg -- 4,898.92kb -> 4,580.26kb (6.5%) /public/assets/graphics/onboarding/Fall24Kickoff_1-JustinLu.jpg -- 9,357.62kb -> 8,933.71kb (4.53%) /public/assets/graphics/onboarding/Fall24Bonfire_2-JustinLu.jpg -- 7,035.56kb -> 6,719.17kb (4.5%) /public/assets/graphics/onboarding/Fall24BitByteInfo_1-JustinLu.jpg -- 7,678.81kb -> 7,348.67kb (4.3%) /public/assets/graphics/onboarding/Fall24Bonfire_1-JustinLu.jpg -- 8,132.33kb -> 7,887.40kb (3.01%) /public/assets/graphics/onboarding/Fall24Kickoff_3-JustinLu.jpg -- 7,072.95kb -> 6,867.79kb (2.9%) /public/assets/graphics/onboarding/Fall24Kickoff_2-JustinLu.jpg -- 9,441.28kb -> 9,170.39kb (2.87%) /public/assets/graphics/onboarding/Fall24BitByteInfo_2-JustinLu.jpg -- 3,285.99kb -> 3,240.33kb (1.39%) Signed-off-by: ImgBotApp <[email protected]> Co-authored-by: ImgBotApp <[email protected]> * fixed errors * fixed feedback --------- Signed-off-by: ImgBotApp <[email protected]> Co-authored-by: Angela Hu <[email protected]> Co-authored-by: Sean <[email protected]> Co-authored-by: imgbot[bot] <31301654+imgbot[bot]@users.noreply.github.com> Co-authored-by: ImgBotApp <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
/onboardto 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
onboardedin 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 design of the
Buttoncomponent (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 websiteseveral 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
expected)
linting/formatting)
workflows)
Testing
I have tested that my changes fully resolve the linked issue ...
Checklist
/src/lib/*and commented hard to understand areasanywhere else.
Screenshots
the leaderboard looks a bit wonky on mobile, oh well