Refine project panel, list item

crates/ui2/src/components/collab_panel.rs

@@ -25,11 +25,11 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
 
     fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
         let theme = theme(cx);
+        let color = ThemeColor::new(cx);
 
         v_stack()
-            .w_64()
             .h_full()
-            .fill(theme.middle.base.default.background)
+            .fill(color.surface)
             .child(
                 v_stack()
                     .w_full()
@@ -44,7 +44,7 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
                                 List::new(static_collab_panel_current_call())
                                     .header(
                                         ListHeader::new("CRDB")
-                                            .left_icon(Icon::Hash.into())
+                                            .set_left_icon(Icon::Hash.into())
                                             .set_toggle(ToggleState::Toggled),
                                     )
                                     .set_toggle(ToggleState::Toggled),

crates/ui2/src/components/context_menu.rs

@@ -1,7 +1,5 @@
-use crate::prelude::*;
+use crate::{prelude::*, ListItemVariant};
-use crate::{
+use crate::{theme, v_stack, Label, List, ListEntry, ListItem, ListSeparator, ListSubHeader};
-    theme, v_stack, Label, List, ListEntry, ListItem, ListItemVariant, ListSeparator, ListSubHeader,
-};
 
 #[derive(Clone)]
 pub enum ContextMenuItem<S: 'static + Send + Sync + Clone> {

crates/ui2/src/components/list.rs

@@ -49,7 +49,7 @@ impl<S: 'static + Send + Sync + Clone> ListHeader<S> {
         self
     }
 
-    pub fn left_icon(mut self, left_icon: Option<Icon>) -> Self {
+    pub fn set_left_icon(mut self, left_icon: Option<Icon>) -> Self {
         self.left_icon = left_icon;
         self
     }
@@ -78,18 +78,6 @@ impl<S: 'static + Send + Sync + Clone> ListHeader<S> {
         }
     }
 
-    fn background_color(&self, cx: &WindowContext) -> Hsla {
-        let theme = theme(cx);
-        let system_color = SystemColor::new();
-
-        match self.state {
-            InteractionState::Hovered => theme.lowest.base.hovered.background,
-            InteractionState::Active => theme.lowest.base.pressed.background,
-            InteractionState::Enabled => theme.lowest.on.default.background,
-            _ => system_color.transparent,
-        }
-    }
-
     fn label_color(&self) -> LabelColor {
         match self.state {
             InteractionState::Disabled => LabelColor::Disabled,
@@ -108,7 +96,7 @@ impl<S: 'static + Send + Sync + Clone> ListHeader<S> {
         let theme = theme(cx);
         let token = token();
         let system_color = SystemColor::new();
-        let background_color = self.background_color(cx);
+        let color = ThemeColor::new(cx);
 
         let is_toggleable = self.toggleable != Toggleable::NotToggleable;
         let is_toggled = Toggleable::is_toggled(&self.toggleable);
@@ -118,10 +106,9 @@ impl<S: 'static + Send + Sync + Clone> ListHeader<S> {
         h_stack()
             .flex_1()
             .w_full()
-            .fill(background_color)
+            .fill(color.surface)
             .when(self.state == InteractionState::Focused, |this| {
-                this.border()
+                this.border().border_color(color.border_focused)
-                    .border_color(theme.lowest.accent.default.border)
             })
             .relative()
             .child(
@@ -133,7 +120,6 @@ impl<S: 'static + Send + Sync + Clone> ListHeader<S> {
                     .w_full()
                     .gap_1()
                     .items_center()
-                    .justify_between()
                     .child(
                         div()
                             .flex()
@@ -145,7 +131,7 @@ impl<S: 'static + Send + Sync + Clone> ListHeader<S> {
                                     .size(IconSize::Small)
                             }))
                             .child(
-                                Label::new(self.label.clone())
+                                Label::new(self.label)
                                     .color(LabelColor::Muted)
                                     .size(LabelSize::Small),
                             ),
@@ -203,7 +189,7 @@ impl<S: 'static + Send + Sync + Clone> ListSubHeader<S> {
                                 .size(IconSize::Small)
                         }))
                         .child(
-                            Label::new(self.label.clone())
+                            Label::new(self.label)
                                 .color(LabelColor::Muted)
                                 .size(LabelSize::Small),
                         ),
@@ -346,18 +332,6 @@ impl<S: 'static + Send + Sync + Clone> ListEntry<S> {
         self
     }
 
-    fn background_color(&self, cx: &WindowContext) -> Hsla {
-        let theme = theme(cx);
-        let system_color = SystemColor::new();
-
-        match self.state {
-            InteractionState::Hovered => theme.lowest.base.hovered.background,
-            InteractionState::Active => theme.lowest.base.pressed.background,
-            InteractionState::Enabled => theme.lowest.on.default.background,
-            _ => system_color.transparent,
-        }
-    }
-
     fn label_color(&self) -> LabelColor {
         match self.state {
             InteractionState::Disabled => LabelColor::Disabled,
@@ -420,7 +394,7 @@ impl<S: 'static + Send + Sync + Clone> ListEntry<S> {
 
         div()
             .relative()
-            .fill(self.background_color(cx))
+            .fill(color.surface)
             .when(self.state == InteractionState::Focused, |this| {
                 this.border().border_color(color.border_focused)
             })

crates/ui2/src/components/project_panel.rs

@@ -29,7 +29,7 @@ impl<S: 'static + Send + Sync + Clone> ProjectPanel<S> {
             .flex_col()
             .w_full()
             .h_full()
-            .fill(color.panel_surface)
+            .fill(color.surface)
             .child(
                 div()
                     .w_full()

crates/ui2/src/elements/input.rs

@@ -55,7 +55,6 @@ impl<S: 'static + Send + Sync> Input<S> {
 
         let mut border_color_default = theme.middle.base.default.border;
         let mut border_color_hover = theme.middle.base.hovered.border;
-        let mut border_color_active = theme.middle.base.pressed.border;
         let border_color_focus = theme.middle.base.pressed.background;
 
         match self.variant {
@@ -72,7 +71,6 @@ impl<S: 'static + Send + Sync> Input<S> {
         if self.state == InteractionState::Focused {
             border_color_default = theme.players[0].cursor;
             border_color_hover = theme.players[0].cursor;
-            border_color_active = theme.players[0].cursor;
         }
 
         if self.state == InteractionState::Focused || self.state == InteractionState::Active {

crates/ui2/src/prelude.rs

@@ -60,7 +60,7 @@ pub struct ThemeColor {
     pub border_focused: Hsla,
     /// The background color of an elevated surface, like a modal, tooltip or toast.
     pub elevated_surface: Hsla,
-    pub panel_surface: Hsla,
+    pub surface: Hsla,
 }
 
 impl ThemeColor {
@@ -72,7 +72,7 @@ impl ThemeColor {
             border_variant: theme.lowest.variant.default.border,
             border_focused: theme.lowest.accent.default.border,
             elevated_surface: theme.middle.base.default.background,
-            panel_surface: theme.middle.base.default.background,
+            surface: theme.middle.base.default.background,
         }
     }
 }