Style tweaks

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

@@ -6,14 +6,6 @@ import type {PanelPosition} from '@theatre/studio/store/types'
 import useLockSet from '@theatre/studio/uiComponents/useLockSet'
 import React, {useContext} from 'react'
 import useWindowSize from 'react-use/esm/useWindowSize'
-import styled from 'styled-components'
-
-const Container = styled.div`
-  position: absolute;
-  box-sizing: border-box;
-  pointer-events: auto;
-  z-index: 1000;
-`
 
 type PanelStuff = {
   panelId: string

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

@@ -8,7 +8,7 @@ import React, {useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {panelDimsToPanelPosition, usePanel} from './BasePanel'
 
-const Base = styled.div<{isDragging: boolean}>`
+const Base = styled.div`
   position: absolute;
   z-index: 10;
   pointer-events: auto;
@@ -21,9 +21,19 @@ const Base = styled.div<{isDragging: boolean}>`
     display: block;
     content: ' ';
   }
-  opacity: ${(props) => (props.isDragging ? 1 : 0)};
-  background: ${(props) =>
-    props.isDragging ? lighten(0.2, '#478698') : '#478698'};
+
+  opacity: 0;
+  background-color: #478698;
+
+  &.isHighlighted {
+    opacity: 0.7;
+  }
+
+  &.isDragging {
+    opacity: 1;
+    /* background-color: ${lighten(0.2, '#478698')}; */
+  }
+
   &:hover {
     opacity: 1;
   }
@@ -211,10 +221,15 @@ const PanelResizeHandle: React.FC<{
   useDrag(node, dragOpts)
   const Comp = els[which]
 
+  const isOnCorner = which.length <= 6
+
   return (
     <Comp
       ref={ref}
-      isDragging={isDragging || panelStuff.boundsHighlighted}
+      className={[
+        isDragging ? 'isDragging' : '',
+        panelStuff.boundsHighlighted && isOnCorner ? 'isHighlighted' : '',
+      ].join(' ')}
       style={{cursor: cursors[which]}}
     />
   )

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

@@ -17,7 +17,7 @@ const Container = styled.div`
   position: absolute;
   left: 0;
   right: 0;
-  top: 50px;
+  top: 10px;
   bottom: 8px;
   z-index: ${panelZIndexes.propsPanel};
 

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

@@ -9,7 +9,7 @@ const Container = styled.div`
   position: absolute;
   left: 0;
   top: 50px;
-  bottom: 8px;
+  bottom: 0px;
   right: 0;
   z-index: ${panelZIndexes.outlinePanel};
 
@@ -35,6 +35,7 @@ const Content = styled.div`
   flex-direction: column;
   transform: translateX(-100%);
   pointer-events: auto;
+  /* background-color: blue; */
 
   ${Container}:hover & {
     transform: translateX(0);

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

@@ -30,6 +30,7 @@ import {
 
 const Container = styled(PanelWrapper)`
   z-index: ${panelZIndexes.sequenceEditorPanel};
+  box-shadow: 2px 2px 0 rgb(0 0 0 / 11%);
 `
 
 const LeftBackground = styled.div`