Tighten up spacing in the project panel (#2574)

Nate Butler created 2 years ago

Following https://github.com/zed-industries/zed/pull/2559 the project
panel entries become pretty wide again. This PR tries to mitigate that
and just make some general improvements to visual density in the project
panel.

- Reduces padding around items
- Removes top margin
- Slightly reduces the height of each item
- Fixes an issue where ignored files had the wrong color chevron

Release Notes:

- Improved density of the project panel and tidied up some visual
issues.

Change summary

styles/src/styleTree/projectPanel.ts | 15 ++++++++++-----
1 file changed, 10 insertions(+), 5 deletions(-)

Detailed changes

styles/src/styleTree/projectPanel.ts

@@ -8,10 +8,10 @@ export default function projectPanel(colorScheme: ColorScheme) {
     let layer = colorScheme.middle
 
     let baseEntry = {
-        height: 24,
+        height: 22,
         iconColor: foreground(layer, "variant"),
-        iconSize: 8,
-        iconSpacing: 8,
+        iconSize: 7,
+        iconSpacing: 5,
     }
 
     let status = {
@@ -71,8 +71,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
             },
         },
         background: background(layer),
-        padding: { left: 12, right: 12, top: 6, bottom: 6 },
-        indentWidth: 16,
+        padding: { left: 6, right: 6, top: 0, bottom: 6 },
+        indentWidth: 12,
         entry,
         draggedEntry: {
             ...baseEntry,
@@ -83,7 +83,12 @@ export default function projectPanel(colorScheme: ColorScheme) {
         },
         ignoredEntry: {
             ...entry,
+            iconColor: foreground(layer, "disabled"),
             text: text(layer, "mono", "disabled"),
+            active: {
+                ...entry.active,
+                iconColor: foreground(layer, "variant"),
+            }
         },
         cutEntry: {
             ...entry,