[MM-42139] Background colour for +X profile pic is not themed correctly

[cpoile]

Summary

• Fixed the background color and the spacing of the profile avatars (they were on the left, when the designs showed they should be on the right)
• For some reason the webpack kept bundling an old version of the avatar.scss file, regardless of the changes I made to it (even deleting it!). So I took this as a sign that we should use styled-components, which we've found in playbooks is /much/ cleaner and simpler than classnames and scss/css, especially when iterating or making slight tweaks.
• The Avatar component was using pretty complicated multi-class css, so I tried to simplify it a little, but I'm totally open to reverting some changes. Maybe the change I'm a little unhappy with is moving from a text-based size (xs s etc.) to a size and fontSize number. We could stay with a text-based size if you want, but then we'd need to do a long if-then-else or case statement to convert the text to numbers. I went with numbers because it's clear and simple. But open to alternatives.
• Apologies for the large commit -- there really wasn't an easy way to split them into self-contained chunks
• The spacing on the right of the avatar pics changes a little when there are 1, 2, or 3+ participants, because of the way we're moving them around. I can look at that and fix it, but I'm leaning towards it being a low priority polish for later.

@abhijit-singh for visibility, looks like:

Ticket Link

• https://mattermost.atlassian.net/browse/MM-42139

[streamer45]

Thanks @cpoile for the thorough work, I admit I came here expecting a couple of lines fix and certainly got surprised :p

The avatar component was literally copied over from webapp so it's fairly possible you got into CSS conflicts.
There's an ongoing effort to provide common components that can be easily re-used across different products. Hopefully we won't need to copy and past for much longer.

My only feedback to the proposed changes is that moving from vanilla CSS to styled components is somewhat of a big move that will create inconsistencies throughout the project. I am not opposed to it but I think we should discuss it a bit further and consider all the potential implications.

[abhijit-singh]

Looks good to me visually. Thanks @cpoile!

[streamer45]

Great work 👍