Fix ListItem check icon.

crates/ui/src/checkbox.rs

@@ -10,6 +10,7 @@ use crate::{
     selectable::{Selectable, Selection},
     stock::{h_flex, v_flex},
     theme::{ActiveTheme, Colorize as _},
+    IconName,
 };
 
 type OnClick = Box<dyn Fn(&Selection, &mut WindowContext) + 'static>;
@@ -114,8 +115,8 @@ impl RenderOnce for Checkbox {
                             .size_3()
                             .text_color(icon_color)
                             .map(|this| match self.checked {
-                                Selection::Selected => this.path("icons/check.svg"),
+                                Selection::Selected => this.path(IconName::Check.path()),
-                                Selection::Indeterminate => this.path("icons/minus.svg"),
+                                Selection::Indeterminate => this.path(IconName::Minus.path()),
                                 _ => this,
                             }),
                     ),

crates/ui/src/dropdown.rs

@@ -184,10 +184,11 @@ where
                     }))
                     .child(
                         h_flex()
+                            .w_full()
                             .items_center()
                             .justify_between()
-                            .child(title)
+                            .child(div().flex_1().child(title))
-                            .child(IconName::ChevronDown),
+                            .child(div().w_4().h_4().child(IconName::ChevronDown)),
                     ),
             )
             .when(self.open, |this| {

crates/ui/src/icon.rs

@@ -1,4 +1,6 @@
-use gpui::{svg, IntoElement, RenderOnce, SharedString, Styled as _, Svg, WindowContext};
+use gpui::{svg, IntoElement, RenderOnce, SharedString, Styled, Svg, WindowContext};
+
+use crate::theme::ActiveTheme;
 
 #[derive(IntoElement)]
 pub enum IconName {
@@ -38,10 +40,16 @@ pub struct Icon {
     path: SharedString,
 }
 
+impl Styled for Icon {
+    fn style(&mut self) -> &mut gpui::StyleRefinement {
+        self.base.style()
+    }
+}
+
 impl Icon {
     pub fn new(name: IconName) -> Self {
         Self {
-            base: svg().flex_none().size_full(),
+            base: svg().flex_none().size_4(),
             path: name.path(),
         }
     }
@@ -56,7 +64,7 @@ impl Icon {
 }
 
 impl RenderOnce for Icon {
-    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        self.base.path(self.path)
+        self.base.text_color(cx.theme().foreground).path(self.path)
     }
 }

crates/ui/src/list/list_item.rs

@@ -1,6 +1,6 @@
 use gpui::{
-    div, prelude::FluentBuilder as _, ClickEvent, Div, ElementId, InteractiveElement, IntoElement,
+    div, prelude::FluentBuilder as _, AnyElement, ClickEvent, Div, ElementId, InteractiveElement,
-    MouseButton, MouseDownEvent, ParentElement, RenderOnce, SharedString, Stateful,
+    IntoElement, MouseButton, MouseDownEvent, ParentElement, RenderOnce, SharedString, Stateful,
     StatefulInteractiveElement as _, Style, Styled, WindowContext,
 };
 
@@ -11,7 +11,7 @@ pub struct ListItem {
     base: Stateful<Div>,
     disabled: bool,
     selected: bool,
-    check_icon: Option<IconName>,
+    check_icon: Option<Icon>,
     on_click: Option<Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
     on_secondary_mouse_down: Option<Box<dyn Fn(&MouseDownEvent, &mut WindowContext) + 'static>>,
 }
@@ -29,7 +29,7 @@ impl ListItem {
     }
 
     pub fn check_icon(mut self, icon: IconName) -> Self {
-        self.check_icon = Some(icon);
+        self.check_icon = Some(Icon::new(icon));
         self
     }
 
@@ -87,9 +87,7 @@ impl RenderOnce for ListItem {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         h_flex()
             .id("item-group")
-            .items_center()
+            .flex_none()
-            .gap_2()
-            .w_full()
             .relative()
             .gap_x_2()
             .text_base()
@@ -105,12 +103,15 @@ impl RenderOnce for ListItem {
                 this.hover(|this| this.bg(cx.theme().accent))
             })
             .when(self.selected, |this| this.bg(cx.theme().accent))
-            .child(self.base.when(self.selected, |this| {
+            .child(self.base.w_full().items_center().justify_between().when(
-                if let Some(icon) = self.check_icon {
+                self.selected,
-                    this.child(icon)
+                |this| {
-                } else {
+                    if let Some(icon) = self.check_icon {
-                    this
+                        this.child(icon.text_color(cx.theme().muted))
-                }
+                    } else {
-            }))
+                        this
+                    }
+                },
+            ))
     }
 }