From 7f30f08bd0acb23a3d7530adabafede7c858cae3 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Fri, 9 Jul 2021 18:02:14 +0200
Subject: [PATCH] More style tweaks

---
 .../propEditors/CompoundPropEditor.tsx               |  9 +++++----
 theatre/studio/src/panels/OutlinePanel/BaseItem.tsx  | 12 ++++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
index 65cbf96..ac584cd 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
@@ -9,7 +9,7 @@ import {getPointerParts} from '@theatre/dataverse'
 import last from 'lodash-es/last'
 import {darken} from 'polished'
 import React from 'react'
-import {GoChevronRight} from 'react-icons/go'
+import {HiOutlineChevronRight} from 'react-icons/all'
 import styled from 'styled-components'
 import DeterminePropEditor from './DeterminePropEditor'
 import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors'
@@ -29,8 +29,9 @@ const Header = styled.div`
 
 const IconContainer = styled.div`
   width: 12px;
-  margin-right: 8px;
-  font-size: 13px;
+  margin-right: 6px;
+  font-size: 9px;
+  text-align: center;
   transform: rotateZ(90deg);
 `
 
@@ -69,7 +70,7 @@ const CompoundPropEditor: React.FC<{
         {
           <Header>
             <IconContainer>
-              <GoChevronRight />
+              <HiOutlineChevronRight />
             </IconContainer>
             <PropName>{propName || 'props'}</PropName>
             <NextPrevKeyframeCursors
diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index ae24286..a189bac 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
@@ -1,10 +1,11 @@
 import {theme} from '@theatre/studio/css'
 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 noop from '@theatre/shared/utils/noop'
 import {lighten} from 'polished'
+import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
 
 export const Container = styled.li<{depth: number}>`
   --depth: ${(props) => props.depth};
@@ -43,7 +44,9 @@ const Header = styled(BaseHeader)<{
   }
 `
 
-const Head_Label = styled.span``
+const Head_Label = styled.span`
+  ${propNameText}
+`
 
 const Head_IconContainer = styled.span`
   width: 12px;
@@ -52,7 +55,7 @@ const Head_IconContainer = styled.span`
 
 const Head_Icon = styled.span<{isOpen: boolean}>`
   width: 12px;
-  font-size: 13px;
+  font-size: 9px;
   transform: rotateZ(${(props) => (props.isOpen ? 90 : 0)}deg);
 `
 
@@ -82,7 +85,8 @@ const BaseItem: React.FC<{
         <Head_IconContainer>
           {canContainChildren && (
             <Head_Icon isOpen={true}>
-              <GoChevronRight />
+              {/* <GoChevronRight /> */}
+              <HiOutlineChevronRight />
             </Head_Icon>
           )}
         </Head_IconContainer>