Improve visibility of composer

[nadonomy]

We've seen in a user test session someone squinting and saying they couldn't quite see the composer to be able to send a message.

Related issue: https://github.com/vector-im/internal-planning/issues/24

[SimonBrandner]

This is partially related to #16304. The unprofessional mock up linked there could be an option

(IIRC, I've already discussed this with someone from the design team but both of us seemed to have forgotten about it :D )

[niquewoodhouse]

Using a 1px border of groupFilterPanel-bg-color on composer and room header

Using a 1px border of input-border-color on the timeline with groupFilterPanel-bg-color on the room header

It's a bit hard to tell from still images above what colours are good, so it might be worth having a netlify to test with but I believe those are the two best colours we have for this job (from my limited knowledge of the theme colours)

---

Part of the reason people maybe aren't able to find the composer is the use of avatars to the left of the composer, while they're scanning for an input field. These kind of changes are maybe a bit bigger than papercuts.

[t3chguy]

@niquewoodhouse all above options are feasible, the composer previously had such a border and it was removed by Nad iirc, so would be good to double-check the intent there

[SimonBrandner]

I like the two latter options though I find them a little claustrophobic. I realize making the composer a bit higher would take up space though I think a few pixels might be worth it

[niquewoodhouse]

...the composer previously had such a border and it was removed by Nad iirc, so would be good to double-check the intent there

@nadonomy would you mind briefly confirming why the border was removed, if it's ok to add one again?

I'd also be interested in hearing if we may remove the avatar next to the composer - to match the latest composer work on mobile.

Thanks

[reivilibre]

I think this is basically the same issue but for different reasons, but I struggle to distinguish actual messages from the composer sometimes. It's usually when I've been thinking about what I'm writing, drop it for a second and come back, I can't tell which part of the text belongs to a sent message and which belongs to the composer.

Presumably the above ideas will sort this out as well. :)

[inducer]

An additional concern is that Firefox's link URL overlay can cover up the composer:

If the composer were spaced away from the bottom of the window (e.g. like Slack does this), this would not be an issue.

[HarHarLinks]

I want to bring to attention the point that I want to be able to see on a glance if I have an empty line at the start of the composer input. Here is an image with a horizontal line added via devtools similar to the screenshot above to illustrate the problem

Can you tell?

There is in fact an empty line in the screenshot.

[t3chguy]

This got reverted matrix-org/matrix-react-sdk#8840

[HarHarLinks]

One issue with the now reverted change is the thread composer looking weird, because it already has a different border

[t3chguy]

That needs to also get reverted

[t3chguy]

@HarHarLinks are you running the reverted PR Netlify? The revert hasn't landed yet

Cannot reproduce

[HarHarLinks]

No, what I'm trying to say is:
I'm on an old build (nightly 220614) that has not reverted this yet.
I wanted to document one shortcoming of the (now former) implementation that should be addressed when this issue gets reevaluated and possibly reimplemented.

[t3chguy]

@HarHarLinks yup that is #22459

--

All of the below apply to the soon-reverted-change

#22536
#22508
#22534
#22506
#22467
#22459

[germain-gg]

Closing as duplicate of element-hq/element-meta#947. It will be the canonical issue