From b699e5c142f900ae0e38574ec2ad1e11e1a693cf Mon Sep 17 00:00:00 2001
From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com>
Date: Fri, 30 Jun 2023 16:23:27 +0200
Subject: [PATCH] Add styles to git menu

---
 crates/collab_ui/src/branch_list.rs     | 40 +++++++++++--------------
 crates/theme/src/theme.rs               |  2 ++
 styles/src/style_tree/contact_finder.ts |  2 ++
 styles/src/style_tree/picker.ts         | 29 ++++++++++++++++++
 4 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/crates/collab_ui/src/branch_list.rs b/crates/collab_ui/src/branch_list.rs
index 038180b6716fa2cac876e914198170b3febd4f86..95e418e67ffc746d85dd155e2ea6e8b429e27a7b 100644
--- a/crates/collab_ui/src/branch_list.rs
+++ b/crates/collab_ui/src/branch_list.rs
@@ -2,7 +2,7 @@ use anyhow::{anyhow, bail};
 use fuzzy::{StringMatch, StringMatchCandidate};
 use gpui::{elements::*, AppContext, MouseState, Task, ViewContext, ViewHandle};
 use picker::{Picker, PickerDelegate, PickerEvent};
-use std::sync::Arc;
+use std::{ops::Not, sync::Arc};
 use util::ResultExt;
 use workspace::{Toast, Workspace};
 
@@ -212,7 +212,7 @@ impl PickerDelegate for BranchListDelegate {
     }
     fn render_header(&self, cx: &AppContext) -> Option<AnyElement<Picker<Self>>> {
         let theme = &theme::current(cx);
-        let style = theme.picker.no_matches.label.clone();
+        let style = theme.picker.header.clone();
         if self.last_query.is_empty() {
             Some(
                 Flex::row()
@@ -221,28 +221,24 @@ impl PickerDelegate for BranchListDelegate {
             )
         } else {
             Some(
-                Flex::row()
-                    .with_child(Label::new("Branches", style))
-                    .into_any(),
-            )
-        }
-    }
-    fn render_footer(&self, cx: &AppContext) -> Option<AnyElement<Picker<Self>>> {
-        if !self.last_query.is_empty() && !self.matches.is_empty() {
-            let theme = &theme::current(cx);
-            let style = theme.picker.no_matches.label.clone();
-            // Render "1 match" and "0 matches", "42 matches"etc.
-            let suffix = if self.matches.len() == 1 { "" } else { "es" };
-            Some(
-                Flex::row()
-                    .with_child(Label::new(
-                        format!("{} match{}", self.matches.len(), suffix),
-                        style,
-                    ))
+                Stack::new()
+                    .with_child(
+                        Flex::row()
+                            .with_child(Label::new("Branches", style.clone()).aligned().left()),
+                    )
+                    .with_children(self.matches.is_empty().not().then(|| {
+                        let suffix = if self.matches.len() == 1 { "" } else { "es" };
+                        Flex::row()
+                            .align_children_center()
+                            .with_child(Label::new(
+                                format!("{} match{}", self.matches.len(), suffix),
+                                style,
+                            ))
+                            .aligned()
+                            .right()
+                    }))
                     .into_any(),
             )
-        } else {
-            None
         }
     }
 }
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index e54dcdfd1e987eaf24656bc735079db54d37f0bc..687547a3066bdf8e436a42f376bfd6ddb96f127e 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -585,6 +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,
 }
 
 #[derive(Clone, Debug, Deserialize, Default, JsonSchema)]
diff --git a/styles/src/style_tree/contact_finder.ts b/styles/src/style_tree/contact_finder.ts
index e61d100264bb9713f312c27c446ff36f054e77f5..4815a4e98e5e4c0c789054b985a55fe8b0afbdd6 100644
--- a/styles/src/style_tree/contact_finder.ts
+++ b/styles/src/style_tree/contact_finder.ts
@@ -44,6 +44,8 @@ export default function contact_finder(theme: ColorScheme): any {
             no_matches: picker_style.no_matches,
             input_editor: picker_input,
             empty_input_editor: picker_input,
+            header: picker_style.header,
+            footer: picker_style.footer,
         },
         row_height: 28,
         contact_avatar: {
diff --git a/styles/src/style_tree/picker.ts b/styles/src/style_tree/picker.ts
index 7ca76cd85f324d9cc640dd3845a1ca1d3e89a751..9918d1a2d66381562fc0864d1fa1425b960ea2c2 100644
--- a/styles/src/style_tree/picker.ts
+++ b/styles/src/style_tree/picker.ts
@@ -108,5 +108,34 @@ export default function picker(theme: ColorScheme): any {
                 top: 8,
             },
         },
+        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,
+            },
+        },
+        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,
+            },
+
+        }
     }
 }