collab: Tweak screen selector appearance (#34919)

Co-authored-by: Danilo Leal <daniloleal09@gmail.com>


Release Notes:

- N/A

Co-authored-by: Danilo Leal <daniloleal09@gmail.com>

crates/ui/src/components/button/split_button.rs

@@ -1,6 +1,6 @@
 use gpui::{
     AnyElement, App, BoxShadow, IntoElement, ParentElement, RenderOnce, Styled, Window, div, hsla,
-    point, px,
+    point, prelude::FluentBuilder, px,
 };
 use theme::ActiveTheme;
 
@@ -8,6 +8,12 @@ use crate::{ElevationIndex, h_flex};
 
 use super::ButtonLike;
 
+#[derive(Clone, Copy, PartialEq)]
+pub enum SplitButtonStyle {
+    Filled,
+    Outlined,
+}
+
 /// /// A button with two parts: a primary action on the left and a secondary action on the right.
 ///
 /// The left side is a [`ButtonLike`] with the main action, while the right side can contain
@@ -18,11 +24,21 @@ use super::ButtonLike;
 pub struct SplitButton {
     pub left: ButtonLike,
     pub right: AnyElement,
+    style: SplitButtonStyle,
 }
 
 impl SplitButton {
     pub fn new(left: ButtonLike, right: AnyElement) -> Self {
-        Self { left, right }
+        Self {
+            left,
+            right,
+            style: SplitButtonStyle::Filled,
+        }
+    }
+
+    pub fn style(mut self, style: SplitButtonStyle) -> Self {
+        self.style = style;
+        self
     }
 }
 
@@ -31,21 +47,23 @@ impl RenderOnce for SplitButton {
         h_flex()
             .rounded_sm()
             .border_1()
-            .border_color(cx.theme().colors().text_muted.alpha(0.12))
+            .border_color(cx.theme().colors().border.opacity(0.5))
             .child(div().flex_grow().child(self.left))
             .child(
                 div()
                     .h_full()
                     .w_px()
-                    .bg(cx.theme().colors().text_muted.alpha(0.16)),
+                    .bg(cx.theme().colors().border.opacity(0.5)),
             )
             .child(self.right)
-            .bg(ElevationIndex::Surface.on_elevation_bg(cx))
-            .shadow(vec![BoxShadow {
-                color: hsla(0.0, 0.0, 0.0, 0.16),
-                offset: point(px(0.), px(1.)),
-                blur_radius: px(0.),
-                spread_radius: px(0.),
-            }])
+            .when(self.style == SplitButtonStyle::Filled, |this| {
+                this.bg(ElevationIndex::Surface.on_elevation_bg(cx))
+                    .shadow(vec![BoxShadow {
+                        color: hsla(0.0, 0.0, 0.0, 0.16),
+                        offset: point(px(0.), px(1.)),
+                        blur_radius: px(0.),
+                        spread_radius: px(0.),
+                    }])
+            })
     }
 }