Style tweaks

theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx

@@ -14,11 +14,11 @@ import {
 const Container = styled.div`
   background-color: transparent;
   pointer-events: none;
-  position: absolute;
+  position: fixed;
   left: 0;
   right: 0;
-  top: 10px;
+  top: 12px;
-  bottom: 8px;
+  bottom: 0px;
   z-index: ${panelZIndexes.propsPanel};
 
   &:before {
@@ -36,30 +36,39 @@ const Container = styled.div`
 const Content = styled.div`
   position: absolute;
   top: 0;
-  bottom: 0;
   right: 0;
-  width: 320px;
+  width: 300px;
-  overflow-y: hidden;
+  bottom: 0;
-  display: flex;
+  /* transform: translateX(100%); */
-  flex-direction: column;
+  /* pointer-events: none; */
-  transform: translateX(100%);
-  pointer-events: auto;
 
   ${Container}:hover & {
     transform: translateX(0);
   }
 `
 
-const Title = styled.div`
+const Title = styled.div``
-  width: 100%;
+
-`
+const headerHeight = `32px`
 
 const Header = styled.div`
-  display: none;
+  height: ${headerHeight};
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
 `
 
 const Body = styled.div`
-  flex-grow: 1;
+  pointer-events: auto;
+  position: absolute;
+  top: ${headerHeight};
+  left: 0;
+  right: 0;
+  height: auto;
+  max-height: calc(100% - ${headerHeight});
   overflow-y: scroll;
   padding: 0;
 `

theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx

@@ -19,7 +19,8 @@ import DefaultOrStaticValueIndicator from './utils/DefaultValueIndicator'
 
 const Container = styled.div`
   --step: 8px;
-  --left-pad: 18px;
+  --left-pad: 0px;
+  pointer-events: auto;
 `
 
 const Header = styled.div`

theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx

@@ -43,6 +43,7 @@ const Row = styled.div`
   align-items: stretch;
   --right-width: 60%;
   position: relative;
+  pointer-events: auto;
 
   ${rowBg};
 `
@@ -69,6 +70,8 @@ const PropNameContainer = styled.div`
   text-overflow: ellipsis;
   display: flex;
   align-items: center;
+  user-select: none;
+  cursor: default;
 
   ${propNameText};
 `

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

@@ -120,7 +120,7 @@ const Tooltip = styled.div`
   font-size: 10px;
   line-height: 18px;
   text-align: center;
-  ${Thumb}:hover & {
+  ${Thumb}:hover &, ${Container}.seeking & {
     display: block;
   }
 `
@@ -152,6 +152,7 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
       onDragEnd() {
         setIsSeeking(false)
       },
+      lockCursorTo: 'ew-resize',
     }
   }, [])
 
@@ -175,6 +176,7 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
       <Container
         isVisible={isVisible}
         style={{transform: `translate3d(${posInClippedSpace}px, 0, 0)`}}
+        className={isSeeking ? 'seeking' : ''}
       >
         <Thumb ref={thumbRef as $IntentionalAny}>
           <RoomToClick room={8} />

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

@@ -4,6 +4,7 @@ import React from 'react'
 import styled from 'styled-components'
 import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
 import StampsGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/StampsGrid'
+import PanelDragZone from '@theatre/studio/panels/BasePanel/PanelDragZone'
 
 const height = 20
 
@@ -12,7 +13,7 @@ export const topStripTheme = {
   borderColor: `#1c1e21`,
 }
 
-const Container = styled.div`
+const Container = styled(PanelDragZone)`
   position: absolute;
   top: 0;
   left: 0;
@@ -21,6 +22,7 @@ const Container = styled.div`
   box-sizing: border-box;
   background: ${topStripTheme.backgroundColor};
   border-bottom: 1px solid ${topStripTheme.borderColor};
+  pointer-events: auto;
 `
 
 const TopStrip: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({

theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx

@@ -11,10 +11,12 @@ const Container = styled.div`
   top: 12px;
   right: 12px;
   left: 12px;
+  height: 28px;
   pointer-events: none;
 
   display: flex;
   gap: 1rem;
+  justify-content: center;
 `
 
 const GlobalToolbar: React.FC<{}> = (props) => {

theatre/studio/src/uiComponents/Tooltip.tsx

@@ -1,23 +0,0 @@
-import type {VFC} from 'react'
-import React from 'react'
-import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
-import type {TooltipProps} from 'reakit'
-import styled from 'styled-components'
-
-export {TooltipReference, useTooltipState}
-
-const Container = styled(TooltipImpl)`
-  padding: 8px 14px;
-
-  font-size: 11px;
-  line-height: 1.25em;
-  border-radius: 2px;
-  background-color: #201f20;
-  color: white;
-  pointer-events: none;
-  font-weight: 500;
-`
-
-export const Tooltip: VFC<TooltipProps> = ({className, ...props}) => (
-  <Container {...props} className={className as string} />
-)

theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/Item.tsx

@@ -2,7 +2,7 @@ import type {ElementType} from 'react'
 import React from 'react'
 import styled from 'styled-components'
 
-export const height = 30
+export const height = 26
 
 const Container = styled.li`
   height: ${height}px;
@@ -10,10 +10,22 @@ const Container = styled.li`
   margin: 0;
   display: flex;
   align-items: center;
-  font-weight: 600;
+  font-size: 11px;
+  font-weight: 400;
+  position: relative;
 
-  &:hover {
+  &:after {
-    background: #2bb5de;
+    position: absolute;
+    inset: 2px 1px;
+    display: block;
+    content: ' ';
+    pointer-events: none;
+    z-index: -1;
+    border-radius: 3px;
+  }
+
+  &:hover:after {
+    background-color: rgba(63, 174, 191, 0.75);
   }
 `
 

theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/RightClickMenu.tsx

@@ -19,14 +19,15 @@ const Container = styled.ul`
   position: absolute;
   min-width: ${minWidth}px;
   z-index: 10000;
-  background: ${transparentize(0.1, '#111')};
+  background: ${transparentize(0.2, '#111')};
   color: white;
   list-style-type: none;
-  padding: 2px;
+  padding: 2px 0;
   margin: 0;
   border-radius: 1px;
   cursor: default;
   pointer-events: all;
+  border-radius: 3px;
 `
 
 export type IContextMenuItem = {

theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx

@@ -1,19 +1,13 @@
 import type {ReactElement} from 'react'
 import React from 'react'
 import styled from 'styled-components'
-import {
-  Tooltip,
-  TooltipReference,
-  useTooltipState,
-} from '@theatre/studio/uiComponents/Tooltip'
 import type {ButtonProps} from 'reakit'
-import {Button} from 'reakit'
 import {outlinePanelTheme} from '@theatre/studio/panels/OutlinePanel/BaseItem'
 import {darken, opacify} from 'polished'
 
 const {baseBg, baseBorderColor, baseFontColor} = outlinePanelTheme
 
-export const TheButton = styled(TooltipReference)`
+export const TheButton = styled.button`
   pointer-events: auto;
   position: relative;
   display: flex;
@@ -66,18 +60,11 @@ const ToolbarIconButton: React.FC<
     label: string
   }
 > = ({label, icon, ...props}) => {
-  const tooltip = useTooltipState()
   return (
     <>
-      <TheButton
+      <TheButton aria-label={label} onClick={props.onClick} title={label}>
-        {...tooltip}
-        forwardedAs={Button}
-        aria-label={label}
-        onClick={props.onClick}
-      >
         {icon}
       </TheButton>
-      <Tooltip {...tooltip}>{label}</Tooltip>
     </>
   )
 }

theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import type {IconType} from 'react-icons'
 import {Group, Button} from 'reakit'
 import styled from 'styled-components'
-import {Tooltip, useTooltipState} from '@theatre/studio/uiComponents/Tooltip'
 import {TheButton as ButtonImpl} from './ToolbarIconButton'
 
 const Opt = styled(ButtonImpl)``
@@ -21,19 +20,17 @@ function OptionButton<T>({
   onClick: () => void
   isSelected: boolean
 }) {
-  const tooltip = useTooltipState()
   return (
     <>
       <Opt
-        {...tooltip}
         forwardedAs={Button}
         className={isSelected ? 'selected' : undefined}
         aria-label={label}
         onClick={onClick}
+        title={label}
       >
         {icon}
       </Opt>
-      <Tooltip {...tooltip}>{label}</Tooltip>
     </>
   )
 }