diff --git a/crates/collab_ui/src/collab_titlebar_item.rs b/crates/collab_ui/src/collab_titlebar_item.rs index 96217a22cb..59098e3492 100644 --- a/crates/collab_ui/src/collab_titlebar_item.rs +++ b/crates/collab_ui/src/collab_titlebar_item.rs @@ -202,9 +202,9 @@ impl CollabTitlebarItem { .with_child( MouseEventHandler::::new(0, cx, |state, _| { let style = titlebar - .toggle_contacts_button + .toggle_collaborators_button .style_for(state, self.collaborator_list_popover.is_some()); - Svg::new("icons/plus_8.svg") + Svg::new("icons/user_group_12.svg") .with_color(style.color) .constrained() .with_width(style.icon_width) @@ -228,8 +228,10 @@ impl CollabTitlebarItem { ChildView::new(popover, cx) .contained() .with_margin_top(titlebar.height) - .with_margin_left(titlebar.toggle_contacts_button.default.button_width) - .with_margin_right(-titlebar.toggle_contacts_button.default.button_width) + .with_margin_left(titlebar.toggle_collaborators_button.default.button_width) + .with_margin_right( + -titlebar.toggle_collaborators_button.default.button_width, + ) .boxed(), ) .with_fit_mode(OverlayFitMode::SwitchAnchor) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index bc338bbe26..26f071167e 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -84,6 +84,7 @@ pub struct Titlebar { pub outdated_warning: ContainedText, pub share_button: Interactive, pub call_control: Interactive, + pub toggle_collaborators_button: Interactive, pub toggle_contacts_button: Interactive, pub toggle_contacts_badge: ContainerStyle, } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 769ea85a00..e81ce608f4 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -147,6 +147,21 @@ export default function workspace(colorScheme: ColorScheme) { color: foreground(layer, "variant", "hovered"), }, }, + toggleCollaboratorsButton: { + margin: { left: 6 }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 20, + active: { + background: background(layer, "variant", "active"), + color: foreground(layer, "variant", "active"), + }, + hover: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, toggleContactsButton: { margin: { left: 6 }, cornerRadius: 6,