adjusted icon sizes downwards

KCaverly and Piotr created 2 years ago

Co-authored-by: Piotr <[e-mail]>

Change summary

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(-)

Detailed changes

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()

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()

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)

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,

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: {