End of Year: Top categories story design

[ashiagr]

📘 Project: #410

iOS PR: Automattic/pocket-casts-ios#468

Description

Adds the design for the top categories story.

Testing Instructions

1. Set END_OF_YEAR_ENABLED feature flag to true in base.gradle
2. Run the app and make sure you're logged in to an account with a few items on Listening History
3. When the prompt appears, tap "View My 2022"
4. Navigate to the 4th story
5. ✅ Check the design

Screenshots or Screencast

Pixel 5	Nexus 7 (2012)

Checklist

• If this is a user-facing change, I have added an entry in CHANGELOG.md
• I have considered whether it makes sense to add tests for my changes
• All strings that need to be localized are in modules/services/localization/src/main/res/values/strings.xml
• Any jetpack compose components I added or changed are covered by compose previews

I have tested any UI changes...

• with different themes
• with a landscape orientation
• with the device set to have a large display and font size
• for accessibility with TalkBack

[mchowning]

So much fancy matrix work here! 😄 Nice job! I think there are still some small issues with the font size and the durations. Slightly more concerning is that I saw the "Technology" word wrapping even without any font scaling. Might be good to see if there's a way we can make allow that text to be wider, but I realize that's probably a really tricky problem to solve since we don't know how wide the text will be.