From 1b36e8f6f9aa009c48afbbbfa1a1d1cfcaed312c Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Mon, 13 Jun 2022 15:01:45 +0200
Subject: [PATCH] Also highlight the hovered props in the sequence editor panel

---
 .../DopeSheet/Left/AnyCompositeRow.tsx                | 11 ++++++++---
 .../DopeSheet/Left/PrimitivePropRow.tsx               | 11 ++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
index a324899..5b3bad0 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
@@ -45,6 +45,10 @@ const LeftRowHead_Label = styled.span`
   padding-right: 4px;
   line-height: 26px;
   flex-wrap: nowrap;
+
+  ${LeftRowHeader}:hover & {
+    color: #ccc;
+  }
 `
 
 const LeftRowHead_Icon = styled.span<{isCollapsed: boolean}>`
@@ -93,13 +97,14 @@ const AnyCompositeRow: React.FC<{
 }) => {
   const hasChildren = Array.isArray(children) && children.length > 0
 
-  const containerRef = useRef<HTMLLIElement | null>(null)
+  const rowHeaderRef = useRef<HTMLDivElement | null>(null)
 
-  usePropHighlightMouseEnter(containerRef.current, leaf)
+  usePropHighlightMouseEnter(rowHeaderRef.current, leaf)
 
   return leaf.shouldRender ? (
-    <LeftRowContainer depth={leaf.depth} ref={containerRef}>
+    <LeftRowContainer depth={leaf.depth}>
       <LeftRowHeader
+        ref={rowHeaderRef}
         style={{
           height: leaf.nodeHeight + 'px',
         }}
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
index a222543..e6f1242 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
@@ -77,6 +77,10 @@ const GraphIcon = () => (
 const PrimitivePropRowHead_Label = styled.span`
   margin-right: 4px;
   ${propNameTextCSS};
+
+  ${PrimitivePropRowHead}:hover & {
+    color: #ccc;
+  }
 `
 
 const PrimitivePropRow: React.FC<{
@@ -132,13 +136,14 @@ const PrimitivePropRow: React.FC<{
   const label = leaf.pathToProp[leaf.pathToProp.length - 1]
   const isSelectable = true
 
-  const containerRef = useRef<HTMLLIElement | null>(null)
+  const headRef = useRef<HTMLDivElement | null>(null)
 
-  usePropHighlightMouseEnter(containerRef.current, leaf)
+  usePropHighlightMouseEnter(headRef.current, leaf)
 
   return (
-    <PrimitivePropRowContainer depth={leaf.depth} ref={containerRef}>
+    <PrimitivePropRowContainer depth={leaf.depth}>
       <PrimitivePropRowHead
+        ref={headRef}
         isEven={leaf.n % 2 === 0}
         style={{
           height: leaf.nodeHeight + 'px',