pocket-casts-android
pocket-casts-android copied to clipboard
End of Year - Design tweaks
📘 Project: #410 |
---|
d3dafd2...4abc7a9 - These design tweaks were approved during the design review (p1668749860051449/1668667218.669529-slack-C041BGTFQ5R) so you can ignore going through them individually.
Modal
973fbb5
Review | Changes |
---|---|
1. Update launch modal title - Capitalise the M in the “View My 2022” | ![]() |
2. Check the colours for the body copy (should be primary-text-02) | It is set to primary-text-02 so I didn't change anything here![]() |
Also fixed modal getting shown every time on launch if eligible. Now it is shown on launch only when it was not shown earlier to match behavior on iOS. - e9cd334
Epilogue
App name should not split into next line - 6564876
Before | After |
---|---|
![]() |
![]() |
Line breaks
Improved line breaks for "en" language - e78624f
|
|
Shared image
Removed rounded corners from shared image - 8efd330
Profile badge
Fixed a scenario when profile badge was not shown if profile tab was clicked before modal was shown - e95f836
https://user-images.githubusercontent.com/1405144/202693377-7566e451-68ff-4101-8029-f8165ab0f280.mp4
Slide animation
Added slide animation - c882bfc
https://user-images.githubusercontent.com/1405144/202706122-46e059d7-b6bd-4d5c-b97c-edba7cecc7c2.mp4
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
Maybe we're thinking too much for very large font-size scenario. Texts don't wrap too much on pretty large font and display sizes on modern devices.


Maybe we're thinking too much for very large font-size scenario.
I'll admit that this doesn't make a huge difference one way or the other. Even if we keep the line breaks, it's not like it renders these screens unreadable, even on my device, it just makes them a bit awkward and requires more scrolling.
Texts don't wrap too much on pretty large font and display sizes on modern devices.
I think that's just going to vary with each device. FWIW, the screenshots I posted are from a Samsung A13, which was released less than a year ago. It just all comes down to whether the specific device's screen size and zoom settings cause one of the newlines to appear at an awkward place.
To be clear, I don't consider this a blocker. Feel free to leave it as-is if you all prefer.
I'll leave it as is since it is not a blocker. In case we have any feedback from others, I'll address it in another PR.
It does look a bit funny with the larger text sizes, doesn't it. The main aim for the breaks was to avoid all of the widow words and to try to keep the timed stats and term Pocket Casts somewhat grouped together so they don't look unreadable. I wonder if you think it would be worth keeping a strict text size for these screens.
I wonder if you think it would be worth keeping a strict text size for these screens.
Even that wouldn't avoid the issues entirely because the user could leave the font size normal and change the display zoom/magnification. I think we'd have to specify specific pixel values to take away all the user's control, and that wouldn't scale well across different screen sizes.