Issue Reporter: UI/UX improvements

[joaomoreno]

Testing #46595

I have a couple of UI change suggestions:

• The paragraph left alignment is quite upsetting
• Font sizes seem arbitrary. A good font size example usage is the feedback widget (smiley in the bottom right corner).
  • Let's not reduce the font size of explanatory paragraphs. They should not behave little small print, we want people to notice them
• Escape should close the dialog
• The form fields are strangely phrased. I feel being more direct here would help:
  • Type instead of This is a
  • Component instead of File on
• The monospace tables look quite foreign:
  • Use a more complete family specifier: font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
  • Use a background color for code block areas (just like markdown in Github, code blocks have a grey background)
  • Decrease table row padding to make them much more compact. Or even better, get rid of the tables and just render everything as regular form fields
• Drop the rounded corners and use a similar style to VS Code itself. Search, SCM and Extension viewlets or even the feedback widget have good text input field styles. Same applies to the button.

[joaomoreno]

I just noticed the narrow UI:

This works much better IMO. Why not always drop the form field labels?

[RMacfarlane]

@joaomoreno Thanks for the feedback! I've incorporated some of it, let me know what you think:

I changed the paragraph left alignment, and the tables use the font and background color you suggested. I removed the rounded corners on everything except the selects, which is consistent with the rest of the VSCode UI - all of our selects have round corners on Mac. (This is why I made everything rounded to begin with, so that it looked consistent.) I think the labels are easier to understand as they currently are.

[joaomoreno]

@RMacfarlane Much better! 🚀

I wonder if you should also prevent the user from selecting the labels using user-select: none?