Top bar: Spacing tweaks to match front end

[sixhours]

Changes proposed in this Pull Request

• Lots of minor spacing tweaks to the top bar for closer visual alignment with the front end
• Rearranged the top bar portions of the stylesheet because I couldn't keep track of where I was otherwise. :P

You'll notice that in some cases the top bar is still not a 1:1 replica between Calypso and the front end; I didn't want to go down the rabbit hole of pixel-perfection, this should iron out the most obvious kinks. If we want 100% visual parity I can continue picking away at pixels. :)

Visual differences by screen size

The front end toolbar has not changed in this PR; I only include the images for comparison

• Small - few differences before and after

Before

After

Front end

• Medium - most notable differences before and after, particularly around padding/spacing

Before

After

Front end

• Large - should be barely any differences before and after

Before

After

Front end

Testing instructions

• Switch to this PR
• Check out the top bar in Calypso on multiple pages, multiple devices, multiple screen sizes. Any edge cases I've missed? Anything that looks visibly broken?

Related to #49154

[matticbot]

Test live: https://calypso.live/?branch=fix/top-bar-spacing

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[mreishus]

This is working well for me. I only noticed one minor issue which isn't a show stopper. At some widths (mine was 878px), the rightmost line in the new post icon is cut off. This might have to do with me using Firefox or having a double digit number of drafts.