QMI Wrapped Intro Animation

[NIDHI2023]

Summary

Created a temporary button on top navbar to show a modal with the QMI Wrapped intro animation.

• imported 3 new media files (arrow.svg, plus.svg, plus2.svg)
• created a new folder in /styles for qmi wrapped
• added comments explaining how animations work

Screen.Recording.2024-09-22.at.5.05.14.PM.mov

Test Plan

• check if modal popup and animation looks good/consistent for different device screens

Notes

• need to make folder and style changes consistent with Richard's setup for wrapped frontend so it's easier to build from this modal
• could probably get rid of 2nd plus and just go into a consistent blue background, from there apply a gradient according to the Figma designs

Breaking Changes

None

• My changes requires a change to the documentation.
  • I added an extra style folder, so that would need to be updated. Depending on adjustment to Richard's PR setup, would not be needed

Checklist

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

[dti-github-bot]

[diff-counting] Significant lines: 338.

[rgu0114]

Excellent work here with the intro animation Nidhi! It's exciting to see Sia's Figma designs slowly come to life, and I'm looking forward to getting this to prod. Great job figuring this out by yourself and for leaving helpful comments explaining how it works haha

Visually the only thing I'd make note of is the speed of the animation – we can sync up on that during the next couple weeks with the designers.

Since the Wrapped Frontend setup PR has been merged, we should be good to add this animation in to the beginning of the slideshow modal. And in that PR, we created a media/wrapped folder so remember to add the svgs here to that.

[EricWeng23]

The animation modal looks very good viusally and reflects the figma very well. It's just a small minor nitpick of a particularly <def> tag in the WrappedAnimationModal component in which I already commented in that code block. But this was amazing implementation to make the modal so dynamic :)