diff --git a/crates/search/src/mode.rs b/crates/search/src/mode.rs index bb620f0670..ecaa00f6ac 100644 --- a/crates/search/src/mode.rs +++ b/crates/search/src/mode.rs @@ -49,14 +49,14 @@ impl SearchMode { } } - pub(crate) fn border_left(&self) -> bool { + pub(crate) fn border_right(&self) -> bool { match self { SearchMode::Text => false, _ => true, } } - pub(crate) fn border_right(&self) -> bool { + pub(crate) fn border_left(&self) -> bool { match self { SearchMode::Regex => false, _ => true, diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs index 5589688368..a462327ec0 100644 --- a/crates/search/src/project_search.rs +++ b/crates/search/src/project_search.rs @@ -1590,10 +1590,10 @@ impl View for ProjectSearchBar { .with_children(matches) .aligned() .top() - .left(), + .left() + .constrained() + .with_height(theme.search.search_bar_row_height), ) - .constrained() - .with_height(theme.search.search_bar_row_height) .flex(1., true), ) .with_child( @@ -1627,23 +1627,36 @@ impl View for ProjectSearchBar { .with_child( Flex::row() .align_children_center() - .with_child(search_button_for_mode(SearchMode::Text, cx)) - .with_children(semantic_index) - .with_child(search_button_for_mode(SearchMode::Regex, cx)) - .with_child(super::search_bar::render_close_button( - "Dismiss Project Search", - &theme.search, - cx, - |_, this, cx| { - if let Some(search) = this.active_project_search.as_mut() { - search.update(cx, |_, cx| cx.emit(ViewEvent::Dismiss)) - } - }, - None, - )) + .with_child( + Flex::row() + .with_child(search_button_for_mode(SearchMode::Text, cx)) + .with_children(semantic_index) + .with_child(search_button_for_mode(SearchMode::Regex, cx)) + .aligned() + .left() + .contained() + .with_margin_right(3.), + ) + .with_child( + super::search_bar::render_close_button( + "Dismiss Project Search", + &theme.search, + cx, + |_, this, cx| { + if let Some(search) = + this.active_project_search.as_mut() + { + search + .update(cx, |_, cx| cx.emit(ViewEvent::Dismiss)) + } + }, + None, + ) + .aligned() + .right(), + ) .constrained() .with_height(theme.search.search_bar_row_height) - .contained() .aligned() .right() .top() diff --git a/crates/search/src/search_bar.rs b/crates/search/src/search_bar.rs index 8bc444ed67..f0ab9a99fb 100644 --- a/crates/search/src/search_bar.rs +++ b/crates/search/src/search_bar.rs @@ -28,10 +28,10 @@ pub(super) fn render_close_button( .constrained() .with_width(style.icon_width) .aligned() - .constrained() - .with_width(style.button_width) .contained() .with_style(style.container) + .constrained() + .with_height(theme.search_bar_row_height) }) .on_click(MouseButton::Left, on_click) .with_cursor_style(CursorStyle::PointingHand) @@ -66,30 +66,19 @@ pub(super) fn render_nav_button( let style = theme.search.nav_button.style_for(state).clone(); let mut container_style = style.container.clone(); let label = Label::new(icon, style.label.clone()).contained(); - match direction { - Direction::Prev => { - container_style.corner_radii = CornerRadii { - bottom_right: 0., - top_right: 0., - ..container_style.corner_radii - }; - Flex::row() - .with_child(label.with_style(container_style)) - .constrained() - //.with_height(theme.workspace.toolbar.height) - } - Direction::Next => { - container_style.corner_radii = CornerRadii { - bottom_left: 0., - top_left: 0., - ..container_style.corner_radii - }; - Flex::row() - .with_child(label.with_style(container_style)) - .constrained() - // .with_height(theme.workspace.toolbar.height) - } - } + container_style.corner_radii = match direction { + Direction::Prev => CornerRadii { + bottom_right: 0., + top_right: 0., + ..container_style.corner_radii + }, + Direction::Next => CornerRadii { + bottom_left: 0., + top_left: 0., + ..container_style.corner_radii + }, + }; + label.with_style(container_style) }) .on_click(MouseButton::Left, on_click) .with_cursor_style(CursorStyle::PointingHand) @@ -132,24 +121,18 @@ pub(crate) fn render_search_mode_button( top_right: 0., ..container_style.corner_radii }; - Flex::row() - .align_children_center() - .with_child(label.with_style(container_style)) - .into_any() + label.with_style(container_style) } else { container_style.corner_radii = CornerRadii { bottom_left: 0., top_left: 0., ..container_style.corner_radii }; - Flex::row() - .align_children_center() - .with_child(label.with_style(container_style)) - .into_any() + label.with_style(container_style) } } else { container_style.corner_radii = CornerRadii::default(); - label.with_style(container_style).into_any() + label.with_style(container_style) } }) .on_click(MouseButton::Left, on_click) diff --git a/styles/src/style_tree/search.ts b/styles/src/style_tree/search.ts index e853beacdd..a4428fe4a8 100644 --- a/styles/src/style_tree/search.ts +++ b/styles/src/style_tree/search.ts @@ -161,19 +161,28 @@ export default function search(): any { dismiss_button: interactive({ base: { color: foreground(theme.highest, "variant"), - icon_width: 12, - button_width: 14, + icon_width: 14, + button_width: 32, + corner_radius: 6, padding: { - left: 10, - right: 10, + top: 8, + bottom: 8, + left: 8, + right: 8, }, + + background: background(theme.highest, "variant"), + + border: border(theme.highest, "on"), }, state: { hovered: { color: foreground(theme.highest, "hovered"), + background: background(theme.highest, "variant", "hovered") }, clicked: { color: foreground(theme.highest, "pressed"), + background: background(theme.highest, "variant", "pressed") }, }, }), @@ -245,7 +254,7 @@ export default function search(): any { base: { text: text(theme.highest, "mono", "on"), background: background(theme.highest, "on"), - corner_radius: { top_left: 6, top_right: 6, bottom_right: 6, bottom_left: 6 }, + corner_radius: 6, border: { ...border(theme.highest, "on"), left: false, @@ -253,10 +262,10 @@ export default function search(): any { }, padding: { - bottom: 6, - left: 6, - right: 6, - top: 6, + bottom: 3, + left: 10, + right: 10, + top: 3, }, }, state: {