diff --git a/crates/collab_ui/src/chat_panel.rs b/crates/collab_ui/src/chat_panel.rs index bbd6094d03..afd293422f 100644 --- a/crates/collab_ui/src/chat_panel.rs +++ b/crates/collab_ui/src/chat_panel.rs @@ -97,7 +97,7 @@ impl ChatPanel { .with_style(move |cx| { let style = &theme::current(cx).chat_panel.channel_select; SelectStyle { - header: style.header.container, + header: Default::default(), menu: style.menu, } }) @@ -269,14 +269,17 @@ impl ChatPanel { .contained() .with_style(theme.chat_panel.channel_select.container), ) - .with_child(self.render_active_channel_messages()) + .with_child(self.render_active_channel_messages(&theme)) .with_child(self.render_input_box(&theme, cx)) .into_any() } - fn render_active_channel_messages(&self) -> AnyElement { + fn render_active_channel_messages(&self, theme: &Arc) -> AnyElement { let messages = if self.active_chat.is_some() { - List::new(self.message_list.clone()).into_any() + List::new(self.message_list.clone()) + .contained() + .with_style(theme.chat_panel.list) + .into_any() } else { Empty::new().into_any() }; @@ -381,6 +384,8 @@ impl ChatPanel { .with_style(theme.hash.container), ) .with_child(Label::new(channel.name.clone(), theme.name.clone())) + .aligned() + .left() .contained() .with_style(theme.container) .into_any() diff --git a/crates/gpui/src/views/select.rs b/crates/gpui/src/views/select.rs index 0de535f837..0d57630c24 100644 --- a/crates/gpui/src/views/select.rs +++ b/crates/gpui/src/views/select.rs @@ -1,5 +1,7 @@ use crate::{ - elements::*, platform::MouseButton, AppContext, Entity, View, ViewContext, WeakViewHandle, + elements::*, + platform::{CursorStyle, MouseButton}, + AppContext, Entity, View, ViewContext, WeakViewHandle, }; pub struct Select { @@ -102,6 +104,7 @@ impl View for Select { .contained() .with_style(style.header) }) + .with_cursor_style(CursorStyle::PointingHand) .on_click(MouseButton::Left, move |_, this, cx| { this.toggle(cx); }), @@ -128,6 +131,7 @@ impl View for Select { cx, ) }) + .with_cursor_style(CursorStyle::PointingHand) .on_click(MouseButton::Left, move |_, this, cx| { this.set_selected_index(ix, cx); }) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index a845db3ba4..613c88d5cc 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -629,6 +629,7 @@ pub struct IconButton { pub struct ChatPanel { #[serde(flatten)] pub container: ContainerStyle, + pub list: ContainerStyle, pub channel_select: ChannelSelect, pub input_editor: FieldEditor, pub message: ChatMessage, diff --git a/styles/src/style_tree/chat_panel.ts b/styles/src/style_tree/chat_panel.ts index 53559911e7..d0e5d3c249 100644 --- a/styles/src/style_tree/chat_panel.ts +++ b/styles/src/style_tree/chat_panel.ts @@ -13,10 +13,10 @@ export default function chat_panel(): any { const channel_name = { padding: { - // top: 4, + left: SPACING, + right: SPACING, + top: 4, bottom: 4, - // left: 4, - right: 4, }, hash: { ...text(layer, "sans", "base"), @@ -26,23 +26,33 @@ export default function chat_panel(): any { return { background: background(layer), - padding: { - top: SPACING, - bottom: SPACING, - left: SPACING, - right: SPACING, + list: { + margin: { + left: SPACING, + right: SPACING, + } }, channel_select: { - header: { ...channel_name }, + header: { + ...channel_name, + border: border(layer, { bottom: true }) + }, item: channel_name, - active_item: channel_name, - hovered_item: channel_name, - hovered_active_item: channel_name, + active_item: { + ...channel_name, + background: background(layer, "on", "active"), + }, + hovered_item: { + ...channel_name, + background: background(layer, "on", "hovered"), + }, + hovered_active_item: { + ...channel_name, + background: background(layer, "on", "active"), + }, menu: { - padding: { - top: 10, - bottom: 10, - } + background: background(layer, "on"), + border: border(layer, { bottom: true }) } }, input_editor: { @@ -54,6 +64,11 @@ export default function chat_panel(): any { }), selection: theme.players[0], border: border(layer, "on"), + margin: { + left: SPACING, + right: SPACING, + bottom: SPACING, + }, padding: { bottom: 4, left: 8,