From 417233a7c641c8646388eb03df5276ca2eb45c92 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Tue, 10 May 2022 18:56:43 +0200
Subject: [PATCH] Fix the color inconsistency that shows up when dragging the
 focus range

---
 .../FocusRangeZone/FocusRangeThumb.tsx        | 42 +++++++------------
 1 file changed, 15 insertions(+), 27 deletions(-)

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
index 607c5ac..6ad3cb7 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
@@ -35,7 +35,7 @@ const TheDiv = styled.div<{enabled: boolean; type: 'start' | 'end'}>`
   height: ${() => topStripHeight - 1}px;
   z-index: 3;
 
-  background-color: ${({enabled}) =>
+  --bg: ${({enabled}) =>
     enabled
       ? focusRangeStripTheme.enabled.backgroundColor
       : focusRangeStripTheme.disabled.backgroundColor};
@@ -64,23 +64,27 @@ const TheDiv = styled.div<{enabled: boolean; type: 'start' | 'end'}>`
     pointer-events: none !important;
   }
 
-  // highlight the handle when it's being dragged or the whole strip is being dragged
+  // highlight the handle if it's hovered, or the whole strip is hovverd
+  ${() => RangeStrip}:hover ~ &, &:hover {
+    --bg: ${focusRangeStripTheme.hover.backgroundColor};
+    stroke: ${focusRangeStripTheme.hover.stroke};
+  }
+
+  // highlight the handle when it's being dragged or the whole strip is being dragged.
+  // using dragging.dragging to give this selector priority, as it seems to be overridden
+  // by the hover selector above
   &.dragging,
-  ${() => RangeStrip}.dragging ~ & {
-    background: ${focusRangeStripTheme.dragging.backgroundColor};
+  ${() => RangeStrip}.dragging.dragging ~ & {
+    --bg: ${focusRangeStripTheme.dragging.backgroundColor};
     stroke: ${focusRangeStripTheme.dragging.stroke};
   }
 
   #pointer-root.draggingPositionInSequenceEditor &:hover {
-    background: ${focusRangeStripTheme.dragging.backgroundColor};
+    --bg: ${focusRangeStripTheme.dragging.backgroundColor};
     stroke: #40aaa4;
   }
 
-  // highlight the handle if it's hovered, or the whole strip is hovverd
-  ${() => RangeStrip}:hover ~ &, &:hover {
-    background: ${focusRangeStripTheme.hover.backgroundColor};
-    stroke: ${focusRangeStripTheme.hover.stroke};
-  }
+  background-color: var(--bg);
 
   // a larger hit zone
   &:before {
@@ -101,20 +105,6 @@ const ColoredMargin = styled.div<{type: 'start' | 'end'; enabled: boolean}>`
   bottom: 0;
   pointer-events: none;
 
-  ${() => RangeStrip}.dragging ~ ${TheDiv} > & {
-    --bg: ${focusRangeStripTheme.dragging.backgroundColor};
-  }
-
-  --bg: ${({enabled}) =>
-    enabled
-      ? focusRangeStripTheme.enabled.backgroundColor
-      : focusRangeStripTheme.disabled.backgroundColor};
-
-  // highlight the handle if it's hovered, or the whole strip is hovverd
-  ${() => RangeStrip}:hover ~ ${TheDiv} > & {
-    --bg: ${focusRangeStripTheme.hover.backgroundColor};
-  }
-
   background: linear-gradient(
     ${(props) => (props.type === 'start' ? 90 : -90)}deg,
     var(--bg) 0%,
@@ -138,11 +128,9 @@ const OuterColoredMargin = styled.div<{
   bottom: 0;
   pointer-events: none;
 
-  --bg: ${() => topStripTheme.backgroundColor};
-
   background: linear-gradient(
     ${(props) => (props.type === 'start' ? -90 : 90)}deg,
-    var(--bg) 0%,
+    ${() => topStripTheme.backgroundColor} 0%,
     #ffffff00 100%
   );