Add styles for button

Piotr Osiewicz created 2 years ago

Change summary

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(-)

Detailed changes

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()

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,
 }

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: {