Visually distinguish invitations in calendar grid

[GVodyanov]

Fix #3869

Based on #3869 (comment)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 59.30%. Comparing base (cad954e) to head (679c25d).
Report is 35 commits behind head on main.

Additional details and impacted files

@@              Coverage Diff              @@
##               main    #6624       +/-   ##
=============================================
+ Coverage     22.97%   59.30%   +36.32%     
  Complexity      475      475               
=============================================
  Files           252       42      -210     
  Lines         12128     2290     -9838     
  Branches       2317        0     -2317     
=============================================
- Hits           2786     1358     -1428     
+ Misses         9015      932     -8083     
+ Partials        327        0      -327     

Flag	Coverage Δ
javascript	?
php	59.30% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[nimishavijay]

Looking great! Could you also post a screenshot in light mode, and one with the entire screen? to check the contrast.
So far I have only one suggestion, which is to use the filled warning symbol instead of the outlined one so that it's visible more clearly.

[GVodyanov]

Looking great! Could you also post a screenshot in light mode, and one with the entire screen? to check the contrast.

Here you go @nimishavijay

The outlined yellow event on a white background is the worst we can get in terms of contrast (at least out of the default colors)... I agree it's not great, I guess the spec could be changed to either modify the text and have it be the normal text color, or leave the background and have some other way of showing it's declined, what do you think is best?

PS I'll change the icon now

[nimishavijay]

Yep, exactly what I thought too.

• We can definitely bold the text for full day events, considering the regular events are bold too.

• To be on the safer side I'd also agree that we can make it the normal text color.

• Other than that I can only think of maybe using a thicker border (maybe 2px?). We can try that and see, let me know what you think.

• Also unrelated nitpick but I noticed that today's events are like 1px too low (possibly because of the box around the date). Is it possible to fix that?

[GVodyanov]

First things first, here's the new icon

[GVodyanov]

How is this looking? @nimishavijay

[SebastianKrupinski]

Looking good! 👍

[nimishavijay]

Awesome! Thanks for the comprehensive screenshots. 2px works! Looks much clearer now. Couple of more nitpicks:

• I see that the height of the needs-action and confirmed full day events are different (needs-action is slightly more because of the border). Could we make this consistent? Maybe by using outline instead of border or decreasing the height and adding a border to the confirmed event in the same colour, you get the idea
• The outlined circle stroke also seems very thin, possible to make that also 2px? (Also make sure to keep the size consistent with the filled circle like the previous point)
• add 2px spacing between the warning icon and the text, rn it seems very close

Other than that it is ready to go! Super nice work! :)

[st3iny]

/backport to stable5.1

[GVodyanov]

You have a super attentive eye @nimishavijay! Thanks for the review, how's it looking now?

(zoomed to see alignment)