feat: Improved delivered status indicator WPB-9170

[svitovyda]

WPB-9170 Improve hover states and paddings for delivered status

Description

Now the conversation should have additional empty space at the right, and the last delivered message should contain a translated "Delivered" indicator, visible always (instead of on mouse over). This feature design was made considering that most of the webapp/desktop users use it on res 800px+, design improvements for smaller screens will be defined later. After this version is deployed, we might implement another design with checkboxes (under a separate ticket) that can be toggled using debug

Note 1: for the first implementation, where each message had an additional div to the right: I assumed that any message header would be short enough to not wrap it into the container that takes 100% - ${deliveredIndicatorWidth}px. It might be the improvement for the next design iteration to address the small screen look

Note 2: for the second implementation, where the entire MessageList has a margin: Now the MessageList has to add and immediately remove the "Delivered" indicator to identify its width. Another option could be to add a static margin (of ~100px) and listen to the message components when one of them will have to add this indicator, then adjust the margin width. Another option could be that each message component could have a margin, but I'm not sure what we will win here

Screenshots/Screencast (for UI changes)

Checklist

• [x] PR has been self reviewed by the author;
• [x] Hard-to-understand areas of the code have been commented;
• [ ] If it is a core feature, unit tests have been added;

[tlebon]

regarding this image you shared -> i think the delivered status should be aligned with the time stamp at the top of longer mesages. (also timestamp should not wrap)

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 76.47059% with 4 lines in your changes missing coverage. Please review.

Project coverage is 46.13%. Comparing base (c0c9c7f) to head (450d23b). Report is 36 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #17553      +/-   ##
==========================================
+ Coverage   46.11%   46.13%   +0.01%     
==========================================
  Files         760      762       +2     
  Lines       25016    25025       +9     
  Branches     5721     5722       +1     
==========================================
+ Hits        11537    11546       +9     
+ Misses      12036    12035       -1     
- Partials     1443     1444       +1     

[svitovyda]

regarding this image you shared -> i think the delivered status should be aligned with the time stamp at the top of longer mesages. (also timestamp should not wrap)

I now aligned "Delivered" text to the top of the message, and also made the timestamp text nowrap (it was broken before my changes). And aligned the MessageActions to the most right - 16 px.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[tlebon]

this was superceded by #17611 and #17606