More tweaks

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;
 `

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;

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}
       >
         <Head_Icon isOpen={true}>
-          <GoChevronRight />
+          <HiOutlineChevronRight />
         </Head_Icon>
         <Head_Label>{label}</Head_Label>
       </Header>

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) => (
-  <Container {...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 (
       <Container ref={containerRef}>
+        <LeftBackground />
         <FrameStampPositionProvider layoutP={layoutP}>
           <Header layoutP={layoutP} />
           <DopeSheet key={key + '-dopeSheet'} layoutP={layoutP} />
-          <BottomRectangleThingy layoutP={layoutP} />
+          {/* <BottomRectangleThingy layoutP={layoutP} /> */}
           {graphEditorOpen && (
             <GraphEditor key={key + '-graphEditor'} layoutP={layoutP} />
           )}

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)