Improve design implementation accuracy of dropdown menus

[martenbjork]

Implementation:

Design system:

Figma link

Behind the scenes:

TODO

• Reduce the padding around the list items to 4px horizontally and 8px vertically
• Increase the padding around individual list items to 6px horizontally
• Set the height of each list item to 20px
• Use the tickmark icon to signify the current selection
• Use the down arrow icon in Figma for the closed state
• click down on the menu opens it, click up on an item selects it

[abey79]

@martenbjork The usual "egui" way of doing this is to use checkboxes instead of regular buttons as it's currently done. This is visible, e.g., in the rerun menu:

What immediately stands out is:

1. the "v" check mark shapes (which comes from egui) is different from that of sigma
2. the default background of the checkbox is ever so slightly different of the menu's background, so we can see it

How do you feel about (1)? Note that this is the same checkmark for regular, non-menu checkbox:

As for (2), I'll fix the checkbox color to match the menu, let me know if I should go the other way round.

[martenbjork]

1. I think having consistent iconography across the UI is pretty important. Using the icons from Figma will ensure that.
2. I find the EGUI way of doing "checkable menu items" not great. As a rule, when hovering an interactive item, the entire item should respond as one big interactive surface. That feels predictable and reliable. In constrast, when you hover one thing and another thing changes visually, the UI feels very finicky and unreliable. (What should I click? The menu item? The checkbox? Will clicking the checkbox close the menu?)

Rerun:

checkboxes.mov

Mac OS:

macos-checkboxes.mov

Figma:

figma-checkboxes.mov

[martenbjork]

An example from Rerun getting this right. Look how big, trustworthy and predictable this toggle feels. Super solid! (Especially when we get rid of the scaling of the arrow, then it will just be one big hover area reacting predictably.)

toggle.mov