Update migration notification
This commit is contained in:
parent
8cba6f42c1
commit
a0eae6bb5d
@ -1,22 +1,40 @@
|
||||
import { useEffect } from "react";
|
||||
import { useToasts } from "react-toast-notifications";
|
||||
import { Link } from "theme-ui";
|
||||
import { useState } from "react";
|
||||
import { Box, Close, Link, Text } from "theme-ui";
|
||||
|
||||
export function MigrationNotification() {
|
||||
const { addToast } = useToasts();
|
||||
|
||||
useEffect(() => {
|
||||
const message = (
|
||||
<span>
|
||||
The new era of Owlbear Rodeo is coming on July 18th. Make sure to
|
||||
migrate your data before July 18th. <Link href="https://blog.owlbear.rodeo/owlbear-rodeo-2-0-release-date-announcement/" target="_blank" rel="noopener noreferrer">Read more</Link>
|
||||
</span>
|
||||
);
|
||||
addToast(message, {
|
||||
autoDismiss: false,
|
||||
appearance: "info",
|
||||
});
|
||||
}, [addToast]);
|
||||
const [closed, setClosed] = useState(false);
|
||||
|
||||
if (closed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{ position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 1000 }}
|
||||
bg="highlight"
|
||||
>
|
||||
<Box
|
||||
m={2}
|
||||
mb={0}
|
||||
sx={{
|
||||
borderRadius: "4px",
|
||||
padding: "12px 16px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<Text as="p" variant="body2" sx={{ flexGrow: 1, textAlign: "center" }}>
|
||||
The new era of Owlbear Rodeo is coming on July 18th. Make sure to
|
||||
migrate your data before July 18th.{" "}
|
||||
<Link
|
||||
href="https://blog.owlbear.rodeo/owlbear-rodeo-2-0-release-date-announcement/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read more
|
||||
</Link>
|
||||
</Text>
|
||||
<Close onClick={() => setClosed(true)} sx={{ minWidth: "32px" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
@ -1,14 +1,5 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Flex,
|
||||
Button,
|
||||
Image,
|
||||
Text,
|
||||
IconButton,
|
||||
Link,
|
||||
Message,
|
||||
Paragraph,
|
||||
} from "theme-ui";
|
||||
import { Flex, Button, Image, Text, IconButton, Link } from "theme-ui";
|
||||
|
||||
import Footer from "../components/Footer";
|
||||
|
||||
@ -61,18 +52,6 @@ function Home() {
|
||||
Owlbear Rodeo
|
||||
</Text>
|
||||
<Image src={owlington} m={2} />
|
||||
<Message mb={4}>
|
||||
<Paragraph
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
fontFamily:
|
||||
"system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif",
|
||||
}}
|
||||
>
|
||||
Check out our <Link href="https://blog.owlbear.rodeo/">blog</Link>{" "}
|
||||
for all the news on the next version of Owlbear Rodeo
|
||||
</Paragraph>
|
||||
</Message>
|
||||
<Button
|
||||
variant="secondary"
|
||||
m={2}
|
||||
|
Loading…
Reference in New Issue
Block a user