From 997a516f87fd15a0540ce22f7c414f4011e6a56a Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Fri, 16 Jul 2021 11:09:05 +0200
Subject: [PATCH] Adjusted alignment of prop editors

---
 .../panels/ObjectEditorPanel/ObjectEditorPanel.tsx |  6 +++---
 .../propEditors/CompoundPropEditor.tsx             | 14 ++++++++------
 .../propEditors/utils/SingleRowPropEditor.tsx      |  7 +++++--
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
index e4de85f..4c1dc0c 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
@@ -16,8 +16,8 @@ const Container = styled(PanelWrapper)`
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
-  /* background-color: transparent; */
-  background-color: #282b2ff0;
+  background-color: transparent;
+  /* background-color: #282b2ff0; */
   box-shadow: none;
 
   &:after {
@@ -28,7 +28,7 @@ const Container = styled(PanelWrapper)`
     width: 1px;
     bottom: 0;
     top: 0;
-    border-left: 1px solid #3a3a44;
+    /* border-left: 1px solid #3a3a44; */
   }
 `
 
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
index 75b8f9f..cd5e037 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
@@ -20,15 +20,15 @@ const Container = styled.div`
 `
 
 export const rowBg = css`
-  /* &:after {
+  &:after {
     position: absolute;
     display: block;
-    inset: 0px 0 0px calc(10px + var(--left-pad) + var(--depth) * var(--step));
+    inset: 0px 0 1px calc(0px + var(--left-pad) + var(--depth) * var(--step));
     content: ' ';
     z-index: -1;
     background-color: #282b2f;
-    opacity: 0.97;
-  } */
+    opacity: 0.95;
+  }
 `
 
 const Header = styled.div`
@@ -42,15 +42,17 @@ const Header = styled.div`
   ${rowBg};
 `
 
+export const indentationFormula = `calc(var(--left-pad) + var(--depth) * var(--step))`
+
 const IconContainer = styled.div`
   width: 12px;
   margin-right: -12px;
-  margin-left: calc(var(--left-pad) + var(--depth) * var(--step));
+  margin-left: ${indentationFormula};
   font-size: 9px;
   text-align: center;
   transform: rotateZ(90deg);
   position: relative;
-  left: -10px;
+  left: -14px;
 `
 
 const PropName = styled.div`
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx
index 779063f..f8291e1 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx
@@ -8,7 +8,10 @@ import React from 'react'
 import type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
 import {shadeToColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
 import styled, {css} from 'styled-components'
-import {rowBg} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/CompoundPropEditor'
+import {
+  indentationFormula,
+  rowBg,
+} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/CompoundPropEditor'
 
 export const propNameText = css`
   font-weight: 300;
@@ -34,7 +37,7 @@ const Row = styled.div`
 
 const Left = styled.div`
   box-sizing: border-box;
-  padding-left: calc(var(--left-pad) + (var(--depth) + 1) * var(--step));
+  padding-left: ${indentationFormula};
   padding-right: 4px;
   display: flex;
   flex-direction: row;