ui(launcher): clean placeholder art and media toggles

client/src/launcher/ui_components/build_contexts.rs

@@ -22,9 +22,9 @@ struct DeviceControlsContext {
     speaker_combo: gtk::ComboBoxText,
     keyboard_combo: gtk::ComboBoxText,
     mouse_combo: gtk::ComboBoxText,
-    camera_channel_toggle: gtk::CheckButton,
-    microphone_channel_toggle: gtk::CheckButton,
-    audio_channel_toggle: gtk::CheckButton,
+    camera_channel_toggle: gtk::ToggleButton,
+    microphone_channel_toggle: gtk::ToggleButton,
+    audio_channel_toggle: gtk::ToggleButton,
     audio_gain_scale: gtk::Scale,
     audio_gain_value: gtk::Label,
     mic_gain_scale: gtk::Scale,

client/src/launcher/ui_components/build_device_controls.rs

@@ -75,15 +75,24 @@
     media_grid.set_row_spacing(10);
     media_grid.set_column_spacing(8);
     media_group.append(&media_grid);
-    let camera_channel_toggle = gtk::CheckButton::with_label("Camera");
+    let camera_channel_toggle = gtk::ToggleButton::with_label("Camera");
     camera_channel_toggle.set_active(state.channels.camera);
     camera_channel_toggle.set_tooltip_text(Some("Send webcam during relay."));
-    let audio_channel_toggle = gtk::CheckButton::with_label("Speaker");
+    camera_channel_toggle.add_css_class("pill-toggle");
+    camera_channel_toggle.add_css_class("media-toggle");
+    stabilize_button(&camera_channel_toggle, 92);
+    let audio_channel_toggle = gtk::ToggleButton::with_label("Speaker");
     audio_channel_toggle.set_active(state.channels.audio);
     audio_channel_toggle.set_tooltip_text(Some("Play remote audio here."));
-    let microphone_channel_toggle = gtk::CheckButton::with_label("Mic");
+    audio_channel_toggle.add_css_class("pill-toggle");
+    audio_channel_toggle.add_css_class("media-toggle");
+    stabilize_button(&audio_channel_toggle, 92);
+    let microphone_channel_toggle = gtk::ToggleButton::with_label("Mic");
     microphone_channel_toggle.set_active(state.channels.microphone);
     microphone_channel_toggle.set_tooltip_text(Some("Send mic during relay."));
+    microphone_channel_toggle.add_css_class("pill-toggle");
+    microphone_channel_toggle.add_css_class("media-toggle");
+    stabilize_button(&microphone_channel_toggle, 92);
 
     let audio_gain_adjustment = gtk::Adjustment::new(
         f64::from(state.audio_gain_percent),

client/src/launcher/ui_components/combo_helpers.rs

@@ -113,7 +113,7 @@ pub fn sync_input_device_combo(
 fn attach_device_control_row(
     grid: &gtk::Grid,
     row: i32,
-    stream_toggle: &gtk::CheckButton,
+    stream_toggle: &impl IsA<gtk::Widget>,
     selector: &impl IsA<gtk::Widget>,
     test_button: &gtk::Button,
 ) {

client/src/launcher/ui_components/control_buttons.rs

@@ -28,6 +28,6 @@ pub(crate) fn set_rail_button_label(button: &gtk::Button, label: &str) {
     }
 }
 
-fn stabilize_button(button: &gtk::Button, width: i32) {
-    button.set_size_request(width, 36);
+fn stabilize_button(button: &impl IsA<gtk::Widget>, width: i32) {
+    button.as_ref().set_size_request(width, 36);
 }

client/src/launcher/ui_components/style.rs

@@ -147,6 +147,20 @@ pub fn install_css(window: &gtk::ApplicationWindow) {
             min-height: 36px;
             padding: 0 14px;
         }
+        button.media-toggle {
+            background: rgba(214, 81, 81, 0.18);
+            border-color: rgba(214, 81, 81, 0.42);
+            color: #f7d6d6;
+            font-weight: 700;
+        }
+        button.media-toggle:checked {
+            background: rgba(96, 214, 126, 0.20);
+            border-color: rgba(96, 214, 126, 0.46);
+            color: #dff7e4;
+        }
+        button.media-toggle:disabled {
+            opacity: 0.7;
+        }
         button.pill-toggle-active {
             background: rgba(91, 179, 162, 0.2);
             border-color: rgba(91, 179, 162, 0.45);

client/src/launcher/ui_components/types.rs

@@ -128,9 +128,9 @@ pub struct LauncherWidgets {
     pub speaker_combo: gtk::ComboBoxText,
     pub keyboard_combo: gtk::ComboBoxText,
     pub mouse_combo: gtk::ComboBoxText,
-    pub camera_channel_toggle: gtk::CheckButton,
-    pub microphone_channel_toggle: gtk::CheckButton,
-    pub audio_channel_toggle: gtk::CheckButton,
+    pub camera_channel_toggle: gtk::ToggleButton,
+    pub microphone_channel_toggle: gtk::ToggleButton,
+    pub audio_channel_toggle: gtk::ToggleButton,
     pub power_auto_button: gtk::Button,
     pub power_on_button: gtk::Button,
     pub power_off_button: gtk::Button,

testing/tests/client_launcher_layout_contract.rs

@@ -267,9 +267,13 @@ fn media_controls_own_stream_toggles_and_inline_gain_controls() {
         UI_LAYOUT_SRC.contains("let power_shell = gtk::Box::new(gtk::Orientation::Vertical, 6);")
     );
     assert!(!UI_LAYOUT_SRC.contains("let channel_heading = gtk::Label::new(Some(\"Streams\"));"));
-    assert!(UI_LAYOUT_SRC.contains("gtk::CheckButton::with_label(\"Camera\")"));
-    assert!(UI_LAYOUT_SRC.contains("gtk::CheckButton::with_label(\"Mic\")"));
-    assert!(UI_LAYOUT_SRC.contains("gtk::CheckButton::with_label(\"Speaker\")"));
+    assert!(UI_LAYOUT_SRC.contains("gtk::ToggleButton::with_label(\"Camera\")"));
+    assert!(UI_LAYOUT_SRC.contains("gtk::ToggleButton::with_label(\"Mic\")"));
+    assert!(UI_LAYOUT_SRC.contains("gtk::ToggleButton::with_label(\"Speaker\")"));
+    assert!(UI_LAYOUT_SRC.contains("camera_channel_toggle.add_css_class(\"media-toggle\");"));
+    assert!(UI_LAYOUT_SRC.contains("audio_channel_toggle.add_css_class(\"media-toggle\");"));
+    assert!(UI_LAYOUT_SRC.contains("microphone_channel_toggle.add_css_class(\"media-toggle\");"));
+    assert!(UI_LAYOUT_SRC.contains("button.media-toggle:checked"));
     assert!(UI_LAYOUT_SRC.contains("let camera_quality_combo = gtk::ComboBoxText::new();"));
     assert!(UI_LAYOUT_SRC.contains("sync_camera_quality_combo("));
     assert!(UI_LAYOUT_SRC.contains("camera_quality_combo.set_size_request(88, -1);"));