Styling for the export area

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

@@ -3,7 +3,62 @@ 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 React, {useCallback, useState} from 'react'
+import styled from 'styled-components'
+import {rowBgColor} from './propEditors/utils/SingleRowPropEditor'
+
+const Container = styled.div`
+  background-color: ${rowBgColor};
+`
+
+const TheExportRow = styled.div`
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  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;
+  border-radius: 2px;
+  border: 1px solid #627b7b87;
+  background-color: #4b787d3d;
+  color: #eaeaea;
+  font-weight: 400;
+  display: block;
+  appearance: none;
+  flex-grow: 1;
+  cursor: ${(props) => (props.disabled ? 'none' : 'pointer')};
+  opacity: ${(props) => (props.disabled ? 0.4 : 1)};
+
+  &:hover {
+    background-color: #7dc1c878;
+    border-color: #9ebcbf;
+  }
+`
 
 const ProjectDetails: React.FC<{
   projects: Project[]
@@ -17,8 +72,12 @@ const ProjectDetails: React.FC<{
     )
     if (!loadingState) return
     if (loadingState.type === 'browserStateIsNotBasedOnDiskState') {
+      /**
+       * This stuff is not undo-safe, but once we switch to the new persistence
+       * scheme, these will be unnecessary anyway.
+       */
       const useBrowserState = () => {
-        getStudio().transaction(({stateEditors}) => {
+        getStudio().transaction(({drafts, stateEditors}) => {
           stateEditors.coreByProject.historic.revisionHistory.add({
             projectId,
             revision: loadingState.onDiskState.revisionHistory[0],
@@ -28,12 +87,19 @@ const ProjectDetails: React.FC<{
             projectId,
             revision: generateDiskStateRevision(),
           })
+
+          drafts.ephemeral.coreByProject[projectId].loadingState = {
+            type: 'loaded',
+          }
         })
       }
 
       const useOnDiskState = () => {
         getStudio().transaction(({drafts}) => {
           drafts.historic.coreByProject[projectId] = loadingState.onDiskState
+          drafts.ephemeral.coreByProject[projectId].loadingState = {
+            type: 'loaded',
+          }
         })
       }
       return (
@@ -76,14 +142,25 @@ const ProjectDetails: React.FC<{
   return (
     <>
       {nn}
-      <div>
-        <button
+      <Container>
+        <TheExportRow>
+          <Button
             onClick={!downloaded ? exportProject : undefined}
             disabled={downloaded}
           >
-          Export project {downloaded ? 'Done' : ''}
-        </button>
-      </div>
+            {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>
     </>
   )
 }