Hope you're enjoying break! First (real) sprint of the sem 🤩

This week, we're looking to implement Austin's new designs for the mobile version of the ranking page. You can specifically refer to the frames titled Ranking Mobile (edited cards) and Ranking Mobile Pop up. Here's some general guidelines:

First, you'll need to create a new component for the square-shaped mobile adoptee cards, but you can refer to the web version MatchingCard.tsx for how to handle the props. Also create a basic pop-up component (since the web version uses scrolling now), following the structure/style of IneligiblePopup.tsx but opening/closing based on the buttons rather than the "ineligible answer" logic.

Then use the useMediaQuery hook to conditionally render a layout using the mobile components and variants in MatchingSelectScreen.tsx. This resource may be helpful. Make sure to test both the web and mobile versions of the ranking page. You should be able to see the mobile version by resizing the page/tab on your computer.

If you've already finished styling + testing that the conditional rendering works, you should be good to go. If you have extra time, you can attempt to implement the click functionality via handleRankToggle and disabling "Next" until the user finishes ranking so it's the same as the web functionality.

It might be helpful for you to refer to Jinkang's sprint styling the web version of the ranking page and Carolyn's sprint implementing the web version of the ranking review page (although you don't need to worry about the review page for now, just the initial ranking one). These sprints may be a bit old, so refer to the main-branch's version of this code first.

I know this is may be a lot of moving parts + integration, so let me know if you have any questions!