Welcome Page refresh (#3219)

### What

This PR:
- implements a refreshed, toned-down Welcome Page;
- add the panel linking  to the examples page;
- make the UI responsive.

This is a PR train, #3191 must be reviewed/fixed/merged first.

Fixes:
 - #3124
 - #3043

<img width="1608" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/28e68d38-2efa-41ab-96a0-2891bee59ea3">


### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)
* [x] I have tested [demo.rerun.io](https://demo.rerun.io/pr/3219) (if
applicable)

- [PR Build Summary](https://build.rerun.io/pr/3219)
- [Docs
preview](https://rerun.io/preview/53fef8c10871100e6aef8a2e49aff9d28e6cac6f/docs)
<!--DOCS-PREVIEW-->
- [Examples
preview](https://rerun.io/preview/53fef8c10871100e6aef8a2e49aff9d28e6cac6f/examples)
<!--EXAMPLES-PREVIEW-->
- [Recent benchmark results](https://ref.rerun.io/dev/bench/)
- [Wasm size tracking](https://ref.rerun.io/dev/sizes/)

---------

Co-authored-by: Emil Ernerfeldt <[email protected]>

crates/re_ui/src/icons.rs

@@ -109,15 +109,20 @@ pub const CONTAINER: Icon = Icon::new("container", include_bytes!("../data/icons
 
 pub const WELCOME_SCREEN_CONFIGURE: Icon = Icon::new(
     "welcome_screen_configure",
-    include_bytes!("../data/images/welcome_screen_configure.png"),
+    include_bytes!("../data/images/onboarding-configure.png"),
 );
 
 pub const WELCOME_SCREEN_LIVE_DATA: Icon = Icon::new(
     "welcome_screen_live_data",
-    include_bytes!("../data/images/welcome_screen_live_data.png"),
+    include_bytes!("../data/images/onboarding-live-data.png"),
 );
 
 pub const WELCOME_SCREEN_RECORDED_DATA: Icon = Icon::new(
     "welcome_screen_recorded_data",
-    include_bytes!("../data/images/welcome_screen_recorded_data.png"),
+    include_bytes!("../data/images/onboarding-recorded-data.png"),
+);
+
+pub const WELCOME_SCREEN_EXAMPLES: Icon = Icon::new(
+    "welcome_screen_examples",
+    include_bytes!("../data/images/onboarding-examples.jpg"),
 );

crates/re_viewer/data/examples_manifest.json

@@ -11,8 +11,8 @@
       "object-detection",
       "pinhole-camera"
     ],
-    "demo_url": "https://demo.rerun.io/commit/5be001c/examples/arkit_scenes/",
-    "rrd_url": "https://demo.rerun.io/commit/5be001c/examples/arkit_scenes/data.rrd",
+    "demo_url": "https://demo.rerun.io/commit/6f0c1f2/examples/arkit_scenes/",
+    "rrd_url": "https://demo.rerun.io/commit/6f0c1f2/examples/arkit_scenes/data.rrd",
     "thumbnail": {
       "url": "https://static.rerun.io/8b90a80c72b27fad289806b7e5dff0c9ac97e87c_arkit_scenes_480w.png",
       "width": 480,
@@ -30,8 +30,8 @@
       "pinhole-camera",
       "time-series"
     ],
-    "demo_url": "https://demo.rerun.io/commit/5be001c/examples/structure_from_motion/",
-    "rrd_url": "https://demo.rerun.io/commit/5be001c/examples/structure_from_motion/data.rrd",
+    "demo_url": "https://demo.rerun.io/commit/6f0c1f2/examples/structure_from_motion/",
+    "rrd_url": "https://demo.rerun.io/commit/6f0c1f2/examples/structure_from_motion/data.rrd",
     "thumbnail": {
       "url": "https://static.rerun.io/033edff752f86bcdc9a81f7877e0b4411ff4e6c5_structure_from_motion_480w.png",
       "width": 480,
@@ -47,8 +47,8 @@
       "mri",
       "dicom"
     ],
-    "demo_url": "https://demo.rerun.io/commit/5be001c/examples/dicom_mri/",
-    "rrd_url": "https://demo.rerun.io/commit/5be001c/examples/dicom_mri/data.rrd",
+    "demo_url": "https://demo.rerun.io/commit/6f0c1f2/examples/dicom_mri/",
+    "rrd_url": "https://demo.rerun.io/commit/6f0c1f2/examples/dicom_mri/data.rrd",
     "thumbnail": {
       "url": "https://static.rerun.io/b8b25dd01e892e6daf5177e6fc05ff5feb19ee8d_dicom_mri_480w.png",
       "width": 480,
@@ -65,8 +65,8 @@
       "2D",
       "3D"
     ],
-    "demo_url": "https://demo.rerun.io/commit/5be001c/examples/human_pose_tracking/",
-    "rrd_url": "https://demo.rerun.io/commit/5be001c/examples/human_pose_tracking/data.rrd",
+    "demo_url": "https://demo.rerun.io/commit/6f0c1f2/examples/human_pose_tracking/",
+    "rrd_url": "https://demo.rerun.io/commit/6f0c1f2/examples/human_pose_tracking/data.rrd",
     "thumbnail": {
       "url": "https://static.rerun.io/277b9c72da1d0d0ae9d221f7552dede9c4d5b2fa_human_pose_tracking_480w.png",
       "width": 480,
@@ -82,8 +82,8 @@
       "plots",
       "api-example"
     ],
-    "demo_url": "https://demo.rerun.io/commit/5be001c/examples/plots/",
-    "rrd_url": "https://demo.rerun.io/commit/5be001c/examples/plots/data.rrd",
+    "demo_url": "https://demo.rerun.io/commit/6f0c1f2/examples/plots/",
+    "rrd_url": "https://demo.rerun.io/commit/6f0c1f2/examples/plots/data.rrd",
     "thumbnail": {
       "url": "https://static.rerun.io/ca0c72df93d70c79b0e640fb4b7c33cdc0bfe5f4_plots_480w.png",
       "width": 480,
@@ -101,8 +101,8 @@
       "object-tracking",
       "opencv"
     ],
-    "demo_url": "https://demo.rerun.io/commit/5be001c/examples/detect_and_track_objects/",
-    "rrd_url": "https://demo.rerun.io/commit/5be001c/examples/detect_and_track_objects/data.rrd",
+    "demo_url": "https://demo.rerun.io/commit/6f0c1f2/examples/detect_and_track_objects/",
+    "rrd_url": "https://demo.rerun.io/commit/6f0c1f2/examples/detect_and_track_objects/data.rrd",
     "thumbnail": {
       "url": "https://static.rerun.io/efb301d64eef6f25e8f6ae29294bd003c0cda3a7_detect_and_track_objects_480w.png",
       "width": 480,
@@ -117,8 +117,8 @@
       "3d",
       "api-example"
     ],
-    "demo_url": "https://demo.rerun.io/commit/5be001c/examples/dna/",
-    "rrd_url": "https://demo.rerun.io/commit/5be001c/examples/dna/data.rrd",
+    "demo_url": "https://demo.rerun.io/commit/6f0c1f2/examples/dna/",
+    "rrd_url": "https://demo.rerun.io/commit/6f0c1f2/examples/dna/data.rrd",
     "thumbnail": {
       "url": "https://static.rerun.io/ea7a9ab2f716bd37d1bbc1eabf3f55e4f526660e_helix_480w.png",
       "width": 480,

crates/re_viewer/src/ui/welcome_screen/example_page.rs

@@ -1,3 +1,4 @@
+use super::WelcomeScreenResponse;
 use egui::load::TexturePoll;
 use egui::{NumExt, TextureOptions, Ui};
 use re_log_types::LogMsg;
@@ -105,7 +106,7 @@ impl ExamplePage {
         ui: &mut egui::Ui,
         rx: &re_smart_channel::ReceiveSet<re_log_types::LogMsg>,
         command_sender: &re_viewer_context::CommandSender,
-    ) {
+    ) -> WelcomeScreenResponse {
         let mut margin = egui::Margin::same(MARGINS);
         margin.bottom = MARGINS - ROW_VSPACE;
         egui::Frame {
@@ -144,7 +145,7 @@ impl ExamplePage {
                         ));
 
                         ui.add(egui::Label::new(
-                            egui::RichText::new("Learn from the community.")
+                            egui::RichText::new("Explore what you can build.")
                                 .line_height(Some(32.0))
                                 .text_style(re_ui::ReUi::welcome_screen_h1()),
                         ));
@@ -232,6 +233,8 @@ impl ExamplePage {
                 });
             });
         });
+
+        WelcomeScreenResponse::default()
     }
 }
 

crates/re_viewer/src/ui/welcome_screen/mod.rs

@@ -22,6 +22,12 @@ pub struct WelcomeScreen {
     example_page: example_page::ExamplePage,
 }
 
+#[derive(Default)]
+#[must_use]
+pub(super) struct WelcomeScreenResponse {
+    pub go_to_example_page: bool,
+}
+
 impl Default for WelcomeScreen {
     fn default() -> Self {
         Self {
@@ -66,16 +72,18 @@ impl WelcomeScreen {
         // TODO(ab): figure out why that happens
         ui.set_clip_rect(ui.available_rect_before_wrap());
 
-        egui::ScrollArea::new([
-            matches!(self.current_page, WelcomeScreenPage::Welcome),
-            true,
-        ])
-        .id_source(("welcome_screen_page", &self.current_page))
-        .auto_shrink([false, false])
-        .show(ui, |ui| match self.current_page {
-            WelcomeScreenPage::Welcome => welcome_page_ui(re_ui, ui, rx, command_sender),
-            WelcomeScreenPage::Examples => self.example_page.ui(ui, rx, command_sender),
-        });
+        let response: WelcomeScreenResponse = egui::ScrollArea::vertical()
+            .id_source(("welcome_screen_page", &self.current_page))
+            .auto_shrink([false, false])
+            .show(ui, |ui| match self.current_page {
+                WelcomeScreenPage::Welcome => welcome_page_ui(re_ui, ui, rx, command_sender),
+                WelcomeScreenPage::Examples => self.example_page.ui(ui, rx, command_sender),
+            })
+            .inner;
+
+        if response.go_to_example_page {
+            self.current_page = WelcomeScreenPage::Examples;
+        }
     }
 }
 
@@ -112,15 +120,8 @@ pub fn loading_ui(ui: &mut egui::Ui, rx: &ReceiveSet<LogMsg>) {
     });
 }
 
-fn button_centered_label(ui: &mut egui::Ui, label: impl Into<egui::WidgetText>) {
-    ui.vertical(|ui| {
-        ui.add_space(9.0);
-        ui.label(label);
-    });
-}
-
 fn set_large_button_style(ui: &mut egui::Ui) {
-    ui.style_mut().spacing.button_padding = egui::vec2(12.0, 9.0);
+    ui.style_mut().spacing.button_padding = egui::vec2(10.0, 7.0);
     let visuals = ui.visuals_mut();
     visuals.widgets.hovered.expansion = 0.0;
     visuals.widgets.active.expansion = 0.0;
@@ -148,7 +149,6 @@ fn url_large_text_button(
         if egui::Button::image_and_text(texture_id, ReUi::small_icon_size(), text)
             .ui(ui)
             .on_hover_cursor(egui::CursorIcon::PointingHand)
-            .on_hover_text(url)
             .clicked()
         {
             ui.ctx().output_mut(|o| {