fixed unread message indicator UI

[parasharrajat]

Please review.

Details

Fixed -> Hovering over the message hides the new unread message indicator and the context menu remains in hovered stated.

Fixed Issues

Fixes #2541

Tests / QA Steps

1. Log into expensify.cash on the web or desktop app
2. Go to a chat with unread messages
3. Hover over the new message line indicator, the line should be visible behind the context menu.
4. In the same (new) chat, hover over the Copy function on the context menu.
5. Slowly move the cursor to another message, the previous message's context menu should be hidden.

Tested On

• Web
• Mobile Web (Unaffected)
• Desktop
• iOS (Unaffected)
• Android (Unaffected)

Screenshots

Web / Desktop

line.mp4

[parasharrajat]

One thing I noticed that the Context menu is not vertically aligned over the single messages as compared to the grouped messages (message with the user name and avatar) which can be seen in the video above. Let me know if I can fix that in the same PR. 😅

[johnmlee101]

Hi Rajat, if you see a fix that can be made, I'd recommend you follow https://github.com/Expensify/Expensify.cash/blob/master/CONTRIBUTING.md#proposing-a-job-that-expensify-hasnt-posted to propose a new issue! This would include a bonus as per the guidelines!

[johnmlee101]

Looks great! Thanks for the changes.

[OSBotify]

🚀 Deployed to staging in version: 1.0.33-3🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production in version: 1.0.39-5🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅