Bit of ❤️ for the editor popovers

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx

@@ -29,6 +29,8 @@ const POPOVER_MARGIN = 5
 const EasingPopover = styled(BasicPopover)`
   --popover-outer-stroke: transparent;
   --popover-inner-stroke: ${COLOR_POPOVER_BACK};
+  border-radius: 2px;
+  padding: 0;
 `
 
 type IBasicKeyframeConnectorProps = ISingleKeyframeEditorProps

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx

@@ -129,7 +129,7 @@ type ICurveEditorPopoverProps = {
   additionalConnections: Array<KeyframeConnectionWithAddress>
 }
 
-const CurveEditorPopover: React.VFC<ICurveEditorPopoverProps> = (props) => {
+const CurveEditorPopover: React.FC<ICurveEditorPopoverProps> = (props) => {
   const allConnections = useMemo(
     () => [props.curveConnection, ...props.additionalConnections],
     [props.curveConnection, ...props.additionalConnections],

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx

@@ -19,18 +19,16 @@ export function useKeyframeInlineEditorPopover(
 ) {
   return usePopover({debugName: 'useKeyframeInlineEditorPopover'}, () => (
     <BasicPopover showPopoverEdgeTriangle>
-      <div style={{margin: '1px 2px 1px 10px'}}>
-        {!Array.isArray(props)
-          ? undefined
-          : props.map((prop, i) => (
-              <DeterminePropEditorForKeyframeTree
-                key={i}
-                {...prop}
-                autoFocusInput={i === 0}
-                indent={0}
-              />
-            ))}
-      </div>
+      {!Array.isArray(props)
+        ? undefined
+        : props.map((prop, i) => (
+            <DeterminePropEditorForKeyframeTree
+              key={i}
+              {...prop}
+              autoFocusInput={i === 0}
+              indent={0}
+            />
+          ))}
     </BasicPopover>
   ))
 }

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx

@@ -14,7 +14,6 @@ const greaterThanZero = (v: number) => isFinite(v) && v > 0
 const Container = styled.div`
   display: flex;
   gap: 8px;
-  padding: 4px 8px;
   height: 28px;
   align-items: center;
 `

theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerDot.tsx

@@ -173,7 +173,7 @@ const MarkerDotVisible: React.VFC<IMarkerDotVisibleProps> = ({
     close: closePopover,
   } = usePopover({debugName: 'MarkerPopover'}, () => {
     return (
-      <BasicPopover>
+      <BasicPopover showPopoverEdgeTriangle={true}>
         <MarkerEditorPopover
           marker={marker}
           layoutP={layoutP}

theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerEditorPopover.tsx

@@ -13,7 +13,6 @@ import BasicStringInput from '@theatre/studio/uiComponents/form/BasicStringInput
 const Container = styled.div`
   display: flex;
   gap: 8px;
-  /* padding: 4px 8px; */
   height: 28px;
   align-items: center;
 `
@@ -85,7 +84,7 @@ const MarkerEditorPopover: React.FC<{
 
   return (
     <Container>
-      {/* <Label>Marker</Label> */}
+      <Label>Marker</Label>
       <BasicStringInput
         value={marker.label ?? ''}
         {...fns}

theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx

@@ -290,7 +290,7 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
 
   const popover = usePopover({debugName: 'Playhead'}, () => {
     return (
-      <BasicPopover>
+      <BasicPopover showPopoverEdgeTriangle={true}>
         <PlayheadPositionPopover
           layoutP={layoutP}
           onRequestClose={popover.close}

theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.tsx

@@ -15,7 +15,6 @@ const greaterThanOrEqualToZero = (v: number) => isFinite(v) && v >= 0
 const Container = styled.div`
   display: flex;
   gap: 8px;
-  padding: 4px 8px;
   height: 28px;
   align-items: center;
 `

theatre/studio/src/uiComponents/Popover/BasicPopover.tsx

@@ -1,31 +1,31 @@
 import type {$IntentionalAny} from '@theatre/utils/types'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
-import {transparentize} from 'polished'
 import React from 'react'
 import styled from 'styled-components'
 import PopoverArrow from './PopoverArrow'
 
-export const popoverBackgroundColor = transparentize(0.05, `#2a2a31`)
+export const popoverBackgroundColor = `rgb(51 45 66 / 40%)`
 
 const Container = styled.div`
   position: absolute;
   --popover-bg: ${popoverBackgroundColor};
   --popover-inner-stroke: #505159;
-  --popover-outer-stroke: #111;
+  --popover-outer-stroke: rgb(86 100 110 / 46%);
+
+  border-radius: 4px;
+  box-shadow: rgb(0 0 0 / 25%) 0px 2px 4px;
+  backdrop-filter: blur(8px) saturate(300%) contrast(65%) brightness(55%);
+  /* background-color: rgb(45 46 66 / 50%); */
+  border: 0.5px solid var(--popover-outer-stroke);
 
   background: var(--popover-bg);
   /* border: 1px solid var(--popover-inner-stroke); */
-  box-shadow:
-    0 0 0 1px var(--popover-outer-stroke),
-    0 6px 8px -4px black;
-  backdrop-filter: blur(8px);
 
   color: white;
-  padding: 0;
+  padding: 1px 2px 1px 10px;
   margin: 0;
   cursor: default;
   ${pointerEventsAutoInNormalMode};
-  border-radius: 3px;
   z-index: 10000;
 
   & a {

theatre/studio/src/uiComponents/Popover/PopoverArrow.tsx

@@ -15,7 +15,7 @@ const Adjust = styled.div`
   height: 8px;
   position: absolute;
   left: -7px;
-  top: -8px;
+  top: -6px;
   text-align: center;
   line-height: 0;
 `
@@ -50,7 +50,7 @@ const PopoverArrow = forwardRef<HTMLDivElement, Props>(({className}, ref) => {
           xmlns="http://www.w3.org/2000/svg"
         >
           <OuterStroke d="M6 0L0 6H12L6 0Z" />
-          <InnerStroke d="M6 1.5L0 7.5H12L6 1.5Z" />
+          {/* <InnerStroke d="M6 1.5L0 7.5H12L6 1.5Z" /> */}
           <InnerTriangle d="M6 3L0 9H12L6 3Z" />
         </svg>
       </Adjust>