Revert "Touch up git in project panel and scroll bar styling"

crates/editor/src/editor.rs

@@ -7253,6 +7253,7 @@ impl View for Editor {
     }
 
     fn focus_in(&mut self, _: AnyViewHandle, cx: &mut ViewContext<Self>) {
+        dbg!("Editor Focus in");
         if cx.is_self_focused() {
             let focused_event = EditorFocused(cx.handle());
             cx.emit(Event::Focused);

crates/project_panel/src/project_panel.rs

@@ -6,7 +6,7 @@ use gpui::{
     actions,
     anyhow::{anyhow, Result},
     elements::{
-        AnchorCorner, ChildView, ContainerStyle, Empty, Flex, Label, MouseEventHandler,
+        AnchorCorner, ChildView, ComponentHost, ContainerStyle, Empty, Flex, MouseEventHandler,
         ParentElement, ScrollTarget, Stack, Svg, UniformList, UniformListState,
     },
     geometry::vector::Vector2F,
@@ -28,7 +28,7 @@ use std::{
     path::Path,
     sync::Arc,
 };
-use theme::ProjectPanelEntry;
+use theme::{ui::FileName, ProjectPanelEntry};
 use unicase::UniCase;
 use workspace::Workspace;
 
@@ -1079,17 +1079,6 @@ impl ProjectPanel {
         let kind = details.kind;
         let show_editor = details.is_editing && !details.is_processing;
 
-        let mut filename_text_style = style.text.clone();
-        filename_text_style.color = details
-            .git_status
-            .as_ref()
-            .map(|status| match status {
-                GitFileStatus::Added => style.status.git.inserted,
-                GitFileStatus::Modified => style.status.git.modified,
-                GitFileStatus::Conflict => style.status.git.conflict,
-            })
-            .unwrap_or(style.text.color);
-
         Flex::row()
             .with_child(
                 if kind == EntryKind::Dir {
@@ -1117,7 +1106,11 @@ impl ProjectPanel {
                     .flex(1.0, true)
                     .into_any()
             } else {
-                Label::new(details.filename.clone(), filename_text_style)
+                ComponentHost::new(FileName::new(
+                    details.filename.clone(),
+                    details.git_status,
+                    FileName::style(style.text.clone(), &theme::current(cx)),
+                ))
                 .contained()
                 .with_margin_left(style.icon_spacing)
                 .aligned()

crates/theme/src/theme.rs

@@ -446,19 +446,6 @@ pub struct ProjectPanelEntry {
     pub icon_color: Color,
     pub icon_size: f32,
     pub icon_spacing: f32,
-    pub status: EntryStatus,
-}
-
-#[derive(Clone, Debug, Deserialize, Default)]
-pub struct EntryStatus {
-    pub git: GitProjectStatus,
-}
-
-#[derive(Clone, Debug, Deserialize, Default)]
-pub struct GitProjectStatus {
-    pub modified: Color,
-    pub inserted: Color,
-    pub conflict: Color,
 }
 
 #[derive(Clone, Debug, Deserialize, Default)]
@@ -683,14 +670,6 @@ pub struct Scrollbar {
     pub thumb: ContainerStyle,
     pub width: f32,
     pub min_height_factor: f32,
-    pub git: GitDiffColors,
-}
-
-#[derive(Clone, Deserialize, Default)]
-pub struct GitDiffColors {
-    pub inserted: Color,
-    pub modified: Color,
-    pub deleted: Color,
 }
 
 #[derive(Clone, Deserialize, Default)]

crates/theme/src/ui.rs

@@ -1,9 +1,10 @@
 use std::borrow::Cow;
 
+use fs::repository::GitFileStatus;
 use gpui::{
     color::Color,
     elements::{
-        ConstrainedBox, Container, ContainerStyle, Empty, Flex, KeystrokeLabel, Label,
+        ConstrainedBox, Container, ContainerStyle, Empty, Flex, KeystrokeLabel, Label, LabelStyle,
         MouseEventHandler, ParentElement, Stack, Svg,
     },
     fonts::TextStyle,
@@ -11,11 +12,11 @@ use gpui::{
     platform,
     platform::MouseButton,
     scene::MouseClick,
-    Action, Element, EventContext, MouseState, View, ViewContext,
+    Action, AnyElement, Element, EventContext, MouseState, View, ViewContext,
 };
 use serde::Deserialize;
 
-use crate::{ContainedText, Interactive};
+use crate::{ContainedText, Interactive, Theme};
 
 #[derive(Clone, Deserialize, Default)]
 pub struct CheckboxStyle {
@@ -252,3 +253,53 @@ where
         .constrained()
         .with_height(style.dimensions().y())
 }
+
+pub struct FileName {
+    filename: String,
+    git_status: Option<GitFileStatus>,
+    style: FileNameStyle,
+}
+
+pub struct FileNameStyle {
+    template_style: LabelStyle,
+    git_inserted: Color,
+    git_modified: Color,
+    git_deleted: Color,
+}
+
+impl FileName {
+    pub fn new(filename: String, git_status: Option<GitFileStatus>, style: FileNameStyle) -> Self {
+        FileName {
+            filename,
+            git_status,
+            style,
+        }
+    }
+
+    pub fn style<I: Into<LabelStyle>>(style: I, theme: &Theme) -> FileNameStyle {
+        FileNameStyle {
+            template_style: style.into(),
+            git_inserted: theme.editor.diff.inserted,
+            git_modified: theme.editor.diff.modified,
+            git_deleted: theme.editor.diff.deleted,
+        }
+    }
+}
+
+impl<V: View> gpui::elements::Component<V> for FileName {
+    fn render(&self, _: &mut V, _: &mut ViewContext<V>) -> AnyElement<V> {
+        // Prepare colors for git statuses
+        let mut filename_text_style = self.style.template_style.text.clone();
+        filename_text_style.color = self
+            .git_status
+            .as_ref()
+            .map(|status| match status {
+                GitFileStatus::Added => self.style.git_inserted,
+                GitFileStatus::Modified => self.style.git_modified,
+                GitFileStatus::Conflict => self.style.git_deleted,
+            })
+            .unwrap_or(self.style.template_style.text.color);
+
+        Label::new(self.filename.clone(), filename_text_style).into_any()
+    }
+}

styles/src/styleTree/editor.ts

@@ -3,10 +3,9 @@ import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
-import { buildSyntax } from "../themes/common/syntax"
+import { SyntaxHighlightStyle, buildSyntax } from "../themes/common/syntax"
 
 export default function editor(colorScheme: ColorScheme) {
-    const { isLight } = colorScheme
     let layer = colorScheme.highest
 
     const autocompleteItem = {
@@ -98,18 +97,12 @@ export default function editor(colorScheme: ColorScheme) {
             foldBackground: foreground(layer, "variant"),
         },
         diff: {
-            deleted: isLight
+            deleted: foreground(layer, "negative"),
-                ? colorScheme.ramps.red(0.5).hex()
+            modified: foreground(layer, "warning"),
-                : colorScheme.ramps.red(0.4).hex(),
+            inserted: foreground(layer, "positive"),
-            modified: isLight
-                ? colorScheme.ramps.yellow(0.3).hex()
-                : colorScheme.ramps.yellow(0.5).hex(),
-            inserted: isLight
-                ? colorScheme.ramps.green(0.4).hex()
-                : colorScheme.ramps.green(0.5).hex(),
             removedWidthEm: 0.275,
-            widthEm: 0.15,
+            widthEm: 0.22,
-            cornerRadius: 0.05,
+            cornerRadius: 0.2,
         },
         /** Highlights matching occurences of what is under the cursor
          * as well as matched brackets
@@ -241,27 +234,12 @@ export default function editor(colorScheme: ColorScheme) {
                 border: border(layer, "variant", { left: true }),
             },
             thumb: {
-                background: withOpacity(background(layer, "inverted"), 0.3),
+                background: withOpacity(background(layer, "inverted"), 0.4),
                 border: {
                     width: 1,
                     color: borderColor(layer, "variant"),
-                    top: false,
-                    right: true,
-                    left: true,
-                    bottom: false,
                 },
             },
-            git: {
-                deleted: isLight
-                    ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8)
-                    : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8),
-                modified: isLight
-                    ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8)
-                    : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8),
-                inserted: isLight
-                    ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
-                    : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
-            }
         },
         compositionMark: {
             underline: {

styles/src/styleTree/projectPanel.ts

@@ -3,7 +3,6 @@ import { withOpacity } from "../utils/color"
 import { background, border, foreground, text } from "./components"
 
 export default function projectPanel(colorScheme: ColorScheme) {
-    const { isLight } = colorScheme
     let layer = colorScheme.middle
 
     let baseEntry = {
@@ -13,20 +12,6 @@ export default function projectPanel(colorScheme: ColorScheme) {
         iconSpacing: 8,
     }
 
-    let status = {
-        git: {
-            modified: isLight
-                ? colorScheme.ramps.yellow(0.6).hex()
-                : colorScheme.ramps.yellow(0.5).hex(),
-            inserted: isLight
-                ? colorScheme.ramps.green(0.45).hex()
-                : colorScheme.ramps.green(0.5).hex(),
-            conflict: isLight
-                ? colorScheme.ramps.red(0.6).hex()
-                : colorScheme.ramps.red(0.5).hex()
-        }
-    }
-
     let entry = {
         ...baseEntry,
         text: text(layer, "mono", "variant", { size: "sm" }),
@@ -43,7 +28,6 @@ export default function projectPanel(colorScheme: ColorScheme) {
             background: background(layer, "active"),
             text: text(layer, "mono", "active", { size: "sm" }),
         },
-        status
     }
 
     return {
@@ -75,7 +59,6 @@ export default function projectPanel(colorScheme: ColorScheme) {
         entry,
         draggedEntry: {
             ...baseEntry,
-            status,
             text: text(layer, "mono", "on", { size: "sm" }),
             background: withOpacity(background(layer, "on"), 0.9),
             border: border(layer),
@@ -96,6 +79,6 @@ export default function projectPanel(colorScheme: ColorScheme) {
             background: background(layer, "on"),
             text: text(layer, "mono", "on", { size: "sm" }),
             selection: colorScheme.players[0],
-        }
+        },
     }
 }