Style tweaks

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx

@@ -71,8 +71,8 @@ const Tooltip = styled.div`
   margin-top: 8px;
   font-size: 10px;
   white-space: nowrap;
-  padding: 1px 8px;
+  padding: 2px 8px;
-  border-radius: 0 2px 2px 0;
+  border-radius: 2px;
   ${pointerEventsAutoInNormalMode};
   cursor: ew-resize;
   color: #464646;
@@ -182,7 +182,7 @@ const LengthIndicator: React.FC<IProps> = ({layoutP}) => {
           <ThumbContainer>
             <Tumb
               ref={nodeRef}
-              title="Length of the sequence. Drag or click to change."
+              // title="Length of the sequence. Drag or click to change."
               onClick={(e) => {
                 openPopover(e, node!)
               }}
@@ -192,6 +192,7 @@ const LengthIndicator: React.FC<IProps> = ({layoutP}) => {
               <GoChevronRight />
             </Tumb>
             <Tooltip>
+              Sequence length:{' '}
               {sequence.positionFormatter.formatBasic(sequenceLength)}
             </Tooltip>
           </ThumbContainer>

theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx

@@ -11,7 +11,7 @@ const Container = styled.div`
   top: 12px;
   right: 12px;
   left: 12px;
-  height: 28px;
+  height: 36px;
   pointer-events: none;
 
   display: flex;
@@ -19,6 +19,16 @@ const Container = styled.div`
   justify-content: center;
 `
 
+const Bg = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+
+  padding: 6px 6px;
+`
+
 const GlobalToolbar: React.FC<{}> = (props) => {
   const groups: Array<React.ReactNode> = []
   const extensionsById = useVal(getStudio().atomP.ephemeral.extensions.byId)
@@ -34,7 +44,13 @@ const GlobalToolbar: React.FC<{}> = (props) => {
     }
   }
 
-  return <Container>{groups}</Container>
+  if (groups.length === 0) return null
+
+  return (
+    <Container>
+      <Bg>{groups}</Bg>
+    </Container>
+  )
 }
 
 export default GlobalToolbar

theatre/studio/src/uiComponents/Popover/BasicPopover.tsx

@@ -3,18 +3,18 @@ import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
 import {transparentize} from 'polished'
 import React from 'react'
 import styled from 'styled-components'
-import PopoverArrow, {popoverArrowColors} from './PopoverArrow'
+import PopoverArrow from './PopoverArrow'
 
 export const popoverBackgroundColor = transparentize(0.05, `#2a2a31`)
 
 const Container = styled.div`
   position: absolute;
-  background: ${popoverBackgroundColor};
+  --popover-bg: ${popoverBackgroundColor};
-  ${popoverArrowColors({
+  --popover-inner-stroke: #505159;
-    fill: popoverBackgroundColor,
+  --popover-outer-stroke: #111;
-    innerStroke: `#505159`,
+
-    outerStroke: `black`,
+  background: var(--popover-bg);
-  })};
+
   color: white;
   padding: 0;
   margin: 0;
@@ -22,8 +22,8 @@ const Container = styled.div`
   ${pointerEventsAutoInNormalMode};
   border-radius: 3px;
   z-index: 10000;
-  border: 1px solid #505159;
+  border: 1px solid var(--popover-inner-stroke);
-  box-shadow: 0 6px 8px -4px black, 0 0 0 1px black;
+  box-shadow: 0 6px 8px -4px black, 0 0 0 1px var(--popover-outer-stroke);
   backdrop-filter: blur(8px);
 `
 

theatre/studio/src/uiComponents/Popover/BasicTooltip.tsx

@@ -5,6 +5,8 @@ const BasicTooltip = styled(BasicPopover)`
   padding: 1em;
   max-width: 240px;
   pointer-events: none;
+  --popover-outer-stroke: transparent;
+  --popover-inner-stroke: #45464d;
 `
 
 export default BasicTooltip

theatre/studio/src/uiComponents/Popover/PopoverArrow.tsx

@@ -1,26 +1,13 @@
 import React, {forwardRef, useContext} from 'react'
-import styled, {css} from 'styled-components'
+import styled from 'styled-components'
 import ArrowContext from './ArrowContext'
 
-export const popoverArrowColors = ({
-  fill,
-  innerStroke,
-  outerStroke,
-}: {
-  fill: string
-  innerStroke: string
-  outerStroke: string
-}) => css`
-  --popover-arrow-fill: ${fill};
-  --popover-arrow-inner-stroke: ${innerStroke};
-  --popover-arrow-outer-stroke: ${outerStroke};
-`
-
 const Container = styled.div`
   position: absolute;
   width: 0;
   height: 0;
   color: var(--popover-arrow-color);
+  pointer-events: none;
 `
 
 const Adjust = styled.div`
@@ -38,15 +25,15 @@ type Props = {
 }
 
 const InnerTriangle = styled.path`
-  fill: var(--popover-arrow-fill);
+  fill: var(--popover-bg);
 `
 
 const InnerStroke = styled.path`
-  fill: var(--popover-arrow-inner-stroke);
+  fill: var(--popover-inner-stroke);
 `
 
 const OuterStroke = styled.path`
-  fill: var(--popover-arrow-outer-stroke);
+  fill: var(--popover-outer-stroke);
 `
 
 const PopoverArrow = forwardRef<HTMLDivElement, Props>(({className}, ref) => {

theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx

@@ -1,6 +1,4 @@
 import styled from 'styled-components'
-import {outlinePanelTheme} from '@theatre/studio/panels/OutlinePanel/BaseItem'
-import {darken, opacify} from 'polished'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
 import React from 'react'
 import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
@@ -8,8 +6,6 @@ import useTooltip from '@theatre/studio/uiComponents/Popover/useTooltip'
 import mergeRefs from 'react-merge-refs'
 import MinimalTooltip from '@theatre/studio/uiComponents/Popover/MinimalTooltip'
 
-const {baseBg, baseBorderColor, baseFontColor} = outlinePanelTheme
-
 const Container = styled.button`
   ${pointerEventsAutoInNormalMode};
   position: relative;
@@ -22,27 +18,29 @@ const Container = styled.button`
   height: 24px;
   outline: none;
 
-  color: ${baseFontColor};
+  color: rgba(255, 255, 255, 0.75);
-  --item-bg: ${baseBg};
+  background-color: rgb(47, 49, 53);
-  --item-border-color: ${baseBorderColor};
-  background-color: var(--item-bg);
 
   &:hover {
-    color: ${opacify(1, baseFontColor)};
+    color: #fff;
 
-    --item-bg: ${() => darken(0.07, baseBg)};
+    background-color: rgba(28, 30, 32, 0.95);
-    --item-border-color: ${opacify(0.1, baseBorderColor)};
+    &:after {
+      border-color: rgba(90, 90, 90, 1);
+    }
   }
 
   &.selected {
-    color: ${opacify(1, baseFontColor)};
+    color: #fff;
 
-    --item-bg: ${() => darken(0.15, baseBg)};
+    background-color: rgba(17, 18, 20, 0.95);
-    --item-border-color: ${opacify(0, baseBorderColor)};
+    &:after {
+      border-color: rgb(43, 43, 43);
+    }
   }
 
   &:before {
-    border: 1px solid var(--item-border-color);
+    border: 1px solid rgb(62, 62, 62);
     position: absolute;
     inset: -1px;
     display: block;
@@ -51,7 +49,7 @@ const Container = styled.button`
     pointer-events: none;
     border-radius: 2px;
     box-sizing: border-box;
-    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 3px 4px -3px rgba(0, 0, 0, 0.49);
   }
 
   border: 0;