From 92a0a4e3678b5d3bb2840bc3ba854cdaa16a141b Mon Sep 17 00:00:00 2001
From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com>
Date: Mon, 10 Jul 2023 16:51:18 +0200
Subject: [PATCH] Add styles for branch create button

---
 crates/collab_ui/src/branch_list.rs |  7 +++--
 crates/theme/src/theme.rs           |  2 +-
 styles/src/style_tree/picker.ts     | 42 +++++++++++++++++++++++------
 3 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/crates/collab_ui/src/branch_list.rs b/crates/collab_ui/src/branch_list.rs
index 8772f88958..9b06e54d4e 100644
--- a/crates/collab_ui/src/branch_list.rs
+++ b/crates/collab_ui/src/branch_list.rs
@@ -253,12 +253,11 @@ impl PickerDelegate for BranchListDelegate {
             let style = theme.picker.footer.clone();
             enum BranchCreateButton {}
             Some(
-                Flex::row().with_child(MouseEventHandler::<BranchCreateButton, _>::new(0, cx, |_, _| {
+                Flex::row().with_child(MouseEventHandler::<BranchCreateButton, _>::new(0, cx, |state, _| {
+                    let style = style.style_for(state);
                     Label::new("Create branch", style.label.clone())
                         .contained()
                         .with_style(style.container)
-                        .aligned()
-                        .right()
                 })
                 .on_down(MouseButton::Left, |_, _, cx| {
                     cx.spawn(|picker, mut cx| async move {
@@ -294,7 +293,7 @@ impl PickerDelegate for BranchListDelegate {
                             Ok::<(), anyhow::Error>(())
                 })
                     }).detach();
-                }))
+                })).aligned().right()
                 .into_any(),
             )
         } else {
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 1949a5d9bb..a47d97e002 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -586,7 +586,7 @@ pub struct Picker {
     pub no_matches: ContainedLabel,
     pub item: Toggleable<Interactive<ContainedLabel>>,
     pub header: ContainedLabel,
-    pub footer: ContainedLabel,
+    pub footer: Interactive<ContainedLabel>,
 }
 
 #[derive(Clone, Debug, Deserialize, Default, JsonSchema)]
diff --git a/styles/src/style_tree/picker.ts b/styles/src/style_tree/picker.ts
index bbd664397f..b8817a25e9 100644
--- a/styles/src/style_tree/picker.ts
+++ b/styles/src/style_tree/picker.ts
@@ -119,14 +119,40 @@ export default function picker(): any {
                 right: 8,
             },
         },
-        footer: {
-            text: text(theme.lowest, "sans", "variant", { size: "xs" }),
-            margin: {
-                top: 1,
-                left: 8,
-                right: 8,
+        footer: interactive({
+            base: {
+                text: text(theme.lowest, "sans", "variant", { size: "xs" }),
+                padding: {
+                    bottom: 4,
+                    left: 12,
+                    right: 12,
+                    top: 4,
+                },
+                margin: {
+                    top: 1,
+                    left: 4,
+                    right: 4,
+                },
+                corner_radius: 8,
+                background: with_opacity(
+                    background(theme.lowest, "active"),
+                    0.5
+                ),
             },
-
-        }
+            state: {
+                hovered: {
+                    background: with_opacity(
+                        background(theme.lowest, "hovered"),
+                        0.5
+                    ),
+                },
+                clicked: {
+                    background: with_opacity(
+                        background(theme.lowest, "pressed"),
+                        0.5
+                    ),
+                },
+            }
+        }),
     }
 }