Add notice that tldraw will be down for maintenance (#1174)

* alex/offline-notice: offline notice

* alex/offline-notice: cleanup

* update copy

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

apps/www/components/BetaNotification.tsx

@@ -1,6 +1,8 @@
+import { ExternalLinkIcon } from '@radix-ui/react-icons'
 import React, { useLayoutEffect } from 'react'
+import { css, styled } from '~styles'
 
-const STORAGE_KEY = 'tldraw_dismiss_beta_notification_2'
+const STORAGE_KEY = 'tldraw_dismiss_beta_notification_3'
 
 export function BetaNotification() {
   const [isDismissed, setIsDismissed] = React.useState(true)
@@ -27,52 +29,65 @@ export function BetaNotification() {
   if (isDismissed) return null
 
   return (
-    <div
-      style={{
-        position: 'absolute',
-        top: 40,
-        left: 0,
-        zIndex: 999,
-        display: 'flex',
-        fontSize: 'var(--fontSizes-2)',
-        fontFamily: 'var(--fonts-ui)',
-        color: '#fff',
-        mixBlendMode: 'difference',
-      }}
-    >
-      <a
-        href="https://beta.tldraw.com"
+    <Panel>
+      <div>
+        On April 4th 2023 at 9:30AM UTC, tldraw will be offline as we upgrade to our new version.
+      </div>
+      <div
         style={{
-          height: '48px',
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'center',
-          padding: 8,
-          fontSize: 'inherit',
-          color: 'inherit',
+          justifyContent: 'space-between',
+          marginRight: -14,
+          marginLeft: -14,
+          marginBottom: -14,
         }}
-        title="Try the new tldraw at beta.tldraw.com"
       >
-        Try the new tldraw!
-      </a>
-      <button
-        style={{
-          height: '48px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: 4,
-          color: 'inherit',
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          opacity: 0.8,
-        }}
-        title="Dismiss"
-        onClick={handleDismiss}
-      >
-        ×
-      </button>
-    </div>
+        <Button onClick={handleDismiss}>Dismiss</Button>
+        <Link href="https://tldraw.substack.com/p/tldraws-upcoming-re-launch" target="_blank">
+          Learn more <ExternalLinkIcon style={{ marginLeft: 4, marginTop: 1, height: 14 }} />
+        </Link>
+      </div>
+    </Panel>
   )
 }
+
+const Panel = styled('div', {
+  position: 'absolute',
+  top: 42,
+  left: 0,
+  margin: 16,
+  zIndex: 999,
+  backgroundColor: '$panel',
+  flexDirection: 'column',
+  boxShadow: '$panel',
+  padding: 16,
+  fontSize: 'var(--fontSizes-2)',
+  fontFamily: 'var(--fonts-ui)',
+  width: 300,
+  display: 'flex',
+  gap: 8,
+  border: '1px solid $panelContrast',
+  overflow: 'hidden',
+  borderRadius: 9,
+})
+
+const buttonStyles = css({
+  borderRadius: '$2',
+  backgroundColor: '$panel',
+  padding: '0 14px',
+  height: 40,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'inherit',
+  font: 'inherit',
+  cursor: 'pointer',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '$hover',
+  },
+})
+
+const Button = styled('button', buttonStyles)
+const Link = styled('a', buttonStyles)

apps/www/styles/stitches.config.ts

@@ -1,6 +1,6 @@
 import { createStitches, defaultThemeMap } from '@stitches/react'
 
-const { styled, globalCss, createTheme, getCssText } = createStitches({
+const { styled, globalCss, createTheme, getCssText, css } = createStitches({
   themeMap: {
     ...defaultThemeMap,
   },
@@ -143,4 +143,4 @@ const globalStyles = globalCss({
   '*': { boxSizing: 'border-box' },
 })
 
-export { styled, getCssText, globalStyles, light, dark }
+export { styled, getCssText, globalStyles, light, dark, css }

packages/tldraw/src/state/data/filesystem.ts

@@ -34,7 +34,6 @@ export async function saveToFileSystem(
     name: document.name || 'New Document',
     fileHandle: fileHandle ?? null,
     document,
-    assets: {},
   }
 
   // Serialize to JSON