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` 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 = (props) => { return ( <> - +