From 4b52ff65c138042a6b23ee0de9f94f8f71574a8a Mon Sep 17 00:00:00 2001
From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com>
Date: Fri, 23 Jun 2023 13:30:40 +0200
Subject: [PATCH] Add styles for  button

---
 crates/collab_ui/src/collab_titlebar_item.rs |  5 +----
 crates/theme/src/theme.rs                    |  1 +
 styles/src/styleTree/workspace.ts            | 18 ++++++++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/crates/collab_ui/src/collab_titlebar_item.rs b/crates/collab_ui/src/collab_titlebar_item.rs
index 81e2736164..cb696dab9d 100644
--- a/crates/collab_ui/src/collab_titlebar_item.rs
+++ b/crates/collab_ui/src/collab_titlebar_item.rs
@@ -550,10 +550,7 @@ impl CollabTitlebarItem {
 
         let titlebar = &theme.workspace.titlebar;
         MouseEventHandler::<LeaveCall, Self>::new(0, cx, |state, _| {
-            let style = titlebar
-                .toggle_speakers_button
-                .in_state(false)
-                .style_for(state);
+            let style = titlebar.leave_call_button.style_for(state);
             Svg::new(icon)
                 .with_color(style.color)
                 .constrained()
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index bccb74a7ac..b4a4ba69fd 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -135,6 +135,7 @@ pub struct Titlebar {
     pub toggle_contacts_button: Toggleable<Interactive<IconButton>>,
     pub toggle_microphone_button: Toggleable<Interactive<IconButton>>,
     pub toggle_speakers_button: Toggleable<Interactive<IconButton>>,
+    pub leave_call_button: Interactive<IconButton>,
     pub user_menu_button: Toggleable<Interactive<IconButton>>,
     pub toggle_contacts_badge: ContainerStyle,
 }
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 0e00f6f5bc..abc237468a 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -407,6 +407,24 @@ export default function workspace(colorScheme: ColorScheme) {
                     },
                 },
             }),
+            leaveCallButton: interactive({
+                base: {
+                    margin: { left: itemSpacing },
+                    cornerRadius: 6,
+                    color: foreground(layer, "variant"),
+                    iconWidth: 14,
+                    buttonWidth: 20,
+                },
+                state: {
+                    clicked: {
+                        background: background(layer, "variant", "pressed"),
+                    },
+                    hovered: {
+                        background: background(layer, "variant", "hovered"),
+                    },
+                },
+            }),
+
             userMenuButton: merge(titlebarButton, {
                 inactive: {
                     default: {