feat: Move text formatting bar above textarea

[jsit]

Move test formatting bar above textarea, as per this comment: #1288 (comment)

Note that this does this everywhere there is a markdown textarea, including in creating new posts, editing your bio, etc.

Also fixes:

• Create a "box" around the whoel markdown textarea/formatting bar so it's clear what you're formatting
• The "Post" button had a margin-right, not a margin-left as it should have
• Applied stylelint rules
• Fixed .emoji-picker selector
• Remove odd "button"-style formatting from language dropdown and its odd fixed/auto width behavior

[alectrocute]

This may be a nitpick, but non-comment-related use cases, when the buttons are on top, it becomes confusing if there’s another input field nearby.

It would be great to have this functionality controlled by a prop so we can use the bottom’d version in the non-comment-related use cases.

[jsit]

@alectrocute I agree. Not sure if adding a top/bottom switch prop is the right solution, or if it just needs a little design work to make the connection more clear.

[SleeplessOne1917]

@jsit my gut is leaning towards the latter.

[alectrocute]

@alectrocute I agree. Not sure if adding a top/bottom switch prop is the right solution, or if it just needs a little design work to make the connection more clear.

@jsit my gut is leaning towards the latter.

I think either would work! 😄 I'll never disapprove of making the markdown textarea better-looking & more unified.

[jsit]

@alectrocute @SleeplessOne1917

I did some design work here:

[alectrocute]

Other than the top border-radius of the text area (noticeable in dark theme), looks great IMO!

[jsit]

Other than the top border-radius of the text area (noticeable in dark theme), looks great IMO!

Good call, just fixed that, thanks.

[SleeplessOne1917]

Looks great!