Delight: Inc. visibility of composer

[daniellekirkwood]

Hypothesis: Improving the visual appeal of the Composer will have a measurable impact on a user's first session in Element.

See comments for related issues.

PostHog 1: Retention by day Composer > Pageview
PostHog 2: Time taken from Pageview > Composer (WIP)
PostHog 3: Funnel Signup > Composer > Pageview (WIP)
PostHog 4: Composer stickiness

[robintown]

Related: element-hq/element-web#17362

[SimonBrandner]

Related: element-hq/element-web#16304

[daniellekirkwood]

Related: element-hq/roadmap#21

[niquewoodhouse]

A few of the related issues go into areas like where the typing indicator appear but I'd like to just try being very small in scope, to increase chances of shipping and seeing if it's had a good impact.

I think adding a border to the actual input will help increase visibility that this is an input.

ele-composer-2.mov

• Move e2e iconography to right side of input
• Change Send message to Message

Additional states:

If voice message is active:

• Copy existing behaviour, just add border to input

If message is big

• Copy existing behaviour, just add border to input

Scrolling

We might not need to keep the existing background on the composer, so could use a gradient at the bottom:

Untitled.mov

[daniellekirkwood]

Great! Thanks @niquewoodhouse

I think there are issues with the current padding on the composer - especially when typing over multiple lines - so it would be great to get those fixed with this issue too.