From 6cac52675e73506a9dcc6b72bf072cfdc8ac13a6 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Sun, 22 Aug 2021 11:47:00 +0200
Subject: [PATCH] Style tweaks

---
 .../src/panels/OutlinePanel/BaseItem.tsx      | 19 +++++++++----------
 .../src/panels/OutlinePanel/OutlinePanel.tsx  |  2 +-
 .../src/uiComponents/Popover/BasicTooltip.tsx |  2 +-
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index e6582a7..23799ee 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
@@ -3,7 +3,6 @@ import React from 'react'
 import {GoChevronRight, DiHtml53DEffects} from 'react-icons/all'
 import styled, {css} from 'styled-components'
 import noop from '@theatre/shared/utils/noop'
-import {darken, lighten} from 'polished'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
 
 export const Container = styled.li`
@@ -40,22 +39,22 @@ const Header = styled(BaseHeader)`
   &.descendant-is-selected {
     color: rgba(255, 255, 255, 0.9);
 
-    --item-bg: ${() => darken(0.1, baseBg)};
-    --item-border-color: ${baseBorderColor};
+    --item-bg: #2e4244ed;
+    --item-border-color: #254355;
   }
 
   &:hover {
     color: #fff;
 
-    --item-bg: ${() => darken(0.12, baseBg)};
-    --item-border-color: ${lighten(0.1, baseBorderColor)};
+    --item-bg: #1e5866;
+    --item-border-color: #152f42;
   }
 
   &.selected {
-    color: #fff;
+    color: rgba(255, 255, 255, 0.9);
 
-    --item-bg: ${() => darken(0.15, baseBg)};
-    --item-border-color: ${lighten(0.05, baseBorderColor)};
+    --item-bg: #1e5866;
+    --item-border-color: #152f42;
   }
 `
 
@@ -81,7 +80,7 @@ const Head_Label = styled.span`
   &:after {
     border: 1px solid var(--item-border-color);
     position: absolute;
-    inset: -1px;
+    inset: 0px;
     display: block;
     content: ' ';
     z-index: -1;
@@ -121,7 +120,7 @@ const Head_IconContainer = styled.span`
     inset: 0px;
     z-index: -1;
     background-color: var(--item-bg);
-    opacity: 1;
+    opacity: 0.6;
     border-radius: 2px;
   }
 `
diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
index b9059a1..9dae867 100644
--- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
@@ -144,7 +144,7 @@ const OutlinePanel: React.FC<{}> = (props) => {
   }, [])
 
   const [triggerTooltip, triggerButtonRef] = useTooltip(
-    {enterDelay: conflicts.length > 0 ? 0 : 200},
+    {enabled: conflicts.length > 0, enterDelay: conflicts.length > 0 ? 0 : 200},
     () =>
       conflicts.length > 0 ? (
         <ErrorTooltip>
diff --git a/theatre/studio/src/uiComponents/Popover/BasicTooltip.tsx b/theatre/studio/src/uiComponents/Popover/BasicTooltip.tsx
index e4ce5fe..9f6426d 100644
--- a/theatre/studio/src/uiComponents/Popover/BasicTooltip.tsx
+++ b/theatre/studio/src/uiComponents/Popover/BasicTooltip.tsx
@@ -4,7 +4,7 @@ import BasicPopover from './BasicPopover'
 const BasicTooltip = styled(BasicPopover)`
   padding: 1em;
   max-width: 240px;
-  pointer-events: none;
+  pointer-events: none !important;
   --popover-outer-stroke: transparent;
   --popover-inner-stroke: #45464d;
 `