Style tweaks

theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx

@@ -3,7 +3,8 @@ import {val} from '@theatre/dataverse'
 import {usePrism} from '@theatre/dataverse-react'
 import getStudio from '@theatre/studio/getStudio'
 import {generateDiskStateRevision} from '@theatre/studio/StudioStore/generateDiskStateRevision'
-import PopoverArrow from '@theatre/studio/uiComponents/Popover/PopoverArrow'
+import BasicPopover from '@theatre/studio/uiComponents/Popover/BasicPopover'
+import usePopover from '@theatre/studio/uiComponents/Popover/usePopover'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {rowBgColor} from './propEditors/utils/SingleRowPropEditor'
@@ -19,27 +20,6 @@ const TheExportRow = styled.div`
   align-items: stretch;
 `
 
-const ExportInfo = styled.div`
-  background-color: #515357;
-  padding: 6px 11px;
-  margin-top: 8px;
-  border: 1px solid #535353;
-  box-shadow: 0 13px 8px -4px #0000004f;
-  border-radius: 3px;
-  position: relative;
-
-  & a {
-    color: inherit;
-  }
-`
-
-const InfoArrow = styled(PopoverArrow)`
-  position: absolute;
-  top: -2px;
-  left: 18px;
-  color: #515357;
-`
-
 const Button = styled.button<{disabled?: boolean}>`
   text-align: center;
   padding: 8px;
@@ -60,6 +40,11 @@ const Button = styled.button<{disabled?: boolean}>`
   }
 `
 
+const ExportTooltip = styled(BasicPopover)`
+  width: 280px;
+  padding: 1em;
+`
+
 const ProjectDetails: React.FC<{
   projects: Project[]
 }> = ({projects}) => {
@@ -139,26 +124,35 @@ const ProjectDetails: React.FC<{
     }, 40000)
   }, [])
 
-  return (
-    <>
-      {nn}
-      <Container>
-        <TheExportRow>
-          <Button
-            onClick={!downloaded ? exportProject : undefined}
-            disabled={downloaded}
-          >
-            {downloaded ? '(Exported)' : `Export ${projectId} to JSON`}
-          </Button>
-          <ExportInfo>
-            <InfoArrow />
+  const [tooltip, openExportTooltip] = usePopover(
+    {pointerDistanceThreshold: 50},
+    () => (
+      <ExportTooltip>
         This will create a JSON file with the state of your project. You can
         commit this file to your git repo and include it in your production
         bundle.{' '}
         <a href="https://docs.theatrejs.com/export.html" target="_blank">
           Here is a quick guide on how to export to production.
         </a>
-          </ExportInfo>
+      </ExportTooltip>
+    ),
+  )
+
+  return (
+    <>
+      {nn}
+      {tooltip}
+      <Container>
+        <TheExportRow>
+          <Button
+            onMouseEnter={(e) =>
+              openExportTooltip(e, e.target as unknown as HTMLButtonElement)
+            }
+            onClick={!downloaded ? exportProject : undefined}
+            disabled={downloaded}
+          >
+            {downloaded ? '(Exported)' : `Export ${projectId} to JSON`}
+          </Button>
         </TheExportRow>
       </Container>
     </>

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

@@ -25,6 +25,10 @@ const Container = styled.div`
   border: 1px solid var(--popover-inner-stroke);
   box-shadow: 0 6px 8px -4px black, 0 0 0 1px var(--popover-outer-stroke);
   backdrop-filter: blur(8px);
+
+  & a {
+    color: inherit;
+  }
 `
 
 const BasicPopover: React.FC<{className?: string}> = React.forwardRef(