More style tweaks

theatre/studio/src/panels/BasePanel/PaneWrapper.tsx

@@ -4,7 +4,7 @@ import type {PaneInstance} from '@theatre/studio/TheatreStudio'
 import React from 'react'
 import styled from 'styled-components'
 import {
-  F1,
+  TitleBar,
   F2 as F2Impl,
 } from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
 import BasePanel from './BasePanel'
@@ -57,9 +57,9 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
   return (
     <Container>
       <PanelDragZone>
-        <F1>
+        <TitleBar>
           <Title>{paneInstance.instanceId}</Title>
-        </F1>
+        </TitleBar>
       </PanelDragZone>
       <F2>
         <Comp id={paneInstance.instanceId} object={paneInstance.object} />

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

@@ -34,18 +34,22 @@ const Container = styled(PanelWrapper)`
 
 const emptyPanel = <Container />
 
-export const F1Height = 40
+export const titleBarHeight = 20
 
-export const F1 = styled.div`
-  height: ${F1Height}px;
+export const TitleBar = styled.div`
+  height: ${titleBarHeight}px;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  padding: 0 14px;
-  color: ${theme.panel.head.title.color};
-  font-size: 11px;
-  border-bottom: 2px solid rgba(0, 0, 0, 0.45);
-  background: ${theme.panel.bg};
-  box-sizing: border-box;
+  padding: 0 10px;
+  color: #adadadb3;
+  border-bottom: 1px solid rgb(0 0 0 / 13%);
+  background: #00000017;
+  font-size: 10px;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `
 
 const F1_1 = styled.div`
@@ -106,7 +110,7 @@ const Content: React.FC<{}> = () => {
 
     const obj = selection.find((s): s is SheetObject => isSheetObject(s))
 
-    if (!obj) return emptyPanel
+    if (!obj) return <></>
 
     const key = prism.memo('key', () => JSON.stringify(obj.address), [obj])
 

theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx

@@ -36,6 +36,7 @@ const Container = styled(PanelWrapper)`
   flex-direction: column;
   background-color: transparent;
   box-shadow: none;
+  pointer-events: none;
 `
 
 const Title = styled.div`

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

@@ -6,6 +6,7 @@ import {prism, val} from '@theatre/dataverse'
 import React from 'react'
 import styled from 'styled-components'
 import {
+  TitleBar,
   TitleBar_Piece,
   TitleBar_Punctuation,
 } from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
@@ -27,24 +28,6 @@ import {uniq} from 'lodash-es'
 
 const Container = styled(PanelWrapper)``
 
-export const titleBarHeight = 20
-
-const TitleBar = styled.div`
-  height: ${titleBarHeight}px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  color: #adadadb3;
-  border-bottom: 1px solid rgb(0 0 0 / 13%);
-  background: #00000017;
-  font-size: 10px;
-  font-weight: 500;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`
-
 export const zIndexes = (() => {
   const scrollableArea = 0
   const rightOverlay = scrollableArea + 1
@@ -134,10 +117,10 @@ const Content: React.FC<{}> = () => {
     )
     const selectedTemplates = uniq(selectedSheets.map((s) => s.template))
 
-    if (selectedTemplates.length !== 1) return <EmptyPanel {...panelSize} />
+    if (selectedTemplates.length !== 1) return <></>
     const sheet = selectedSheets[0]
 
-    if (!sheet) return <EmptyPanel {...panelSize} />
+    if (!sheet) return <></>
 
     const panelSizeP = valToAtom('panelSizeP', panelSize).pointer
 

theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts

@@ -13,7 +13,7 @@ import type {SequenceTrackId} from '@theatre/shared/utils/ids'
 import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
 import {prism, val} from '@theatre/dataverse'
 import logger from '@theatre/shared/logger'
-import {titleBarHeight} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
+import {titleBarHeight} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
 
 export type SequenceEditorTree_Row<Type> = {
   type: Type