Style inputs in project search (#3655)

Marshall Bowers created

This PR styles the inputs in the project search.

<img width="772" alt="Screenshot 2023-12-14 at 1 53 28 PM"
src="https://github.com/zed-industries/zed/assets/1486634/fe2362be-79db-4551-a473-2acf7a8a1bcb">

Release Notes:

- N/A

Change summary

crates/search2/src/project_search.rs | 200 +++++++++++++++++------------
1 file changed, 118 insertions(+), 82 deletions(-)

Detailed changes

crates/search2/src/project_search.rs 🔗

@@ -10,11 +10,13 @@ use editor::{
     items::active_match_index, scroll::autoscroll::Autoscroll, Anchor, Editor, EditorEvent,
     MultiBuffer, SelectAll, MAX_TAB_TITLE_LEN,
 };
+use editor::{EditorElement, EditorStyle};
 use gpui::{
-    actions, div, white, AnyElement, AnyView, AppContext, Context as _, Div, Element, EntityId,
-    EventEmitter, FocusableView, InteractiveElement, IntoElement, KeyContext, Model, ModelContext,
-    ParentElement, PromptLevel, Render, SharedString, Styled, Subscription, Task, View,
-    ViewContext, VisualContext, WeakModel, WeakView, WindowContext,
+    actions, div, AnyElement, AnyView, AppContext, Context as _, Div, Element, EntityId,
+    EventEmitter, FocusableView, FontStyle, FontWeight, InteractiveElement, IntoElement,
+    KeyContext, Model, ModelContext, ParentElement, PromptLevel, Render, SharedString, Styled,
+    Subscription, Task, TextStyle, View, ViewContext, VisualContext, WeakModel, WeakView,
+    WhiteSpace, WindowContext,
 };
 use menu::Confirm;
 use project::{
@@ -23,6 +25,7 @@ use project::{
 };
 use semantic_index::{SemanticIndex, SemanticIndexStatus};
 
+use settings::Settings;
 use smol::stream::StreamExt;
 use std::{
     any::{Any, TypeId},
@@ -32,6 +35,7 @@ use std::{
     path::PathBuf,
     time::{Duration, Instant},
 };
+use theme::ThemeSettings;
 
 use ui::{
     h_stack, prelude::*, v_stack, Button, Icon, IconButton, IconElement, Label, LabelCommon,
@@ -1425,6 +1429,36 @@ impl ProjectSearchBar {
         };
         new_placeholder_text
     }
+
+    fn render_text_input(&self, editor: &View<Editor>, cx: &ViewContext<Self>) -> impl IntoElement {
+        let settings = ThemeSettings::get_global(cx);
+        let text_style = TextStyle {
+            color: if editor.read(cx).read_only() {
+                cx.theme().colors().text_disabled
+            } else {
+                cx.theme().colors().text
+            },
+            font_family: settings.ui_font.family.clone(),
+            font_features: settings.ui_font.features,
+            font_size: rems(0.875).into(),
+            font_weight: FontWeight::NORMAL,
+            font_style: FontStyle::Normal,
+            line_height: relative(1.3).into(),
+            background_color: None,
+            underline: None,
+            white_space: WhiteSpace::Normal,
+        };
+
+        EditorElement::new(
+            &editor,
+            EditorStyle {
+                background: cx.theme().colors().editor_background,
+                local_player: cx.theme().players().local(),
+                text: text_style,
+                ..Default::default()
+            },
+        )
+    }
 }
 
 impl Render for ProjectSearchBar {
@@ -1445,85 +1479,78 @@ impl Render for ProjectSearchBar {
         }
         let search = search.read(cx);
         let semantic_is_available = SemanticIndex::enabled(cx);
-        let query_column = v_stack()
-            //.flex_1()
-            .child(
-                h_stack()
-                    .min_w_80()
-                    .on_action(cx.listener(|this, action, cx| this.confirm(action, cx)))
-                    .on_action(
-                        cx.listener(|this, action, cx| this.previous_history_query(action, cx)),
-                    )
-                    .on_action(cx.listener(|this, action, cx| this.next_history_query(action, cx)))
-                    .child(IconElement::new(Icon::MagnifyingGlass))
-                    .child(search.query_editor.clone())
-                    .child(
-                        h_stack()
-                            .child(
-                                IconButton::new("project-search-filter-button", Icon::Filter)
-                                    .tooltip(|cx| {
-                                        Tooltip::for_action("Toggle filters", &ToggleFilters, cx)
-                                    })
-                                    .on_click(cx.listener(|this, _, cx| {
-                                        this.toggle_filters(cx);
-                                    }))
-                                    .selected(
-                                        self.active_project_search
-                                            .as_ref()
-                                            .map(|search| search.read(cx).filters_enabled)
-                                            .unwrap_or_default(),
-                                    ),
-                            )
-                            .when(search.current_mode != SearchMode::Semantic, |this| {
-                                this.child(
-                                    IconButton::new(
-                                        "project-search-case-sensitive",
-                                        Icon::CaseSensitive,
+        let query_column = v_stack().child(
+            h_stack()
+                .min_w(rems(512. / 16.))
+                .px_2()
+                .py_1()
+                .gap_2()
+                .bg(cx.theme().colors().editor_background)
+                .border_1()
+                .border_color(cx.theme().colors().border)
+                .rounded_lg()
+                .on_action(cx.listener(|this, action, cx| this.confirm(action, cx)))
+                .on_action(cx.listener(|this, action, cx| this.previous_history_query(action, cx)))
+                .on_action(cx.listener(|this, action, cx| this.next_history_query(action, cx)))
+                .child(IconElement::new(Icon::MagnifyingGlass))
+                .child(self.render_text_input(&search.query_editor, cx))
+                .child(
+                    h_stack()
+                        .child(
+                            IconButton::new("project-search-filter-button", Icon::Filter)
+                                .tooltip(|cx| {
+                                    Tooltip::for_action("Toggle filters", &ToggleFilters, cx)
+                                })
+                                .on_click(cx.listener(|this, _, cx| {
+                                    this.toggle_filters(cx);
+                                }))
+                                .selected(
+                                    self.active_project_search
+                                        .as_ref()
+                                        .map(|search| search.read(cx).filters_enabled)
+                                        .unwrap_or_default(),
+                                ),
+                        )
+                        .when(search.current_mode != SearchMode::Semantic, |this| {
+                            this.child(
+                                IconButton::new(
+                                    "project-search-case-sensitive",
+                                    Icon::CaseSensitive,
+                                )
+                                .tooltip(|cx| {
+                                    Tooltip::for_action(
+                                        "Toggle case sensitive",
+                                        &ToggleCaseSensitive,
+                                        cx,
                                     )
+                                })
+                                .selected(self.is_option_enabled(SearchOptions::CASE_SENSITIVE, cx))
+                                .on_click(cx.listener(
+                                    |this, _, cx| {
+                                        this.toggle_search_option(
+                                            SearchOptions::CASE_SENSITIVE,
+                                            cx,
+                                        );
+                                    },
+                                )),
+                            )
+                            .child(
+                                IconButton::new("project-search-whole-word", Icon::WholeWord)
                                     .tooltip(|cx| {
                                         Tooltip::for_action(
-                                            "Toggle case sensitive",
-                                            &ToggleCaseSensitive,
+                                            "Toggle whole word",
+                                            &ToggleWholeWord,
                                             cx,
                                         )
                                     })
-                                    .selected(
-                                        self.is_option_enabled(SearchOptions::CASE_SENSITIVE, cx),
-                                    )
-                                    .on_click(cx.listener(
-                                        |this, _, cx| {
-                                            this.toggle_search_option(
-                                                SearchOptions::CASE_SENSITIVE,
-                                                cx,
-                                            );
-                                        },
-                                    )),
-                                )
-                                .child(
-                                    IconButton::new("project-search-whole-word", Icon::WholeWord)
-                                        .tooltip(|cx| {
-                                            Tooltip::for_action(
-                                                "Toggle whole word",
-                                                &ToggleWholeWord,
-                                                cx,
-                                            )
-                                        })
-                                        .selected(
-                                            self.is_option_enabled(SearchOptions::WHOLE_WORD, cx),
-                                        )
-                                        .on_click(cx.listener(|this, _, cx| {
-                                            this.toggle_search_option(
-                                                SearchOptions::WHOLE_WORD,
-                                                cx,
-                                            );
-                                        })),
-                                )
-                            }),
-                    )
-                    .border_2()
-                    .bg(white())
-                    .rounded_lg(),
-            );
+                                    .selected(self.is_option_enabled(SearchOptions::WHOLE_WORD, cx))
+                                    .on_click(cx.listener(|this, _, cx| {
+                                        this.toggle_search_option(SearchOptions::WHOLE_WORD, cx);
+                                    })),
+                            )
+                        }),
+                ),
+        );
         let mode_column = v_stack().items_start().justify_start().child(
             h_stack()
                 .child(
@@ -1649,6 +1676,7 @@ impl Render for ProjectSearchBar {
             .key_context(key_context)
             .p_1()
             .m_2()
+            .gap_2()
             .justify_between()
             .on_action(cx.listener(|this, _: &ToggleFilters, cx| {
                 this.toggle_filters(cx);
@@ -1711,15 +1739,19 @@ impl Render for ProjectSearchBar {
             .when(search.filters_enabled, |this| {
                 this.child(
                     h_stack()
-                        .mt_2()
                         .flex_1()
+                        .gap_2()
                         .justify_between()
                         .child(
                             h_stack()
                                 .flex_1()
+                                .h_full()
+                                .px_2()
+                                .py_1()
                                 .border_1()
-                                .mr_2()
-                                .child(search.included_files_editor.clone())
+                                .border_color(cx.theme().colors().border)
+                                .rounded_lg()
+                                .child(self.render_text_input(&search.included_files_editor, cx))
                                 .when(search.current_mode != SearchMode::Semantic, |this| {
                                     this.child(
                                         SearchOptions::INCLUDE_IGNORED.as_button(
@@ -1739,9 +1771,13 @@ impl Render for ProjectSearchBar {
                         .child(
                             h_stack()
                                 .flex_1()
+                                .h_full()
+                                .px_2()
+                                .py_1()
                                 .border_1()
-                                .ml_2()
-                                .child(search.excluded_files_editor.clone()),
+                                .border_color(cx.theme().colors().border)
+                                .rounded_lg()
+                                .child(self.render_text_input(&search.excluded_files_editor, cx)),
                         ),
                 )
             })