Align comments indicator and add hover state to comments avatar

[banobepascal]

Change-Id: I4746de9d38ce016e0fdef2d0ef15d810474276b6

• Resolves: Misaligned and Incorrectly Styled Replies Indicator in Comments Section #10887
• Target version: master

Summary

Fixes the alignment, size, and interactivity issues with the number of replies indicator in the comments section, resized to fit seamlessly within the circle, and includes a hover state

Screenshot

Screencast.from.10-01-25.15.38.57.webm

[banobepascal]

@pedropintosilva will be waiting for your feedback

[pedropintosilva]

Thanks @banobepascal , the sizes look much better. However - you can see this by yourself when testing with an integrator or simply checking staging perf - the border color is overwritten later in

online/browser/src/canvas/sections/CommentListSection.ts

Line 575 in ac743d3

$(authorAvatarImg).css('border-color', color);

so, each comment avatar/bubble gets the same border color as its author. Thus, changing the border color on hover is not the best for UX, maybe better would be to:

• Hover: Add a subtle box-shadow + opacity to 1
• Normal state: Set element with opacity 0.9

This way we would have avatars/bubbles more discreet as default with a hover state that would be visible.

Note: It would be good if these changes are only apply for when there is no comment cards ( only bubbles floating due to space needs)

[banobepascal]

so, each comment avatar/bubble gets the same border color as its author. Thus, changing the border color on hover is not the best for UX, maybe better would be to:

• Hover: Add a subtle box-shadow + opacity to 1
• Normal state: Set element with opacity 0.9

This way we would have avatars/bubbles more discreet as default with a hover state that would be visible.

Note: It would be good if these changes are only apply for when there is no comment cards ( only bubbles floating due to space needs)

New improvements
Screencast from 17-01-25 00:20:07.webm

[banobepascal]

@pedropintosilva please review

[pedropintosilva]

Thanks, looks good, I would like to have and extra +1 on the commentListSection from Gokay

[pedropintosilva]

the CI failure is unrelated so I will press the retry button and this change is quite safe anyhow

[gokaysatir]

Thanks, looks beautiful. Can we merge this after below one?

• Use a section and remove latlng and leaflet usage from impress&draw c… #10921

There may be merge conflicts with my PR and i would like to have conflicts here instead of in 300 lines of change.

I hope that is not selfish :(