Update card selector component and sidebar design

[gtsiolis]

Problem to solve

The current card selector component can feel a bit distracting due to bordered layout. This becomes for visible with the growing list of available editors.

Proposal

Following the designs in #7852 (comment) and the design exploration happening in the backstage for #7564, here're some early design drafts how we could update the card selector component design. This can affect the editor selection, as well as, theme and plans sections in user settings. Cc @akosyakov @loujaybee

BEFORE	AFTER

To this extend, we could also include the version as mentioned in #7852 (comment).

Using stable version	Using latest version

TBD (To be discussed)

[gtsiolis]

To explain further this design approach and visualize the proposal, see below how this could help information hierarchy and overall UX.

Low fidelity design	Low fidelity design in perspective	Layer design

[akosyakov]

To this extend, we could also include the version as mentioned in #7852 (comment).

I really like to see versions too :) There are actually numbers for insiders and EAP too, i.e. 1.64-insiders, eap-213.103.14 and so on

[loujaybee]

I think this is a (seemingly) small but really important issue—thanks for raising @gtsiolis !

1. It gives both desktop and browser more of a feeling to the user of equal weighting in Gitpod, which aligns best with having an orthogonal product [1] and our IDE / product ambitions! 🚀
2. This will resolve inconsistencies with selecting early access/insider versions for both VS Code and JetBrains IDE's [1]

A couple thoughts on current design:

1. The black square is not entirely obvious to me as a selected state, is there any way we could make the selected state stronger/more obvious, somehow? Maybe reintroducing the tick, or some other visual cue?
2. "Latest release" doesn't necessarily signify to me that the version is potentially unstable. We should review the copy text, and/or add some disclaimers. But, of course the challenge is to have copy text which applies to both VS Code Insiders, and also JetBrains EAP without overloading the UI.

[gtsiolis]

Thanks for the feedback, @loujaybee!

The black square is not entirely obvious to me as a selected state

This is currently an early design focusing on creating better information architecture as described in #7932 (comment). We could probably improve the colors, keep the thick border or the tick, etc.

"Latest release" doesn't necessarily signify to me that the version is potentially unstable.

Completely agree. UX copy is also work in progress and you're right about the version is potentially unstable. We should probably include a hint about this which could apply to all editors above.