Tracking issue: Improve Figma → Implementation accuracy

[martenbjork]

The implementation is currently quite far off from the designs in Figma. Getting the implementation closer to Figma will make the product look better, and help us better gauge where the design is missing. 🚀

Tasks

• Use consistent writing style for UI labels #2724
• Fix "selected" state when hovering a blueprint item #2728
• Fix text strings in tooltips #2729
• Use consistent hover effects between [?] icon and maximize icon #2731
• Improve styling of demo header #2732
• Remove link color in "help" text in Rerun menu #2733
• Improve design implementation accuracy of dropdown menus #2734
• Improve design of text inputs #2735
• Improve padding and radius of command palette #2736
• Improve design implementation accuracy of viewport views #2737
• Use design system arrow icon across the app #2738
• Disable text selection in demo HTML header #2856
• Increase min width of FPS / 1.0x inputs in timeline #2857
• Maximizing a view in the viewport shouldn't automatically select it #2861
• Use correct unicode symbols for keyboard shortcut hints #2862
• Improve positioning of borders between panels #2865

Blueprint tree overhaul (to be pooled with new design)

• Expand clickable area in blueprints list #2855
• Make blueprint selection immediate on mouse down #2858
• Allow slow clicks in the UI #2859

Remove expansion animation effect:

• Remove hover effect in selection view toggle #2726
• Remove hover effect in checkboxes #2727
• Remove scaling effect when hovering buttons #2730

From #2780:

• No way to deselect #2709
• Consistent tooltips and hover cards #2701

Deferred to future, bigger, encompassing redesigns:

• Lines in timeline should go between data, not through it #2860

[jleibs]

If any of these are too difficult or require significant upstream changes to egui, then potentially push changes back into figma.

[martenbjork]

Agreed! Let's find a cost-benefit middle ground if needed.

[abey79]

Demo site as of just prior to starting on these issues: https://demo.rerun.io/pr/2781/examples/structure_from_motion/

Handy to have around for comparison (e.g. #2796 made #2728 somewhat worse).

[abey79]

We just had a technical/tactical discussion with @Wumpf on many of these issues:

• In several cases, we need to create custom widget wrappers. This could be done using this pattern: ReUi(ui).checkbox(...), enabling relatively easy migration of the existing code. At first sight, these widgets are involved:
  • checkboxes (to suppress the expansion animation)
  • a variation of checkboxes (to build nice drop-down menus as per Improve design implementation accuracy of dropdown menus #2734)
  • probably anything that has a triangle in it, so they look nice and identical (Use design system arrow icon across the app #2738)
• It would be great to add per-widget-type overrides to egui's visuals (implemented as Option). TBD with @emilk.
• Short term, I'll focus on easy (for real...) issues and start rolling in custom widgets to address the more complicated ones.