Improve styling of git menu

Piotr Osiewicz created 2 years ago

Change summary

crates/collab_ui/src/branch_list.rs | 23 +++++++++++++++++++----
crates/theme/src/theme.rs           |  4 ++--
styles/src/style_tree/picker.ts     | 21 +++++----------------
3 files changed, 26 insertions(+), 22 deletions(-)

Detailed changes

crates/collab_ui/src/branch_list.rs

@@ -215,8 +215,16 @@ impl PickerDelegate for BranchListDelegate {
         let style = theme.picker.header.clone();
         if self.last_query.is_empty() {
             Some(
-                Flex::row()
-                    .with_child(Label::new("Recent branches", style))
+                Stack::new()
+                    .with_child(
+                        Flex::row()
+                            .with_child(Label::new("Recent branches", style.label.clone()))
+                            .contained()
+                            .with_style(style.container)
+                            .into_any(),
+                    )
+                    .contained()
+                    .with_style(style.container)
                     .into_any(),
             )
         } else {
@@ -224,7 +232,11 @@ impl PickerDelegate for BranchListDelegate {
                 Stack::new()
                     .with_child(
                         Flex::row()
-                            .with_child(Label::new("Branches", style.clone()).aligned().left()),
+                            .with_child(
+                                Label::new("Branches", style.label.clone()).aligned().left(),
+                            )
+                            .contained()
+                            .with_style(style.container),
                     )
                     .with_children(self.matches.is_empty().not().then(|| {
                         let suffix = if self.matches.len() == 1 { "" } else { "es" };
@@ -232,11 +244,14 @@ impl PickerDelegate for BranchListDelegate {
                             .align_children_center()
                             .with_child(Label::new(
                                 format!("{} match{}", self.matches.len(), suffix),
-                                style,
+                                style.label,
                             ))
                             .aligned()
                             .right()
                     }))
+                    .contained()
+                    .with_style(style.container)
+                    .constrained()
                     .into_any(),
             )
         }

crates/theme/src/theme.rs

@@ -585,8 +585,8 @@ pub struct Picker {
     pub empty_input_editor: FieldEditor,
     pub no_matches: ContainedLabel,
     pub item: Toggleable<Interactive<ContainedLabel>>,
-    pub header: LabelStyle,
-    pub footer: LabelStyle,
+    pub header: ContainedLabel,
+    pub footer: ContainedLabel,
 }
 
 #[derive(Clone, Debug, Deserialize, Default, JsonSchema)]

styles/src/style_tree/picker.ts

@@ -110,30 +110,19 @@ export default function picker(theme: ColorScheme): any {
         },
         header: {
             text: text(theme.lowest, "sans", "variant", { size: "xs" }),
-            padding: {
-                bottom: 4,
-                left: 12,
-                right: 12,
-                top: 4,
-            },
+
             margin: {
                 top: 1,
-                left: 4,
-                right: 4,
+                left: 8,
+                right: 8,
             },
         },
         footer: {
             text: text(theme.lowest, "sans", "variant", { size: "xs" }),
-            padding: {
-                bottom: 4,
-                left: 12,
-                right: 12,
-                top: 4,
-            },
             margin: {
                 top: 1,
-                left: 4,
-                right: 4,
+                left: 8,
+                right: 8,
             },
 
         }