diff --git a/assets/icons/Icons/exit.svg b/assets/icons/Icons/exit.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6d768492482d6c62e1ec10b5f10054796c89cbb7
--- /dev/null
+++ b/assets/icons/Icons/exit.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/icons/stop_sharing.svg b/assets/icons/stop_sharing.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e9aa7eac5a481ed3f6ae9253fc8c9c8c3a0785e6
--- /dev/null
+++ b/assets/icons/stop_sharing.svg
@@ -0,0 +1,5 @@
+
diff --git a/crates/gpui2_macros/src/styleable_helpers.rs b/crates/gpui2_macros/src/styleable_helpers.rs
index 41a7008fc16efb3ed5b3f1176a9d1821ec15bf01..2c67653292f9b972915afb8e8d7af895e664cb41 100644
--- a/crates/gpui2_macros/src/styleable_helpers.rs
+++ b/crates/gpui2_macros/src/styleable_helpers.rs
@@ -105,6 +105,11 @@ fn box_prefixes() -> Vec<(&'static str, bool, Vec)> {
),
("mt", true, vec![quote! { margin.top }]),
("mb", true, vec![quote! { margin.bottom }]),
+ (
+ "my",
+ true,
+ vec![quote! { margin.top }, quote! { margin.bottom }],
+ ),
(
"mx",
true,
diff --git a/crates/storybook/src/workspace.rs b/crates/storybook/src/workspace.rs
index d125181f38a0b0ade26064ce6ca26023c5b697fc..0d463a45e716fce1e7e75b9c5f5eb96dbb9c2c2c 100644
--- a/crates/storybook/src/workspace.rs
+++ b/crates/storybook/src/workspace.rs
@@ -1,6 +1,6 @@
use crate::{collab_panel::collab_panel, theme::theme};
use gpui2::{
- elements::{div, svg},
+ elements::{div, img, svg},
style::{StyleHelpers, Styleable},
Element, IntoElement, ParentElement, ViewContext,
};
@@ -106,59 +106,122 @@ impl TitleBar {
.flex()
.items_center()
.h_full()
- .gap_4()
+ .gap_3()
.px_2()
- // === Comms === //
+ // === Actions === //
.child(
- div()
- .flex()
- .items_center()
- .gap_1()
- .child(
- div()
- .w_6()
- .h_full()
- .flex()
- .items_center()
- .justify_center()
- .child(
- svg()
- .path("icons/microphone.svg")
- .w_4()
- .h_4()
- .fill(theme.lowest.base.default.foreground),
- ),
- )
- .child(
- div()
- .w_6()
- .h_full()
- .flex()
- .items_center()
- .justify_center()
- .child(
- svg()
- .path("icons/screen.svg")
- .w_4()
- .h_4()
- .fill(theme.lowest.base.default.foreground),
- ),
- )
- .child(
- div()
- .w_6()
- .h_full()
- .flex()
- .items_center()
- .justify_center()
- .child(
- svg()
- .path("icons/exit.svg")
- .w_4()
- .h_4()
- .fill(theme.lowest.base.default.foreground),
- ),
+ div().child(
+ div().flex().items_center().gap_1().child(
+ div().size_4().flex().items_center().justify_center().child(
+ svg()
+ .path("icons/exit.svg")
+ .size_4()
+ .fill(theme.lowest.base.default.foreground),
+ ),
),
+ ),
+ )
+ .child(div().w_px().h_3().fill(theme.lowest.base.default.border))
+ // === Comms === //
+ .child(
+ div().child(
+ div()
+ .flex()
+ .items_center()
+ .gap_px()
+ .child(
+ div()
+ .px_2()
+ .py_1()
+ .rounded_md()
+ .h_full()
+ .flex()
+ .items_center()
+ .justify_center()
+ .hover()
+ .fill(theme.lowest.base.hovered.background)
+ .active()
+ .fill(theme.lowest.base.pressed.background)
+ .child(
+ svg()
+ .path("icons/microphone.svg")
+ .size_3p5()
+ .fill(theme.lowest.base.default.foreground),
+ ),
+ )
+ .child(
+ div()
+ .px_2()
+ .py_1()
+ .rounded_md()
+ .h_full()
+ .flex()
+ .items_center()
+ .justify_center()
+ .hover()
+ .fill(theme.lowest.base.hovered.background)
+ .active()
+ .fill(theme.lowest.base.pressed.background)
+ .child(
+ svg()
+ .path("icons/radix/speaker-loud.svg")
+ .size_3p5()
+ .fill(theme.lowest.base.default.foreground),
+ ),
+ )
+ .child(
+ div()
+ .px_2()
+ .py_1()
+ .rounded_md()
+ .h_full()
+ .flex()
+ .items_center()
+ .justify_center()
+ .hover()
+ .fill(theme.lowest.base.hovered.background)
+ .active()
+ .fill(theme.lowest.base.pressed.background)
+ .child(
+ svg()
+ .path("icons/radix/desktop.svg")
+ .size_3p5()
+ .fill(theme.lowest.base.default.foreground),
+ ),
+ ),
+ ),
+ )
+ .child(div().w_px().h_3().fill(theme.lowest.base.default.border))
+ // User Group
+ .child(
+ div().child(
+ div()
+ .px_1()
+ .py_1()
+ .flex()
+ .items_center()
+ .justify_center()
+ .rounded_md()
+ .gap_0p5()
+ .hover()
+ .fill(theme.lowest.base.hovered.background)
+ .active()
+ .fill(theme.lowest.base.pressed.background)
+ .child(
+ img()
+ .uri("https://avatars.githubusercontent.com/u/1714999?v=4")
+ .size_4()
+ .rounded_md()
+ .fill(theme.middle.on.default.foreground),
+ )
+ .child(
+ svg()
+ .path("icons/caret_down_8.svg")
+ .w_2()
+ .h_2()
+ .fill(theme.lowest.variant.default.foreground),
+ ),
+ ),
)
}
}