indicate replied-to messages are clickable in new reply UI

[HarHarLinks]

Is your suggestion related to a problem? Please describe.

matrix-org/matrix-react-sdk#3553 has landed in the nightly. Looks real nice.
It is however missing some indication that the replied-to message is clickable. Would be nice, at least on hover.

Yes the cursor changes to 👆️ but it is not clear what that means since nothing clickable is highlighted.

Describe the solution you'd like.

Background color offset

Describe alternatives you've considered.

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

[ShadowJonathan]

FWIW discord brightens the selected "clickable text" a bit when you hover over it.

[SimonBrandner]

I am not sure if we can easily achieve this. The reason this works for Discord is that their replies are grayish by default. So they can set the color to #fff on hover. But our replies are that by default, so I don't really know how to make them brighter. Ideas are welcome :)

[SimonBrandner]

@niquewoodhouse, do you have any thoughts on this? (thanks for the previous reply designs, btw)

[HarHarLinks]

High(or low)light the background instead? Seems to be the obvious choice, since you can click the area and not just the text

[ShadowJonathan]

Yeah making the background light up a little while you hover the cursor over it seems like the obvious choice.

[SimonBrandner]

The trouble here is that you have nested hover effects which looks a little odd to be honest:

Peek.2021-07-18.09-56.mp4

[ShadowJonathan]

I personally like it, I think this is fine.

Edit: Maybe the general message-hover brightness should be toned down a little, but that's for another issue and design to decide.

[HarHarLinks]

I see Šimon's argument, but it feels hard to judge without trying it in a natural environment. I will say that it is now obvious you are clicking the original message to jump to it.

In any case if this was to be done properly, the highlighted area should include the colored bar on the left, not extend all the way to the right(?) and have nice rounded corners.