From 9b3031f0ccfaf9cd25329888aab23d57f73ebb29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= <kovacs.fulop@gmail.com>
Date: Wed, 8 Jun 2022 14:41:52 +0200
Subject: [PATCH] Make the dot bigger when the inline editor popover is open

---
 .../KeyframeEditor/SingleKeyframeDot.tsx      | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx
index b6bca21..dcc395c 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx
@@ -35,7 +35,8 @@ const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 5
 const dotTheme = {
   normalColor: '#40AAA4',
   selectedColor: '#F2C95C',
-  selectedAndPopOverOpen: '#E08318',
+  inlineEditorOpenColor: '#FCF3DC',
+  selectedAndInlineEditorOpenColor: '#CBEBEA',
 }
 
 const selectBacgroundForDiamond = ({
@@ -43,11 +44,11 @@ const selectBacgroundForDiamond = ({
   isInlineEditorPopoverOpen,
 }: IDiamond) => {
   if (isSelected && isInlineEditorPopoverOpen) {
-    return dotTheme.selectedAndPopOverOpen
+    return dotTheme.inlineEditorOpenColor
   } else if (isSelected) {
     return dotTheme.selectedColor
   } else if (isInlineEditorPopoverOpen) {
-    return dotTheme.selectedColor
+    return dotTheme.selectedAndInlineEditorOpenColor
   } else {
     return dotTheme.normalColor
   }
@@ -67,7 +68,7 @@ const Diamond = styled.div<IDiamond>`
   pointer-events: none;
 `
 
-const HitZone = styled.div`
+const HitZone = styled.div<{isInlineEditorPopoverOpen: boolean}>`
   z-index: 1;
   cursor: ew-resize;
 
@@ -75,6 +76,11 @@ const HitZone = styled.div`
   ${absoluteDims(12)};
   ${pointerEventsAutoInNormalMode};
 
+  & + ${Diamond} {
+    ${(props) =>
+      props.isInlineEditorPopoverOpen ? absoluteDims(DOT_HOVER_SIZE_PX) : ''}
+  }
+
   &:hover + ${Diamond} {
     ${absoluteDims(DOT_HOVER_SIZE_PX)}
   }
@@ -98,7 +104,10 @@ const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = (props) => {
 
   return (
     <>
-      <HitZone ref={ref} />
+      <HitZone
+        ref={ref}
+        isInlineEditorPopoverOpen={isInlineEditorPopoverOpen}
+      />
       <Diamond
         isSelected={!!props.selection}
         isInlineEditorPopoverOpen={isInlineEditorPopoverOpen}