Wrapped Frontend - Add TA slides & Update slide logic

[anchen9]

Summary

Added three total slides to the Wrapped Frontend by building on this PR and Figma dev handoff. I added slides is to display a student's favorite TA, the total time a TA helped students, and a slide for how many students a TA has helped. Also updated slide logic so that if an user is only a student, they do not see TA slides, and if an user is both a student & TA they see all slides, and if an user is only a TA they only see TA specific slides.

• Added background gradient for all wrapped slides
• Flipped image on the visits to office hours slides
• Edited image size of personality slides
• Edited text appearance on conclusion slide
• Added favTaId to wrappedData

[ ](url)

Test Plan

To test the slide logic, I edited my test data in QMI Test to test:

• favTaId = "" or undefined ==> should only see TA specific slides
• timeHelpingStudents == 0 or undefined ==> should only see student specific slides
• if both are defined and non-empty/non-zero then all slides should be displayed.

Notes

• need to complete ribbons/banners as well as animations
• need to add firebase call to number of students a TA has helped.

Breaking Changes

None

• I have updated the documentation accordingly.
• My PR adds a @ts-ignore

[CLAassistant]

All committers have signed the CLA.

[dti-github-bot]

[diff-counting] Significant lines: 792.

[rgu0114]

Great start on this so far Annie! And nice work navigating the existing (long) component file and adding in React/CSS changes to more closely mimic the designs. I added a few code style comments, but a couple other things to note:

1. usually for frontend PRs, it's good to attach screenshots of the changes you made (even if the reviewer will run it locally) so it's clearer what changes you made. Attaching the reference Figma designs is also a plus.
2. if you reload and go to to the favorite TA slide for the first time, there's some flickering – probably some incorrect logic related to the total number of stages for users who are also TAs, but I can take another look and suggest fixes

[rgu0114]

A couple misc. design todos for this PR (or the next):

• banner styling on intro slide, adding banners to total minutes, fav ta, and conclusion slide
• decrease transparency of the people on total visits slide
• mini ppl in places
• numbers

[EricWeng23]

Since this is type checking using the as keyword on the document data retrieved from firebase, would it be cleaner to just write a typescript interface like
interface WrappedData { officeHourVisit: never[]; personalityType: string; timeHelpingStudents: number; ... }. Then we can just use that in the state variable wrappedData above. But this is just a minor optimization imo :)

[rgu0114]

Good to merge once all comments are addressed!