Redesign tootbox

[lynlynlynx]

This is a suggestion.
This solves ellipsis of toot buttons in all languages whose translation is long.

There is much blank space under tootbox, so it's nice way to display toot button in all languages.
Another solution for #4736 , and all 4736's cons are solved.

Problem	With this commit

Suggestion by @mattcoxonline , thanks!

[Sylvhem]

I really like it. But why not put the characters counter inside the .compose-form__buttons DIV element rather than into the .compose-form__upload-button one while we are at it? It would make the first looks less empty. Just a thought.

[Gargron]

I agree with @Sylvhem, it feels like the character counter should go into the grey bar to the right

[lynlynlynx]

@Sylvhem Thanks! I also agree with you. I'm working on it.

@Gargron What should I do with the color settings? The colors in the screenshot below are #42485a lighten($ui-base-color, 12%) for the counter text, and #c2c2c2 lighten($simple-background-color, 24%) for the border(Is this needed?).

This is a test screenshot (under development).

[Gargron]

@lynlynlynx Make the border a bit lighter and add more padding between the border and 500

Also... maybe... font-weight: 500 on the counter?

[mattcoxonline]

I would suggest that the character count goes on the right hand side without any border. Roboto Bold, 14px, right aligned.

When it comes to colours, I picked out #434B5F - which I'd also set for the colour of the icons in that strip to. The existing colours don't really pass to a decent accessibility standard.

[lynlynlynx]

Thanks @mattcoxonline

Finally, compose-form looks like the screenshot below.
The contrast ratio of the counter text is 7.63 (AAA on WCAG 2.0).

Unfortunately, there are many button colors (default, hover, active, and disabled) and many of them are out of WCAG 2.0 guidelines. When it comes to change the colors, we need to discuss about all of them, so why don't we discuss on a new pull request?