Style the Message Input Box Differently from Received Messages

[SethFalco]

Description

The message input box where a user may type their messages is styled with the same background color, foreground color, and font, etc as received messages.

This can make it very annoying when messages get past 3 or 4 lines long as they begin to look merged with the last received message.

Steps to reproduce

• Be in a channel when you have sent a message before, or received messages from others.
• Type a message that takes up at least 3 or 4 lines.

I would expect the difference between the two messages to be clear as day, it should be immediately obvious what is what an in instant.

In actuality, the content looks slightly merged, and a bit counterintuitive for the user.

Logs being sent: no

With another persons message above.

With my own message above.

A GIF with some custom styles added via dev tools.

Styles applies:

background-color: #21262c;
border-radius: 0.5em;
padding: .5em;
margin: .5em 0;

Note: I'm not a designer, I'm not suggesting using these styles, it was just a quick example for this issue.

Version information

• Platform: Both

For the web app:

• Browser: Firefox 80.0.1 64-bit
• OS: Linux
• URL: develop.element.io

For the desktop app:

• OS: Linux
• Version: 1.7.5

[SethFalco]

To be honest I wasn't sure if this fell under UI/UX bug, or feature request.
If I put it under the wrong issue type, please let me know and I'll correct myself for future.

[t3chguy]

Closing in favour of #14735