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)
   }, [])
 
+  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>
+      </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>
-          <ExportInfo>
-            <InfoArrow />
-            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>
         </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(