Nicer look for the arrow on top of popover

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

@@ -3,14 +3,18 @@ import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
 import {transparentize} from 'polished'
 import React from 'react'
 import styled from 'styled-components'
-import PopoverArrow, {popoverArrowColor} from './PopoverArrow'
+import PopoverArrow, {popoverArrowColors} from './PopoverArrow'
 
 export const popoverBackgroundColor = transparentize(0.05, `#2a2a31`)
 
 const Container = styled.div`
   position: absolute;
   background: ${popoverBackgroundColor};
-  ${popoverArrowColor(popoverBackgroundColor)};
+  ${popoverArrowColors({
+    fill: popoverBackgroundColor,
+    innerStroke: `#505159`,
+    outerStroke: `black`,
+  })};
   color: white;
   padding: 0;
   margin: 0;

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

@@ -1,14 +1,22 @@
 import React, {forwardRef, useContext} from 'react'
-import {GoTriangleUp} from 'react-icons/all'
 import styled, {css} from 'styled-components'
 import ArrowContext from './ArrowContext'
 
-export const popoverArrowColor = (color: string) => css`
-  --popover-arrow-color: ${color};
+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`
-  font-size: 18px;
   position: absolute;
   width: 0;
   height: 0;
@@ -16,11 +24,11 @@ const Container = styled.div`
 `
 
 const Adjust = styled.div`
-  width: 20px;
-  height: 18px;
+  width: 12px;
+  height: 8px;
   position: absolute;
-  left: -10px;
-  top: -11px;
+  left: -7px;
+  top: -8px;
   text-align: center;
 `
 
@@ -29,12 +37,34 @@ type Props = {
   color?: string
 }
 
+const InnerTriangle = styled.path`
+  fill: var(--popover-arrow-fill);
+`
+
+const InnerStroke = styled.path`
+  fill: var(--popover-arrow-inner-stroke);
+`
+
+const OuterStroke = styled.path`
+  fill: var(--popover-arrow-outer-stroke);
+`
+
 const PopoverArrow = forwardRef<HTMLDivElement, Props>(({className}, ref) => {
   const arrowStyle = useContext(ArrowContext)
   return (
     <Container className={className} ref={ref} style={{...arrowStyle}}>
       <Adjust>
-        <GoTriangleUp size={'18px'} />
+        <svg
+          width="12"
+          height="8"
+          viewBox="0 0 12 8"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <OuterStroke d="M6 0L0 6H12L6 0Z" />
+          <InnerStroke d="M6 1.5L0 7.5H12L6 1.5Z" />
+          <InnerTriangle d="M6 3L0 9H12L6 3Z" />
+        </svg>
       </Adjust>
     </Container>
   )