[ui] Prototype adding an 'author' effect on comments

[benfurber]

Component infos

Description

On commenting, it can be super useful to know you're responding to the original author of the content. We have an idea for an effect to give comments from the original author and would like to see it in action.

Page related

As we're changing DBs at the moment, there's two sets of commenting components, only update CommentAvatar and CommentDisplay which is used on questions as the old components won't be around for long.

Mockup

A simple SVG, that you can find below in the comments should be positioned with the profile picture approximately like this.

There is 30x30px avatar and 50x50px avatar used in the comments based on the mobile/desktop. So make sure that the positioning of this badge works with both.

Build suggestion

Update CommentAvatar with an optional prop via CommentDisplay

[benfurber]

While the mock-ups look great, we're not 100% sure it'll actually work in-practice so implementing as a prototype initially.

[dalibormrska]

[joseh29]

I would like to give this a try. I have a couple of ideas :)

[joseh29]

Just checked my local environment, and overriding the response from /api/questions was not enough. To debug this component properly I would need to go inside a specific question, which returns 404. So perhaps I should look for other issues.

[joseh29]

I've done some relative positioning (sort of as a draft testing) and this is what I came up with.
Without changing the current angle, and with top-of-my-head sizing for small viewport and large (85px for small and 110px for large) I got some issues with the comments in the large viewport (as you can see in the images).

SMALL:

LARGE:

I've only tested this on CommentItem only (I didn't have access to CommentAvatar).

This is the code

<Box
  data-cy="commentAvatar"
  data-testid="commentAvatar"
  sx={{
    flexDirection: 'column',
    position: 'relative',
    display: 'inline-block',
  }}
>
  <Image
    src={defaultBaloonUrl}
    sx={{
      marginLeft: ['-10px', '5px'],
      marginTop: ['-35px', '-50px'],
      width: ['85px', '110px'],
      zIndex: 1,
      position: 'absolute',
      maxWidth: 'none', // <--- had to do this, because image has maxWidth as 100%
    }}
  />
  <Avatar
    data-cy="commentAvatarImage"
    src={creatorImage ?? defaultProfileImage}
    sx={{
      objectFit: 'cover',
      width: ['30px', '50px'],
      height: ['30px', '50px'],
      zIndex: 2,
      position: 'relative',
    }}
    alt={
      creatorName
        ? `Avatar of ${creatorName}`
        : 'Avatar of comment author'
    }
  />
</Box>

So, we would need, either to change the angle, size or spacing between comments and check if it works well on all pages. We will also probably need to add pointer-events: none, since the image is partially blocking some clicking on the elements.
What do you think?

[dalibormrska]

Great work @joseh29 , thanks a lot for the quick implementation! Yeah I see the problem...

Sooner or later the comments should get a visual update as shown on a screenshot below, which will give them enough space between each other.

@benfurber What do you think? Should we adjust and deploy now, or stash and wait until the comments get the update?

[mariojsnunes]

@dalibormrska I'd say we should do the comments update first. Can it be started already?
Also that "Correct answer" label should move to the right?

[dalibormrska]

@mariojsnunes We talked about it briefly with Ben, I think he might have it on his todo list already. So yeah it is ready for implementation.

That above is the solution of the correct answer for the mobile, if there is enough space in the row, it can be on the right, a shown below.