Add leave button on active call header

crates/call/src/call.rs

@@ -201,6 +201,7 @@ impl ActiveCall {
     pub fn hang_up(&mut self, cx: &mut ModelContext<Self>) -> Result<()> {
         if let Some((room, _)) = self.room.take() {
             room.update(cx, |room, cx| room.leave(cx))?;
+            cx.notify();
         }
         Ok(())
     }

crates/theme/src/theme.rs

@@ -97,6 +97,7 @@ pub struct ContactList {
     pub user_query_editor_height: f32,
     pub add_contact_button: IconButton,
     pub header_row: Interactive<ContainedText>,
+    pub leave_call: Interactive<ContainedText>,
     pub contact_row: Interactive<ContainerStyle>,
     pub row_height: f32,
     pub contact_avatar: ImageStyle,

styles/src/styleTree/contactList.ts

@@ -0,0 +1,134 @@
+import Theme from "../themes/common/theme";
+import { backgroundColor, border, borderColor, iconColor, player, text } from "./components";
+
+export default function contactList(theme: Theme) {
+  const nameMargin = 8;
+  const sidePadding = 12;
+
+  const contactButton = {
+    background: backgroundColor(theme, 100),
+    color: iconColor(theme, "primary"),
+    iconWidth: 8,
+    buttonWidth: 16,
+    cornerRadius: 8,
+  };
+
+  return {
+    userQueryEditor: {
+      background: backgroundColor(theme, 500),
+      cornerRadius: 6,
+      text: text(theme, "mono", "primary"),
+      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
+      selection: player(theme, 1).selection,
+      border: border(theme, "secondary"),
+      padding: {
+        bottom: 4,
+        left: 8,
+        right: 8,
+        top: 4,
+      },
+      margin: {
+        left: sidePadding,
+        right: sidePadding,
+      },
+    },
+    userQueryEditorHeight: 33,
+    addContactButton: {
+      margin: { left: 6, right: 12 },
+      color: iconColor(theme, "primary"),
+      buttonWidth: 16,
+      iconWidth: 16,
+    },
+    rowHeight: 28,
+    sectionIconSize: 8,
+    headerRow: {
+      ...text(theme, "mono", "secondary", { size: "sm" }),
+      margin: { top: 14 },
+      padding: {
+        left: sidePadding,
+        right: sidePadding,
+      },
+      active: {
+        ...text(theme, "mono", "primary", { size: "sm" }),
+        background: backgroundColor(theme, 100, "active"),
+      },
+    },
+    leaveCall: {
+      background: backgroundColor(theme, 100),
+      border: border(theme, "secondary"),
+      cornerRadius: 6,
+      margin: {
+        top: 1,
+      },
+      padding: {
+        top: 1,
+        bottom: 1,
+        left: 7,
+        right: 7,
+      },
+      ...text(theme, "sans", "secondary", { size: "xs" }),
+      hover: {
+        ...text(theme, "sans", "active", { size: "xs" }),
+        background: backgroundColor(theme, "on300", "hovered"),
+        border: border(theme, "primary"),
+      },
+    },
+    contactRow: {
+      padding: {
+        left: sidePadding,
+        right: sidePadding,
+      },
+      active: {
+        background: backgroundColor(theme, 100, "active"),
+      },
+    },
+    contactAvatar: {
+      cornerRadius: 10,
+      width: 18,
+    },
+    contactStatusFree: {
+      cornerRadius: 4,
+      padding: 4,
+      margin: { top: 12, left: 12 },
+      background: iconColor(theme, "success"),
+    },
+    contactStatusBusy: {
+      cornerRadius: 4,
+      padding: 4,
+      margin: { top: 12, left: 12 },
+      background: iconColor(theme, "warning"),
+    },
+    contactUsername: {
+      ...text(theme, "mono", "primary", { size: "sm" }),
+      margin: {
+        left: nameMargin,
+      },
+    },
+    contactButtonSpacing: nameMargin,
+    contactButton: {
+      ...contactButton,
+      hover: {
+        background: backgroundColor(theme, "on300", "hovered"),
+      },
+    },
+    disabledButton: {
+      ...contactButton,
+      background: backgroundColor(theme, 100),
+      color: iconColor(theme, "muted"),
+    },
+    inviteRow: {
+      padding: {
+        left: sidePadding,
+        right: sidePadding,
+      },
+      border: { top: true, width: 1, color: borderColor(theme, "primary") },
+      text: text(theme, "sans", "secondary", { size: "sm" }),
+      hover: {
+        text: text(theme, "sans", "active", { size: "sm" }),
+      },
+    },
+    callingIndicator: {
+      ...text(theme, "mono", "muted", { size: "xs" })
+    }
+  }
+}

styles/src/styleTree/incomingCallNotification.ts

@@ -0,0 +1,22 @@
+import Theme from "../themes/common/theme";
+import { text } from "./components";
+
+export default function incomingCallNotification(theme: Theme): Object {
+  const avatarSize = 12;
+  return {
+    callerAvatar: {
+      height: avatarSize,
+      width: avatarSize,
+      cornerRadius: 6,
+    },
+    callerUsername: {
+      ...text(theme, "sans", "primary", { size: "xs" }),
+    },
+    acceptButton: {
+      ...text(theme, "sans", "primary", { size: "xs" })
+    },
+    declineButton: {
+      ...text(theme, "sans", "primary", { size: "xs" })
+    },
+  };
+}