Switch collaborator list to using own style

crates/collab_ui/src/collab_titlebar_item.rs

@@ -202,9 +202,9 @@ impl CollabTitlebarItem {
             .with_child(
                 MouseEventHandler::<ToggleCollaboratorList>::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)

crates/theme/src/theme.rs

@@ -84,6 +84,7 @@ pub struct Titlebar {
     pub outdated_warning: ContainedText,
     pub share_button: Interactive<ContainedText>,
     pub call_control: Interactive<IconButton>,
+    pub toggle_collaborators_button: Interactive<IconButton>,
     pub toggle_contacts_button: Interactive<IconButton>,
     pub toggle_contacts_badge: ContainerStyle,
 }

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,