collab: Tweak screen selector appearance (#34919)

Piotr Osiewicz and Danilo Leal created 4 months ago

Co-authored-by: Danilo Leal <[e-mail]>


Release Notes:

- N/A

Co-authored-by: Danilo Leal <[e-mail]>

Change summary

crates/git_ui/src/git_ui.rs                     |  2 
crates/title_bar/src/collab.rs                  | 21 +++++++--
crates/ui/src/components/button/split_button.rs | 40 +++++++++++++-----
crates/ui/src/components/list/list.rs           |  4 +
4 files changed, 48 insertions(+), 19 deletions(-)

Detailed changes

crates/git_ui/src/git_ui.rs

@@ -501,7 +501,7 @@ mod remote_button {
         )
         .into_any_element();
 
-        SplitButton { left, right }
+        SplitButton::new(left, right)
     }
 }
 

crates/title_bar/src/collab.rs

@@ -11,8 +11,8 @@ use gpui::{App, Task, Window, actions};
 use rpc::proto::{self};
 use theme::ActiveTheme;
 use ui::{
-    Avatar, AvatarAudioStatusIndicator, ContextMenu, ContextMenuItem, Facepile, PopoverMenu,
-    SplitButton, TintColor, Tooltip, prelude::*,
+    Avatar, AvatarAudioStatusIndicator, ContextMenu, ContextMenuItem, Divider, Facepile,
+    PopoverMenu, SplitButton, SplitButtonStyle, TintColor, Tooltip, prelude::*,
 };
 use util::maybe;
 use workspace::notifications::DetachAndPromptErr;
@@ -383,6 +383,7 @@ impl TitleBar {
                                 .detach_and_log_err(cx);
                         }),
                 )
+                .child(Divider::vertical())
                 .into_any_element(),
         );
 
@@ -497,6 +498,7 @@ impl TitleBar {
                     trigger.render(window, cx),
                     self.render_screen_list().into_any_element(),
                 )
+                .style(SplitButtonStyle::Outlined)
                 .into_any_element(),
             );
         }
@@ -547,10 +549,17 @@ impl TitleBar {
                                     entry_render: Box::new(move |_, _| {
                                         h_flex()
                                             .gap_2()
-                                            .child(Icon::new(IconName::Screen).when(
-                                                active_screenshare_id == Some(meta.id),
-                                                |this| this.color(Color::Accent),
-                                            ))
+                                            .child(
+                                                Icon::new(IconName::Screen)
+                                                    .size(IconSize::XSmall)
+                                                    .map(|this| {
+                                                        if active_screenshare_id == Some(meta.id) {
+                                                            this.color(Color::Accent)
+                                                        } else {
+                                                            this.color(Color::Muted)
+                                                        }
+                                                    }),
+                                            )
                                             .child(Label::new(label.clone()))
                                             .child(
                                                 Label::new(resolution.clone())

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.),
+                    }])
+            })
     }
 }

crates/ui/src/components/list/list.rs

@@ -84,7 +84,9 @@ impl RenderOnce for List {
                 (false, _) => this.children(self.children),
                 (true, Some(false)) => this,
                 (true, _) => match self.empty_message {
-                    EmptyMessage::Text(text) => this.child(Label::new(text).color(Color::Muted)),
+                    EmptyMessage::Text(text) => {
+                        this.px_2().child(Label::new(text).color(Color::Muted))
+                    }
                     EmptyMessage::Element(element) => this.child(element),
                 },
             })