diff --git a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
index ed1d050..51a35b5 100644
--- a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
+++ b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
@@ -2,15 +2,13 @@ import React from 'react'
import styled from 'styled-components'
import {usePanel} from './BasePanel'
import PanelResizers from './PanelResizers'
-import {theme} from '@theatre/studio/css'
const Container = styled.div`
position: absolute;
user-select: none;
box-sizing: border-box;
pointer-events: auto;
- background: ${theme.panel.bg};
- box-shadow: 1px 2px 10px -5px black;
+ /* box-shadow: 1px 2px 10px -5px black; */
z-index: 1000;
`
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
index 79f5e9b..b5701ba 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
@@ -44,7 +44,7 @@ export const TitleBar = styled.div`
padding: 0 10px;
color: #adadadb3;
border-bottom: 1px solid rgb(0 0 0 / 13%);
- background: #00000017;
+ background-color: #25272b;
font-size: 10px;
font-weight: 500;
overflow: hidden;
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
index 49eb8e1..fe41387 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
@@ -2,7 +2,7 @@ import {theme} from '@theatre/studio/css'
import type {SequenceEditorTree_Row} from '@theatre/studio/panels/SequenceEditorPanel/layout/tree'
import type {VoidFn} from '@theatre/shared/utils/types'
import React from 'react'
-import {GoChevronRight} from 'react-icons/go'
+import {HiOutlineChevronRight} from 'react-icons/all'
import styled from 'styled-components'
import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
@@ -24,7 +24,7 @@ const Header = styled(BaseHeader)<{
padding-left: calc(16px + var(--depth) * 20px);
display: flex;
- align-items: center;
+ align-items: stretch;
color: ${theme.panel.body.compoudThing.label.color};
box-sizing: border-box;
@@ -34,12 +34,17 @@ const Header = styled(BaseHeader)<{
const Head_Label = styled.span`
${propNameText};
+ display: flex;
+ align-items: center;
`
const Head_Icon = styled.span<{isOpen: boolean}>`
width: 12px;
margin-right: 8px;
- font-size: 13px;
+ font-size: 9px;
+ display: flex;
+ align-items: center;
+
transform: rotateZ(${(props) => (props.isOpen ? 90 : 0)}deg);
`
@@ -70,7 +75,7 @@ const AnyCompositeRow: React.FC<{
isEven={leaf.n % 2 === 0}
>
-
+
{label}
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
index be6a28e..fd701c6 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
@@ -15,7 +15,6 @@ import GraphEditor from './GraphEditor/GraphEditor'
import type {PanelDims, SequenceEditorPanelLayout} from './layout/layout'
import {sequenceEditorPanelLayout} from './layout/layout'
import RightOverlay from './RightOverlay/RightOverlay'
-import BottomRectangleThingy from './BottomRectangleThingy/BottomRectangleThingy'
import BasePanel, {usePanel} from '@theatre/studio/panels/BasePanel/BasePanel'
import type {PanelPosition} from '@theatre/studio/store/types'
import PanelDragZone from '@theatre/studio/panels/BasePanel/PanelDragZone'
@@ -28,6 +27,17 @@ import {uniq} from 'lodash-es'
const Container = styled(PanelWrapper)``
+const LeftBackground = styled.div`
+ background-color: #282b2fed;
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ z-index: -1;
+ width: 200px;
+ pointer-events: none;
+`
+
export const zIndexes = (() => {
const scrollableArea = 0
const rightOverlay = scrollableArea + 1
@@ -57,13 +67,6 @@ const Header_Container = styled(PanelDragZone)`
z-index: 1;
`
-/**
- * @todo Add a message here
- */
-const EmptyPanel: React.FC<{width: number; height: number}> = (props) => (
-
-)
-
const defaultPosition: PanelPosition = {
edges: {
left: {from: 'screenLeft', distance: 0.1},
@@ -148,10 +151,11 @@ const Content: React.FC<{}> = () => {
const graphEditorOpen = val(layoutP.graphEditorDims.isOpen)
return (
+
-
+ {/* */}
{graphEditorOpen && (
)}
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts
index 6bdcb22..7319bde 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts
+++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts
@@ -156,7 +156,7 @@ export function sequenceEditorPanelLayout(
}
const graphEditorOpen = graphEditorState?.isOpen === true
- const bottomRectangleThingyHeight = 20
+ const bottomRectangleThingyHeight = 0
const graphEditorHeight = Math.floor(
(graphEditorOpen
? clamp(graphEditorState?.height ?? 0.5, 0.1, 0.7)