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 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() {
|
export function BetaNotification() {
|
||||||
const [isDismissed, setIsDismissed] = React.useState(true)
|
const [isDismissed, setIsDismissed] = React.useState(true)
|
||||||
|
@ -27,52 +29,65 @@ export function BetaNotification() {
|
||||||
if (isDismissed) return null
|
if (isDismissed) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<Panel>
|
||||||
style={{
|
<div>
|
||||||
position: 'absolute',
|
On April 4th 2023 at 9:30AM UTC, tldraw will be offline as we upgrade to our new version.
|
||||||
top: 40,
|
</div>
|
||||||
left: 0,
|
<div
|
||||||
zIndex: 999,
|
|
||||||
display: 'flex',
|
|
||||||
fontSize: 'var(--fontSizes-2)',
|
|
||||||
fontFamily: 'var(--fonts-ui)',
|
|
||||||
color: '#fff',
|
|
||||||
mixBlendMode: 'difference',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="https://beta.tldraw.com"
|
|
||||||
style={{
|
style={{
|
||||||
height: '48px',
|
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'space-between',
|
||||||
padding: 8,
|
marginRight: -14,
|
||||||
fontSize: 'inherit',
|
marginLeft: -14,
|
||||||
color: 'inherit',
|
marginBottom: -14,
|
||||||
}}
|
}}
|
||||||
title="Try the new tldraw at beta.tldraw.com"
|
|
||||||
>
|
>
|
||||||
Try the new tldraw!
|
<Button onClick={handleDismiss}>Dismiss</Button>
|
||||||
</a>
|
<Link href="https://tldraw.substack.com/p/tldraws-upcoming-re-launch" target="_blank">
|
||||||
<button
|
Learn more <ExternalLinkIcon style={{ marginLeft: 4, marginTop: 1, height: 14 }} />
|
||||||
style={{
|
</Link>
|
||||||
height: '48px',
|
</div>
|
||||||
display: 'flex',
|
</Panel>
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: 4,
|
|
||||||
color: 'inherit',
|
|
||||||
background: 'none',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
opacity: 0.8,
|
|
||||||
}}
|
|
||||||
title="Dismiss"
|
|
||||||
onClick={handleDismiss}
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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'
|
import { createStitches, defaultThemeMap } from '@stitches/react'
|
||||||
|
|
||||||
const { styled, globalCss, createTheme, getCssText } = createStitches({
|
const { styled, globalCss, createTheme, getCssText, css } = createStitches({
|
||||||
themeMap: {
|
themeMap: {
|
||||||
...defaultThemeMap,
|
...defaultThemeMap,
|
||||||
},
|
},
|
||||||
|
@ -143,4 +143,4 @@ const globalStyles = globalCss({
|
||||||
'*': { boxSizing: 'border-box' },
|
'*': { 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',
|
name: document.name || 'New Document',
|
||||||
fileHandle: fileHandle ?? null,
|
fileHandle: fileHandle ?? null,
|
||||||
document,
|
document,
|
||||||
assets: {},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Serialize to JSON
|
// Serialize to JSON
|
||||||
|
|
Loading…
Reference in a new issue