Improve styling of chat messages and channel select

Co-Authored-By: Nathan Sobo <nathan@zed.dev>

zed/assets/themes/_base.toml

@@ -28,22 +28,23 @@ color = "$text.0.color"
 [chat_panel]
 channel_name = { extends = "$text.0", weight = "bold" }
 channel_name_hash = { text = "$text.2", padding.right = 5 }
+padding = 10
 
 [chat_panel.message]
 body = "$text.1"
-sender = { extends = "$text.0", weight = "bold", margin.right = 10.0 }
+sender = { extends = "$text.0", weight = "bold", margin.right = 10 }
 timestamp = "$text.2"
-padding = { top = 10, bottom = 10, left = 10, right = 10 }
+padding.bottom = 10
 
 [chat_panel.channel_select.item]
-padding = { top = 4, bottom = 4, left = 4, right = 4 }
+padding = 4
 name = "$text.1"
-hash = { extends = "$text.2", margin.right = 5.0 }
+hash = { extends = "$text.2", margin.right = 5 }
 
 [chat_panel.channel_select.hovered_item]
 extends = "$chat_panel.channel_select.item"
 background = "$surface.2"
-corner_radius = 6.0
+corner_radius = 6
 
 [chat_panel.channel_select.active_item]
 extends = "$chat_panel.channel_select.item"
@@ -56,27 +57,28 @@ name = "$text.0"
 [chat_panel.channel_select.header]
 extends = "$chat_panel.channel_select.active_item"
 padding.bottom = 0
+padding.left = 0
 
 [chat_panel.channel_select.menu]
-padding = { top = 4, bottom = 4, left = 4, right = 4 }
-corner_radius = 6.0
-border = { color = "#000000", width = 1.0 }
+padding = 4
+corner_radius = 6
+border = { color = "#000000", width = 1 }
 background = "$surface.0"
 
 [selector]
 background = "$surface.2"
 text = "$text.0"
-padding = { top = 6.0, bottom = 6.0, left = 6.0, right = 6.0 }
-margin.top = 12.0
-corner_radius = 6.0
-shadow = { offset = [0.0, 0.0], blur = 12.0, color = "#00000088" }
+padding = 6
+margin.top = 12
+corner_radius = 6
+shadow = { offset = [0, 0], blur = 12, color = "#00000088" }
 
 [selector.item]
 background = "#424344"
 text = "$text.1"
 highlight_text = { extends = "$text.base", color = "#18a3ff", weight = "bold" }
-border = { color = "#000000", width = 1.0 }
-padding = { top = 6.0, bottom = 6.0, left = 6.0, right = 6.0 }
+border = { color = "#000000", width = 1 }
+padding = 6
 
 [selector.active_item]
 extends = "$selector.item"

zed/src/chat_panel.rs

@@ -172,6 +172,7 @@ impl ChatPanel {
         let now = OffsetDateTime::now_utc();
         let settings = self.settings.borrow();
         let theme = &settings.theme.chat_panel.message;
+        Container::new(
             Flex::column()
                 .with_child(
                     Flex::row()
@@ -200,6 +201,9 @@ impl ChatPanel {
                         .boxed(),
                 )
                 .with_child(Text::new(message.body.clone(), theme.body.clone()).boxed())
+                .boxed(),
+        )
+        .with_style(&theme.container)
         .boxed()
     }
 

zed/src/theme.rs

@@ -73,6 +73,8 @@ pub struct ChatPanel {
 
 #[derive(Deserialize)]
 pub struct ChatMessage {
+    #[serde(flatten)]
+    pub container: ContainerStyle,
     pub body: TextStyle,
     pub sender: ContainedText,
     pub timestamp: ContainedText,