New visual states for notifications

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.0.0 DXP FP30, 7.0.X EE, 7.0.4 CE GA5, 7.1.X, Master
• Component/s: User Notifications
• Labels:
  • design
  • liferay-digital-enterprise-70-sp5
  • liferay-fixpack-de-30-7010
• Branch Version/s:
  7.0.x
• Backported to Branch:
  Committed
• Priority Level: Low
• Epic Link: Notification & Requests Improvements
• Sprint: Collab 9
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/50389

Motive

Currently, we have detected that some users have some issues to identify correctly when a notification is read or unread.

Acceptance Criteria

• The implementation of the new visual styles must be as they were designed (please see the attachments).

User Experience

Summary

1. Apply the new visual styles (note: no longer grey background for notifications that have been read)
2. Change text link (currently all the text item is a link, with the new style only the title is a link)

Design

VISUAL STATES

Read Unselected
Padding: 20px 12px 20px 12px
Background: #FFFFFF
Border inside bottom: 1px, Color: #EDF0F2
font-weight: normal

Read Selected
Background: #FCFEFF
Border bottom: 2px, Color: #65B3F0
font-weight: normal

Unread Unselected
Background: #FFFFFF
Border inside bottom: 1px, Color: #EDF0F2
Border left: 6px, Color: #65B3F0
font-weight: bold

Unread Selected
Background: #FCFEFF
Border bottom: 2px, Color: #65B3F0
Border left: 6px, Color: #65B3F0
font-weight: bold