From 2a7df106e124f614b5de68052d6b5014c47df8af Mon Sep 17 00:00:00 2001
From: KCaverly <kyle@zed.dev>
Date: Wed, 16 Aug 2023 14:01:06 +0100
Subject: [PATCH] adjusted icon sizes downwards

Co-authored-by: Piotr <piotr@zed.dev>
---
 crates/search/src/buffer_search.rs  |  2 +-
 crates/search/src/project_search.rs |  3 ++-
 crates/search/src/search_bar.rs     |  6 +++++-
 crates/theme/src/theme.rs           |  2 +-
 styles/src/style_tree/search.ts     | 14 +++++++++-----
 5 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/crates/search/src/buffer_search.rs b/crates/search/src/buffer_search.rs
index 0637191f97..3e13f49181 100644
--- a/crates/search/src/buffer_search.rs
+++ b/crates/search/src/buffer_search.rs
@@ -250,7 +250,7 @@ impl View for BufferSearchBar {
                         SearchOptions::WHOLE_WORD,
                         cx,
                     ))
-                    .flex(1., true)
+                    .flex_float()
                     .contained(),
             )
             .align_children_center()
diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs
index 884f56bda5..323c33bc56 100644
--- a/crates/search/src/project_search.rs
+++ b/crates/search/src/project_search.rs
@@ -1447,7 +1447,8 @@ impl View for ProjectSearchBar {
                         .with_child(filter_button)
                         .with_children(case_sensitive)
                         .with_children(whole_word)
-                        .flex(1., true)
+                        .flex(1., false)
+                        .constrained()
                         .contained(),
                 )
                 .align_children_center()
diff --git a/crates/search/src/search_bar.rs b/crates/search/src/search_bar.rs
index 88d4675102..f227ced0d4 100644
--- a/crates/search/src/search_bar.rs
+++ b/crates/search/src/search_bar.rs
@@ -185,11 +185,15 @@ pub(crate) fn render_option_button_icon<V: View>(
             .in_state(is_active)
             .style_for(state);
         Svg::new(icon)
-            .with_color(style.text.color.clone())
+            .with_color(style.color.clone())
+            .constrained()
+            .with_width(style.icon_width)
             .contained()
             .with_style(style.container)
+            // .aligned()
             .constrained()
             .with_height(theme.search.option_button_height)
+            .with_width(style.button_width)
     })
     .on_click(MouseButton::Left, on_click)
     .with_cursor_style(CursorStyle::PointingHand)
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 5ee11a4d94..df6dbe9f55 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -379,7 +379,7 @@ pub struct Search {
     pub include_exclude_editor: FindEditor,
     pub invalid_include_exclude_editor: ContainerStyle,
     pub include_exclude_inputs: ContainedText,
-    pub option_button: Toggleable<Interactive<ContainedText>>,
+    pub option_button: Toggleable<Interactive<IconButton>>,
     pub action_button: Toggleable<Interactive<ContainedText>>,
     pub match_background: Color,
     pub match_index: ContainedText,
diff --git a/styles/src/style_tree/search.ts b/styles/src/style_tree/search.ts
index 4dfa9624b4..b5259886b9 100644
--- a/styles/src/style_tree/search.ts
+++ b/styles/src/style_tree/search.ts
@@ -2,6 +2,7 @@ import { with_opacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"
 import { useTheme } from "../theme"
+import { toggleable_icon_button } from "../component/icon_button"
 
 export default function search(): any {
     const theme = useTheme()
@@ -43,7 +44,9 @@ export default function search(): any {
         option_button: toggleable({
             base: interactive({
                 base: {
-                    ...text(theme.highest, "mono", "variant"),
+                    icon_width: 14,
+                    button_width: 32,
+                    color: foreground(theme.highest, "variant"),
                     background: background(theme.highest, "on"),
                     corner_radius: 2,
                     margin: { right: 2 },
@@ -53,6 +56,8 @@ export default function search(): any {
                     padding: {
                         left: 4,
                         right: 4,
+                        top: 4,
+                        bottom: 4,
                     },
                 },
                 state: {
@@ -75,6 +80,9 @@ export default function search(): any {
             state: {
                 active: {
                     default: {
+                        icon_width: 14,
+                        button_width: 32,
+                        color: foreground(theme.highest, "variant"),
                         background: background(theme.highest, "accent"),
                         border: border(theme.highest, "accent"),
                     },
@@ -272,10 +280,8 @@ export default function search(): any {
                         },
 
                         padding: {
-                            bottom: 0,
                             left: 10,
                             right: 10,
-                            top: 0,
                         },
                     },
                     state: {
@@ -294,10 +300,8 @@ export default function search(): any {
                         },
 
                         padding: {
-                            bottom: 0,
                             left: 10,
                             right: 10,
-                            top: 0,
                         },
                     },
                     state: {