From a939abd017018f8c7be60a0b9f0696c93a89bb73 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Fri, 23 Jul 2021 22:34:26 +0200
Subject: [PATCH] Style tweaks

---
 .../studio/src/panels/BasePanel/BasePanel.tsx |  8 ------
 .../panels/BasePanel/PanelResizeHandle.tsx    | 25 +++++++++++++++----
 .../ObjectEditorPanel/ObjectEditorPanel.tsx   |  2 +-
 .../src/panels/OutlinePanel/OutlinePanel.tsx  |  3 ++-
 .../SequenceEditorPanel.tsx                   |  1 +
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/theatre/studio/src/panels/BasePanel/BasePanel.tsx b/theatre/studio/src/panels/BasePanel/BasePanel.tsx
index e9b8447..480b029 100644
--- a/theatre/studio/src/panels/BasePanel/BasePanel.tsx
+++ b/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
diff --git a/theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx b/theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx
index e405074..232240f 100644
--- a/theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx
+++ b/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]}}
     />
   )
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
index d812d72..ffe2918 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
+++ b/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};
 
diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
index 682eb75..71c8594 100644
--- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
+++ b/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);
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
index 873dc47..49fb239 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
+++ b/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`