Change design of compose form in web UI

[Gargron]

One of our testers said that the compose form had an outdated "Windows 7" look about it, so I asked our designer what we could do about it. Also, now it's dark in dark mode, and I've renamed the confusing "Unlisted" into a slightly less misleading "Quiet public".

Editing a post:

Replying to a post:

Adding a content warning:

Adding media:

Adding a poll:

Empty:

Selecting post visibility:

---

Fixes MAS-206

Additionally:

• Fixes emoji picker not displayed in dark mode #27068
• Fixes Dark mode is ignored by certain elements #24927
• Fixes Dark Mode - Edit box is not dark #19561
• Fixes Text input field and emoji selection in dark mode have a white background #13258
• Fixes Scope icons are problematic #24878
• Fixes inconsistency in exclamation point for send button when replying vs when composing a new post #18191

[connie-e]

The composer looks cramped with the post button being with the icons.

[Andre601]

I personally feel like the compose button looks horrible on the side, no matter how much you clean it up and improve it.

It always feels squeezed in and as if its potential isn't used here.

Why not have a box at the top of the timeline where clicking it expands it, to then write in and post?

Having to the side feels outdated and like an after thought rather than an actual feature...

Like put a new user in front of a personal timeline and ask them what that thing on the left side does. Chances are they either don't know or guess an incorrect behaviour.
With the compose box on top of the timeline a user would fairly quickly piece together that it is connected to said timeline.

And with the left sidebar freed up a bit could extra stuff such as instance info (i.e. their description) be provided.

Either way, this design is just awful and the positioning makes no sense. And that comes from a regular Mastodon User.

[renchap]

This is a work in progress and we are working on improving this with our designer.

We do not plan large changes to the compose box at the moment (because they would require a large redesign), like moving it elsewhere on the screen, but the final design will be less cramped.

[joenepraat]

Looks good. But what I really like to see is to sync it with the rest of the dark theme. Even the text field can be dark.

I also like to have an option to pop-out the compose UI as a large modal overlaying the rest of the interface and/or to open it in a new tab.

[jmking-iftas]

I feel like the privacy and language "public" and "english" should be inverted to white on blue along the same lines as a selected post type. In these examples they look more like content tags. If they were inverted so they are "selected" (and assuming when i tap ore click I get the drop down options which would not be selected/blue on white) it might help them.

I like graying out (and disabling?) the eg media attachment when poll is selected or vice versa, nice touch, better than hiding it IMO. Will the grayed out get a desc of "a poll cannot be added to posts with uploaded media" type language? Should compose-form__upload-button be white on blue if at least one item has been uploaded?

Moving privacy to include the word (public/followers-only etc) is an upgrade (maybe lose the icons altogether?) and having language next to it also a plus. I see some logic as to what languages show up there, but in general I'd want to be sure the languages I use mostly appear at the top of that list, or restrict it if I've set language filters to only show me eg ten languages, those are the ten that should be in this list.

Should these two be separated from the compose area? When I add a poll I get a HR feature in compose-form__uploads-wrapper, maybe something similar to tease these two post configurations apart from the post content itself? ( I note the hr has been removed in these mockups, I think it should be reviewed for helpfulness understanding the free text compose area vs fixed items)

Changing the button text to reply or update when relevant is a great idea, and will help folks who think they're replying to a toot realise it's unattached. There will be some holdouts (probably me included) who still want the "post" to read "toot" instead, which may impact the update and reply option due to hacky CSS workarounds, but in general having context-sensitive button text is an improvement.

The emoji icon was likely moved for good reasons, but I'm curious why it's no longer up in the content area - that's where emojis go. Having this icon down with the "post configuration stuff" makes it seem like I need to set this post's mood or something, not insert emoji.

Edit, forgot to mention, very much like that CW is now joined to the compose box and not separated, not sure about the caution decoration, not all CW usage is actually a warning, sometimes it's a set up for a joke or a topic or subject heading, but that's probably a minor concern

[vmstan]

Edit button coloring is inverted on High Contrast theme, icon coloring is also inconsistent.

[ClearlyClaire]

This looks more modern overall and I'm happy language and visibility options are visible and spelled out, and I'm happy about the single/multiple poll options being explicit now!

This feels a bit cramped overall, but the two-line fallback looks very good!

The new reply indicator has potential, but I feel the inconsistent layout confusing (I think the display name and handle should be on two lines):

The contrast overall seems off, especially in the CW field:

The lack of border or contrast between the dropdowns and the composer feels confusing as well:

Margins are missing from the mobile UI:

… as well as the advanced interface:

[vmstan]

Yeah can confirm mobile margins are missing.

[Andre601]

I think the CW needs a bit more work. This yellow-black stripe patterns doesn't fit the overall style from what I can tell and a simple yellow border would do the trick too.

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[nileane]

Something I just noticed while working on adapting my custom theme to the new compose form, the selected visibility icon has an "icon-undefined" class regardless of what visibility is selected (which is problematic in my case for assigning a custom icon to each visibility setting).

For instance, the lock icon for the "Followers" visibility should have an "icon-lock" class, just like it does in the dropdown:

[renchap]

This has been merged with an updated label for the previous "Unlisted" option based on the various feedback we received.

This may be changed again after gathering more data and ideas, but we wanted to have the composer update merged so we can have wider testing on it, and any other change will be done in a further PR.

If you want to participate to this discussion about the "Unlisted" visibility, please use the ad-hoc discussion: #28887

[nclm]

Tiny bug report: clicking on the emoji icon when the emoji picker is opened should close the picker (in the same way clicking again the poll or cw icon closes the poll or cw fields). Right now, clicking the emoji icon again seems to reopen the emoji picker which is already opened.

[Ember-ruby]

i don't get the change of moving the publish button into the compose box, it just seems to needlessly cramp both it and the compose box

[omentic]

Hello, with the addition of scary orange-and-black tape to the content warning field, I have anecdotally noticed a significant reduction in their use. I happen to think that content warnings are extremely useful, as content warnings and also as titles. Having DANGER ALERT style CSS when composing them discourages new users from using them, I think, and I think that's not something to be discouraged.

I would appreciate it if this style change was reverted.