Update the UI of header and list in Likes Details

jarvislin commented 3 weeks ago

See yWt5gg3nWORhu079Qfv3mS-fi-1135%3A2576

This is a UI redesign in Likes Details. The change scope includes:

Header
List item

Post Likes	Comment Likes

To Test:

Sign in the JP app
Switch to the tab of Notifications
Find a Post Like notification and click it
The header and list should be the same as the design (without avatar on the header)
Click on the header and the list item, it should keep the original behavior
Back to Notifications
Find a Comment Like notification and click it
The header and list should be the same as the design (with avatar on the header)
Click on the header and the list item, it should keep the original behavior
Done, thank you!

Known issue The comment view reuses the header, it displays incorrectly at the moment. I'll fix it when I develop the task of 🤖 Comment Details: Header redesign

Regression Notes

Potential unintended areas of impact
- notifications
What I did to test those areas of impact (or what existing automated tests I relied on)
- manual
What automated tests I added (or what prevented me from doing so)
- none

PR Submission Checklist:

[x] I have completed the Regression Notes.
[x] I have considered adding accessibility improvements for my changes.
[x] I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Testing Checklist (strike-out the not-applying and unnecessary ones):

[ ] WordPress.com sites and self-hosted Jetpack sites.
[ ] Portrait and landscape orientations.
[x] Light and dark modes.
[ ] Fonts: Larger, smaller and bold text.
[ ] High contrast.
[ ] Talkback.
[ ] Languages with large words or with letters/accents not frequently used in English.
[ ] Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
[ ] Large and small screen sizes. (Tablet and smaller phones)
[ ] Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

wpmobilebot commented 3 weeks ago

📲 You can test the changes from this Pull Request in WordPress by scanning the QR code below to install the corresponding build.

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr20700-a127468
	Commit	a127468eafec08f6c80f2661c58668032c83cc97
	Direct Download	`wordpress-prototype-build-pr20700-a127468.apk`

Note: Google Login is not supported on these builds.

wpmobilebot commented 3 weeks ago

📲 You can test the changes from this Pull Request in Jetpack by scanning the QR code below to install the corresponding build.

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr20700-a127468
	Commit	a127468eafec08f6c80f2661c58668032c83cc97
	Direct Download	`jetpack-prototype-build-pr20700-a127468.apk`