Update the design of the editor selection cards

[gtsiolis]

Problem to solve

Following up from #15139 (review), the current design of the editor selection cards lack visual balance after introducing the IDE version number at the bottom.

Cc @filiptronicek @jeanp413 @mustard-mh @akosyakov because of the relevant discussion (internal).

BEFORE	AFTER

See also relevant discussions[1][2] (internal):

The Browser label could reuse a new label component variant (neutral) of the PillLabel component.

Maybe using a different label variant to not associate these two kinds of information.

I’d only move the version above the icon for better visual balance and update the font weight-colors

[akosyakov]

Would it make sense to add Desktop label fro VS Code to be explicit? I wonder whether it is confusing for users right now.

[gtsiolis]

@akosyakov That's easy if we go with the two separate pill labels (orange and neutral). Good point! Yeah, let's do that. 🤝

[gtsiolis]

Thanks @filiptronicek for chatting about this earlier today. To summarize, the goal here is to:

1. Move the version below the IDE name as seen in the designs above
2. Use proper font color and font weight for the versions (text and pills) and in light and dark theme, as well as selected an unselected state on the selectable component card.
3. Show Desktop and Browser labels for the VS Code options.
4. Suface the IDE version when it's Professional or Ultimate in some JetBrains' IDEs.
5. Include EAP and INSIDERS suffice when present in the version for accuracy.
6. Possibly reuse the PillLabel component and introduce a new neutral component variant.

Besides these, let's also make sure version strings scale well in the dashboard, given that some editors can leak in suffixes like -EAP, etc, see relevant discussions[1][2][3] (internal) and screenshots below. @filiptronicek has been working on this in #15251 and #15252. 🤜 🤛

Example (Rider EAP)	Releases (PhpStorm)	Releases (GoLand)