Deduplicate tab theme related code

Petros Amoiridis and Julia created 2 years ago

We've noticed that the search theme struct had two fields for a tab icon width and spacing. But we already have those in the tab theme struct. We decided to remove the duplicate and reuse the tab fields.

We also wanted to move where the spacing is being used. Instead of doing it at the left of the label, we do it at the right of the icon to match how it is done in other areas of the UI.

Co-Authored-By: Julia <[e-mail]>

Change summary

crates/search/src/project_search.rs | 8 +++-----
crates/theme/src/theme.rs           | 2 --
styles/src/styleTree/search.ts      | 2 --
3 files changed, 3 insertions(+), 9 deletions(-)

Detailed changes

crates/search/src/project_search.rs

@@ -248,15 +248,15 @@ impl Item for ProjectSearchView {
         tab_theme: &theme::Tab,
         cx: &gpui::AppContext,
     ) -> ElementBox {
-        let settings = cx.global::<Settings>();
-        let search_theme = &settings.theme.search;
         Flex::row()
             .with_child(
                 Svg::new("icons/magnifying_glass_12.svg")
                     .with_color(tab_theme.label.text.color)
                     .constrained()
-                    .with_width(search_theme.tab_icon_width)
+                    .with_width(tab_theme.icon_width)
                     .aligned()
+                    .contained()
+                    .with_margin_right(tab_theme.spacing)
                     .boxed(),
             )
             .with_children(self.model.read(cx).active_query.as_ref().map(|query| {
@@ -264,8 +264,6 @@ impl Item for ProjectSearchView {
 
                 Label::new(query_text, tab_theme.label.clone())
                     .aligned()
-                    .contained()
-                    .with_margin_left(search_theme.tab_icon_spacing)
                     .boxed()
             }))
             .boxed()

crates/theme/src/theme.rs

@@ -246,8 +246,6 @@ pub struct Search {
     pub match_background: Color,
     pub match_index: ContainedText,
     pub results_status: TextStyle,
-    pub tab_icon_width: f32,
-    pub tab_icon_spacing: f32,
     pub dismiss_button: Interactive<IconButton>,
 }
 

styles/src/styleTree/search.ts

@@ -29,8 +29,6 @@ export default function search(colorScheme: ColorScheme) {
   return {
     // TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive
     matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
-    tabIconSpacing: 8,
-    tabIconWidth: 14,
     optionButton: {
       ...text(layer, "mono", "on"),
       background: background(layer, "on"),