From d011b978305ed1a3d3a5a1cd596789ed073cab81 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 21 Jan 2025 11:13:46 -0300
Subject: [PATCH] project_panel: Adjust entry background and border colors
 (#23403)

Follow up to https://github.com/zed-industries/zed/pull/22658

This PR ensures the background and border color of a project panel entry
is exactly the same with one exception: if the item is focused, active,
and not with mouse down. The point is to not be able to see the border
at all given they're there to act sort of akin to CSS's `outline` (which
doesn't add up to the box model).

Please let me know if there is any edge case I either messed up here or
didn't account for.


https://github.com/user-attachments/assets/29c74f6a-b027-4d19-a7de-b9614f0d7859

Release Notes:

- N/A
---
 crates/project_panel/src/project_panel.rs | 23 ++++++++++++++---------
 crates/theme/src/default_colors.rs        |  2 +-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/crates/project_panel/src/project_panel.rs b/crates/project_panel/src/project_panel.rs
index e6b72d86fd..ed0a01378a 100644
--- a/crates/project_panel/src/project_panel.rs
+++ b/crates/project_panel/src/project_panel.rs
@@ -270,7 +270,7 @@ fn get_item_color(cx: &ViewContext<ProjectPanel>) -> ItemColors {
         default: colors.panel_background,
         hover: colors.ghost_element_hover,
         drag_over: colors.drop_target_background,
-        marked_active: colors.ghost_element_selected,
+        marked_active: colors.element_selected,
         focused: colors.panel_focused_border,
     }
 }
@@ -3274,13 +3274,13 @@ impl ProjectPanel {
             marked_selections: selections,
         };
 
-        let default_color = if is_marked {
+        let bg_color = if is_marked || is_active {
             item_colors.marked_active
         } else {
             item_colors.default
         };
 
-        let bg_hover_color = if self.mouse_down || is_marked {
+        let bg_hover_color = if self.mouse_down || is_marked || is_active {
             item_colors.marked_active
         } else if !is_active {
             item_colors.hover
@@ -3291,10 +3291,15 @@ impl ProjectPanel {
         let border_color =
             if !self.mouse_down && is_active && self.focus_handle.contains_focused(cx) {
                 item_colors.focused
-            } else if self.mouse_down && is_marked || is_active {
-                item_colors.marked_active
             } else {
-                item_colors.default
+                bg_color
+            };
+
+        let border_hover_color =
+            if !self.mouse_down && is_active && self.focus_handle.contains_focused(cx) {
+                item_colors.focused
+            } else {
+                bg_hover_color
             };
 
         div()
@@ -3302,11 +3307,11 @@ impl ProjectPanel {
             .group(GROUP_NAME)
             .cursor_pointer()
             .rounded_none()
-            .bg(default_color)
+            .bg(bg_color)
             .border_1()
             .border_r_2()
             .border_color(border_color)
-            .hover(|style| style.bg(bg_hover_color))
+            .hover(|style| style.bg(bg_hover_color).border_color(border_hover_color))
             .when(is_local, |div| {
                 div.on_drag_move::<ExternalPaths>(cx.listener(
                     move |this, event: &DragMoveEvent<ExternalPaths>, cx| {
@@ -3532,7 +3537,7 @@ impl ProjectPanel {
                                             } else {
                                                 IconDecorationKind::Dot
                                             },
-                                            default_color,
+                                            bg_color,
                                             cx,
                                         )
                                         .group_name(Some(GROUP_NAME.into()))
diff --git a/crates/theme/src/default_colors.rs b/crates/theme/src/default_colors.rs
index 3c6f0f7aae..420e58eaad 100644
--- a/crates/theme/src/default_colors.rs
+++ b/crates/theme/src/default_colors.rs
@@ -165,7 +165,7 @@ impl ThemeColors {
             tab_active_background: neutral().dark().step_1(),
             search_match_background: neutral().dark().step_5(),
             panel_background: neutral().dark().step_2(),
-            panel_focused_border: blue().dark().step_12(),
+            panel_focused_border: blue().dark().step_8(),
             panel_indent_guide: neutral().dark_alpha().step_4(),
             panel_indent_guide_hover: neutral().dark_alpha().step_6(),
             panel_indent_guide_active: neutral().dark_alpha().step_6(),