From 87354080f6e4fd4bfcdf06f831ec13d40ee7661c Mon Sep 17 00:00:00 2001
From: Philip Fulcher <philip@nrwl.io>
Date: Fri, 22 Oct 2021 15:41:07 -0600
Subject: [PATCH] fix(dep-graph): fix highlighting in group by folder mode
 (#7491)

---
 .../dep-graph/src/app/styles-graph/nodes.ts     | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/dep-graph/dep-graph/src/app/styles-graph/nodes.ts b/dep-graph/dep-graph/src/app/styles-graph/nodes.ts
index 81a2a023c2..8452603626 100644
--- a/dep-graph/dep-graph/src/app/styles-graph/nodes.ts
+++ b/dep-graph/dep-graph/src/app/styles-graph/nodes.ts
@@ -86,10 +86,20 @@ const highlightedNodes: Stylesheet = {
   },
 };
 
-const transparentNodes: Stylesheet = {
-  selector: 'node.transparent',
+const transparentProjectNodes: Stylesheet = {
+  selector: 'node.transparent:childless',
   style: { opacity: 0.5 },
 };
+
+const transparentParentNodes: Stylesheet = {
+  selector: 'node.transparent:parent',
+  style: {
+    'text-opacity': 0.5,
+    'background-opacity': 0.25,
+    'border-opacity': 0.5,
+  },
+};
+
 const highlightedEdges: Stylesheet = {
   selector: 'edge.highlight',
   style: { 'mid-target-arrow-color': NrwlPalette.blue },
@@ -109,7 +119,8 @@ export const nodeStyles = [
   affectedNodes,
   parentNodes,
   highlightedNodes,
-  transparentNodes,
+  transparentProjectNodes,
+  transparentParentNodes,
   highlightedEdges,
   transparentEdges,
 ];