[Notifications P1] Row UI Update

[alpavanoglu]

Fixes #22465

Description

Updates the styling of notifications cell to match the new designs by utilising Design System values.

Testing Steps

1. Install & login to Jetpack App with an account that has any notifications.
2. Navigate to Notifications Tab.
3. Verify the rows match the designs:
   a. ✅ Title should not contain any bold/semibold
   b. ✅ Title and description should be the same size
   c. ✅ There should be no separators.
   d. ✅ Each cell should contain maximum 4 lines of text. i.e. if title has 2 lines, description can only have 1 line. If title has 1 line, description can have maximum 2 lines.

Regression Notes

1. Potential unintended areas of impact
   All UI changes that will be merged to the feature branch.

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   N/A

3. What automated tests I added (or what prevented me from doing so)
   N/A

PR submission checklist:

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

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• VoiceOver.
• 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)
• iPhone and iPad.
• Multi-tasking: Split view and Slide over. (iPad)

[dangermattic]

	1 Warning
⚠️	View files have been modified, but no screenshot is included in the pull request. Consider adding some for clarity.

Generated by 🚫 Danger

[wpmobilebot]

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

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr22545-060d65a
	Version	24.2
	Bundle ID	com.jetpack.alpha
	Commit	060d65a
	App Center Build	jetpack-installable-builds #7721

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[wpmobilebot]

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

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr22545-060d65a
	Version	24.2
	Bundle ID	org.wordpress.alpha
	Commit	060d65a
	App Center Build	WPiOS - One-Offs #8694

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[salimbraksa]

Design	Implementation

Comparing the Figma design with the implementation, I see the following differences:

• Table view's background is white.
• Section title fonts in the Design is 17pt, while in the app is 15pt
• I feel there is more vertical space between the rows, can you double check?
• See the last 2 notifications in the Implementation screenshot. The text is top aligned relative to the avatar, and it doesn't look good imo. So I suggest the following:
  • When the text height is smaller than the avatar's height, the text should be centrally aligned.
  • When the text height is larger than avatar's height, the avatar should be top aligned.

[salimbraksa]

Section title fonts in the Design is 17pt, while in the app is 15pt

This should be addressed in #22464 . I'll open a PR targeting this one.

[salimbraksa]

⚠️ The ListTableHeaderView is used in the CommentsViewController, so these changes will be applied to that screen as well, and I don't think we want that.

Feel free to revert the changes, I'll handle them in #22464.

[alpavanoglu]

Sounds good, I'll revert it.

[alpavanoglu]

@salimbraksa I haven't addressed the top alignment issue yet of a single row text. The rest is addressed. I'll re-request review once I do so.