Fix language selector alignment

[chrisgarrity]

Resolves

• Resolves #Language selection icon is too high #3301

Proposed Changes

• Adjust language icon and caret in menu-bar
  • add slight margin on left and and right (works for both LTR and RTL languages)
• remove unused style from language-selector.css

Reason for Changes

Align language icon with Scratch logo and tutorials icon

Test Coverage

Current tests run

Browser Coverage

Check the OS/browser combinations tested (At least 2)

Mac

• Chrome
• Firefox
• Safari

Windows

• Chrome
• Firefox
• Edge

Chromebook

• Chrome

iPad

• Safari

Android Tablet

• Chrome

[chrisgarrity]

Tests are going to fail due to #3305

I'll rebase and push once that PR lands to get the travis build to work.

[benjiwheeler]

Only problem is that the width of $language-selector-width in units.css is currently 3rem, which makes the total width look like:

...if we bump this up to 3.5rem, it looks much neater:

...alternatively, if we decrease the language-icon height from 1.5rem to 1.25rem, it also looks better, and the icon size seems (to me) more in line with the other menu icons:

[benjiwheeler]

Looks good, but the width and effective right-padding seems out of whack

[chrisgarrity]

I'm concerned that we already lose most of the title in some languages on smaller screens - it doesn't seem worth adding more width to the language icon - it already has a lot of space around it. How about reducing the padding instead (using .5rem instead of .75rem):

Spacing without highlight:

@carljbowman what do you think? reduce the padding, reduce the icon size, or increase the width?

[chrisgarrity]

@benjiwheeler I've updated the css for the language-selector. I spoke with @carljbowman and he thought reducing the padding for the language selector was fine.

[chrisgarrity]

BTW, you can try it here: https://chrisgarrity.github.io/scratch-gui/issue/2658-lang-select/
(once travis finishes building)

addressed comments

[benjiwheeler]

OK, LGTM. FYI, this is what it looks like now on my mac chrome:

[chrisgarrity]

@benjiwheeler that still doesn't look quite right - I wonder if the stylesheet is getting cached?

[benjiwheeler]

Emptied cache and hard reloaded, seems the same. (I'm not sure you create those build branches, or if they're created automatically? Should I pull the PR instead?)

[benjiwheeler]

Downloaded the diff and tried it locally, looks great! The built branch was just stale.