Update screenshare toggle, titlebar spacing

styles/src/component/icon_button.ts

@@ -1,7 +1,13 @@
 import { ColorScheme } from "../common";
 import { interactive, toggleable } from "../element";
 import { background, foreground } from "../styleTree/components";
-import { Margin } from "../types/zed";
+
+export type Margin = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
 
 interface IconButtonOptions {
     layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
@@ -34,8 +40,8 @@ export function icon_button(theme: ColorScheme, { color, margin, layer }: IconBu
             margin: m,
             icon_width: 15,
             icon_height: 15,
-            button_width: 23,
-            button_height: 19,
+            button_width: 21,
+            button_height: 17,
         },
         state: {
             default: {

styles/src/component/text_button.ts

@@ -1,7 +1,7 @@
 import { ColorScheme } from "../common";
 import { interactive, toggleable } from "../element";
 import { TextProperties, background, foreground, text } from "../styleTree/components";
-import { Margin } from "../types/zed";
+import { Margin } from "./icon_button";
 
 interface TextButtonOptions {
     layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];

styles/src/styleTree/workspace.ts

@@ -260,7 +260,7 @@ export default function workspace(colorScheme: ColorScheme) {
 
             // Sign in buttom
             // FlatButton, Variant
-            signInPrompt: merge(titlebarButton, {
+            sign_in_button: merge(titlebarButton, {
                 inactive: {
                     default: {
                         margin: {
@@ -300,25 +300,41 @@ export default function workspace(colorScheme: ColorScheme) {
                 cornerRadius: 6,
             },
 
-            screen_share_button: icon_button(colorScheme, {
-                margin: { left: itemSpacing / 2 },
-            }),
-
-            toggle_contacts_button: toggleable_icon_button(colorScheme, {
-                margin: { left: itemSpacing }
+            leave_call_button: icon_button(colorScheme, {
+                margin: {
+                    left: itemSpacing / 2,
+                    right: itemSpacing
+                },
             }),
 
             toggle_microphone_button: toggleable_icon_button(colorScheme, {
-                margin: { left: itemSpacing },
+                margin: {
+                    left: itemSpacing,
+                    right: itemSpacing / 2
+                },
                 active_color: 'negative'
             }),
 
             toggle_speakers_button: toggleable_icon_button(colorScheme, {
-                margin: { left: itemSpacing / 2 },
+                margin: {
+                    left: itemSpacing / 2,
+                    right: itemSpacing / 2
+                },
             }),
 
-            leave_call_button: icon_button(colorScheme, {
-                margin: { left: itemSpacing },
+            screen_share_button: toggleable_icon_button(colorScheme, {
+                margin: {
+                    left: itemSpacing / 2,
+                    right: itemSpacing
+                },
+                active_color: 'accent'
+            }),
+
+            toggle_contacts_button: toggleable_icon_button(colorScheme, {
+                margin: {
+                    left: itemSpacing,
+                    right: itemSpacing / 2
+                },
             }),
 
             user_menu_button:
@@ -339,6 +355,7 @@ export default function workspace(colorScheme: ColorScheme) {
                     },
                 }),
 
+            // Jewel that notifies you that there are new contact requests
             toggleContactsBadge: {
                 cornerRadius: 3,
                 padding: 2,