split into body and header

crates/collab_ui/src/collab_panel/channel_modal.rs

@@ -181,31 +181,42 @@ impl View for ChannelModal {
 
         Flex::column()
             .with_child(
-                Label::new(format!("#{}", channel.name), theme.header.text.clone())
+                Flex::column()
+                    .with_child(
+                        Label::new(format!("#{}", channel.name), theme.title.text.clone())
+                            .contained()
+                            .with_style(theme.title.container.clone()),
+                    )
+                    .with_child(Flex::row().with_children([
+                        render_mode_button::<InviteMembers>(
+                            Mode::InviteMembers,
+                            "Invite members",
+                            mode,
+                            theme,
+                            cx,
+                        ),
+                        render_mode_button::<ManageMembers>(
+                            Mode::ManageMembers,
+                            "Manage members",
+                            mode,
+                            theme,
+                            cx,
+                        ),
+                    ]))
+                    .expanded()
                     .contained()
-                    .with_style(theme.header.container.clone()),
+                    .with_style(theme.header),
+            )
+            .with_child(
+                ChildView::new(&self.picker, cx)
+                    .contained()
+                    .with_style(theme.body),
             )
-            .with_child(Flex::row().with_children([
-                render_mode_button::<InviteMembers>(
-                    Mode::InviteMembers,
-                    "Invite members",
-                    mode,
-                    theme,
-                    cx,
-                ),
-                render_mode_button::<ManageMembers>(
-                    Mode::ManageMembers,
-                    "Manage members",
-                    mode,
-                    theme,
-                    cx,
-                ),
-            ]))
-            .with_child(ChildView::new(&self.picker, cx))
             .constrained()
-            .with_max_height(theme.height)
+            .with_max_height(theme.max_height)
+            .with_max_width(theme.max_width)
             .contained()
-            .with_style(theme.container)
+            .with_style(theme.modal)
             .into_any()
     }
 

crates/theme/src/theme.rs

@@ -251,9 +251,9 @@ pub struct CollabPanel {
 
 #[derive(Deserialize, Default, JsonSchema)]
 pub struct ChannelModal {
-    pub container: ContainerStyle,
+    pub max_height: f32,
-    pub height: f32,
+    pub max_width: f32,
-    pub header: ContainedText,
+    pub title: ContainedText,
     pub mode_button: Toggleable<Interactive<ContainedText>>,
     pub picker: Picker,
     pub row_height: f32,
@@ -264,6 +264,9 @@ pub struct ChannelModal {
     pub member_icon: Icon,
     pub invitee_icon: Icon,
     pub member_tag: ContainedText,
+    pub modal: ContainerStyle,
+    pub header: ContainerStyle,
+    pub body: ContainerStyle,
 }
 
 #[derive(Deserialize, Default, JsonSchema)]

styles/src/style_tree/channel_modal.ts

@@ -24,6 +24,25 @@ export default function channel_modal(): any {
     const picker_input = input()
 
     return {
+        header: {
+            background: background(theme.middle, "accent"),
+            border: border(theme.middle, { "bottom": true, "top": false, left: false, right: false }),
+        },
+        body: {
+            background: background(theme.middle),
+        },
+        modal: {
+            background: background(theme.middle),
+            shadow: theme.modal_shadow,
+            corner_radius: 12,
+            padding: {
+                bottom: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+            },
+
+        },
         // This is used for the icons that are rendered to the right of channel Members in both UIs
         member_icon: {
             background: background(theme.middle),
@@ -72,20 +91,9 @@ export default function channel_modal(): any {
                 right: 4,
             }
         },
-        container: {
+        max_height: 400,
-            background: background(theme.middle),
+        max_width: 540,
-            border: border(theme.middle),
+        title: {
-            shadow: theme.modal_shadow,
-            corner_radius: 12,
-            padding: {
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 0,
-            },
-        },
-        height: 400,
-        header: {
             ...text(theme.middle, "sans", "on", { size: "lg" }),
             padding: {
                 left: 6,