Add some basic styling to FindBar

crates/find/src/find.rs

@@ -6,8 +6,8 @@ use editor::{
     MultiBufferSnapshot,
 };
 use gpui::{
-    action, elements::*, keymap::Binding, Entity, MutableAppContext, RenderContext, Subscription,
+    action, elements::*, keymap::Binding, platform::CursorStyle, Entity, MutableAppContext,
-    Task, View, ViewContext, ViewHandle, WeakViewHandle,
+    RenderContext, Subscription, Task, View, ViewContext, ViewHandle, WeakViewHandle,
 };
 use postage::watch;
 use regex::RegexBuilder;
@@ -85,34 +85,30 @@ impl View for FindBar {
     }
 
     fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
-        let theme = &self.settings.borrow().theme.find;
+        let theme = &self.settings.borrow().theme;
         let editor_container = if self.query_contains_error {
-            theme.invalid_editor
+            theme.find.invalid_editor
         } else {
-            theme.editor.input.container
+            theme.find.editor.input.container
         };
         Flex::row()
             .with_child(
                 ChildView::new(&self.query_editor)
                     .contained()
                     .with_style(editor_container)
+                    .aligned()
                     .constrained()
-                    .with_max_width(theme.editor.max_width)
+                    .with_max_width(theme.find.editor.max_width)
                     .boxed(),
             )
             .with_child(
                 Flex::row()
-                    .with_child(self.render_mode_button("Aa", SearchMode::CaseSensitive, theme, cx))
+                    .with_child(self.render_mode_button("Case", SearchMode::CaseSensitive, cx))
-                    .with_child(self.render_mode_button("|ab|", SearchMode::WholeWord, theme, cx))
+                    .with_child(self.render_mode_button("Word", SearchMode::WholeWord, cx))
-                    .with_child(self.render_mode_button(".*", SearchMode::Regex, theme, cx))
+                    .with_child(self.render_mode_button("Regex", SearchMode::Regex, cx))
                     .contained()
-                    .with_style(theme.mode_button_group)
+                    .with_style(theme.find.mode_button_group)
-                    .boxed(),
+                    .aligned()
-            )
-            .with_child(
-                Flex::row()
-                    .with_child(self.render_nav_button("<", Direction::Prev, theme, cx))
-                    .with_child(self.render_nav_button(">", Direction::Next, theme, cx))
                     .boxed(),
             )
             .with_children(self.active_editor.as_ref().and_then(|editor| {
@@ -122,18 +118,28 @@ impl View for FindBar {
                 let message = if highlighted_ranges.is_empty() {
                     "No matches".to_string()
                 } else {
-                    format!("{} of {}", match_ix, highlighted_ranges.len())
+                    format!("{}/{}", match_ix, highlighted_ranges.len())
                 };
                 Some(
-                    Label::new(message, theme.match_index.text.clone())
+                    Label::new(message, theme.find.match_index.text.clone())
                         .contained()
-                        .with_style(theme.match_index.container)
+                        .with_style(theme.find.match_index.container)
+                        .aligned()
                         .boxed(),
                 )
             }))
+            .with_child(
+                Flex::row()
+                    .with_child(self.render_nav_button("<", Direction::Prev, cx))
+                    .with_child(self.render_nav_button(">", Direction::Next, cx))
+                    .aligned()
+                    .boxed(),
+            )
             .contained()
-            .with_style(theme.container)
+            .with_style(theme.find.container)
-            .boxed()
+            .constrained()
+            .with_height(theme.workspace.toolbar.height)
+            .named("find bar")
     }
 }
 
@@ -217,9 +223,9 @@ impl FindBar {
         &self,
         icon: &str,
         mode: SearchMode,
-        theme: &theme::Find,
         cx: &mut RenderContext<Self>,
     ) -> ElementBox {
+        let theme = &self.settings.borrow().theme.find;
         let is_active = self.is_mode_enabled(mode);
         MouseEventHandler::new::<Self, _, _, _>((cx.view_id(), mode as usize), cx, |state, _| {
             let style = match (is_active, state.hovered) {
@@ -234,6 +240,7 @@ impl FindBar {
                 .boxed()
         })
         .on_click(move |cx| cx.dispatch_action(ToggleMode(mode)))
+        .with_cursor_style(CursorStyle::PointingHand)
         .boxed()
     }
 
@@ -241,9 +248,9 @@ impl FindBar {
         &self,
         icon: &str,
         direction: Direction,
-        theme: &theme::Find,
         cx: &mut RenderContext<Self>,
     ) -> ElementBox {
+        let theme = &self.settings.borrow().theme.find;
         MouseEventHandler::new::<Self, _, _, _>(
             (cx.view_id(), 10 + direction as usize),
             cx,
@@ -260,6 +267,7 @@ impl FindBar {
             },
         )
         .on_click(move |cx| cx.dispatch_action(GoToMatch(direction)))
+        .with_cursor_style(CursorStyle::PointingHand)
         .boxed()
     }
 

crates/theme/src/theme.rs

@@ -38,6 +38,7 @@ pub struct Workspace {
     pub left_sidebar: Sidebar,
     pub right_sidebar: Sidebar,
     pub status_bar: StatusBar,
+    pub toolbar: Toolbar,
 }
 
 #[derive(Clone, Deserialize, Default)]
@@ -88,6 +89,11 @@ pub struct Tab {
     pub icon_conflict: Color,
 }
 
+#[derive(Clone, Deserialize, Default)]
+pub struct Toolbar {
+    pub height: f32,
+}
+
 #[derive(Clone, Deserialize, Default)]
 pub struct Find {
     #[serde(flatten)]

crates/zed/assets/themes/_base.toml

@@ -81,6 +81,9 @@ item_spacing = 24
 cursor_position = "$text.2"
 diagnostic_message = "$text.2"
 
+[workspace.toolbar]
+height = 44
+
 [panel]
 padding = { top = 12, left = 12, bottom = 12, right = 12 }
 
@@ -325,10 +328,14 @@ background = "$surface.1"
 
 [find.mode_button]
 extends = "$text.1"
-
+padding = { left = 6, right = 6, top = 1, bottom = 1 }
-[find.mode_button_group]
 corner_radius = 6
 border = { width = 1, color = "$border.0" }
+margin.left = 1
+margin.right = 1
+
+[find.mode_button_group]
+padding = { left = 2, right = 2 }
 
 [find.active_mode_button]
 extends = "$find.mode_button"
@@ -344,12 +351,14 @@ background = "$surface.2"
 
 [find.match_index]
 extends = "$text.1"
+padding = 6
+margin.left = 24
 
 [find.editor]
 max_width = 400
 background = "$surface.0"
 corner_radius = 6
-padding = { left = 16, right = 16, top = 7, bottom = 7 }
+padding = { left = 13, right = 13, top = 3, bottom = 3 }
 margin = { top = 5, bottom = 5, left = 5, right = 5 }
 text = "$text.0"
 placeholder_text = "$text.2"