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>
This commit is contained in:
parent
ef089bf0f6
commit
1051f4c28c
3 changed files with 60 additions and 46 deletions
|
@ -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 (
|
||||
<Panel>
|
||||
<div>
|
||||
On April 4th 2023 at 9:30AM UTC, tldraw will be offline as we upgrade to our new version.
|
||||
</div>
|
||||
<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"
|
||||
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>
|
||||
<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)
|
||||
|
|
|
@ -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 }
|
||||
|
|
|
@ -34,7 +34,6 @@ export async function saveToFileSystem(
|
|||
name: document.name || 'New Document',
|
||||
fileHandle: fileHandle ?? null,
|
||||
document,
|
||||
assets: {},
|
||||
}
|
||||
|
||||
// Serialize to JSON
|
||||
|
|
Loading…
Reference in a new issue