diff --git a/src/App.tsx b/src/App.tsx index aab03d7..d3a7494 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,6 +16,7 @@ import { DatabaseProvider } from "./contexts/DatabaseContext"; import { UserIdProvider } from "./contexts/UserIdContext"; import { ToastProvider } from "./components/Toast"; +import { MigrationNotification } from "./MigrationNotification"; function App() { return ( @@ -24,6 +25,7 @@ function App() { + {/* Legacy support camel case routes */} diff --git a/src/MigrationNotification.tsx b/src/MigrationNotification.tsx new file mode 100644 index 0000000..bade90b --- /dev/null +++ b/src/MigrationNotification.tsx @@ -0,0 +1,40 @@ +import { useState } from "react"; +import { Box, Close, Link, Text } from "theme-ui"; + +export function MigrationNotification() { + const [closed, setClosed] = useState(false); + + if (closed) { + return null; + } + + return ( + + + + The new era of Owlbear Rodeo is coming on July 18th. Make sure to + migrate your data before July 18th.{" "} + + Read more + + + setClosed(true)} sx={{ minWidth: "32px" }} /> + + + ); +} diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index 08e27a0..9e44d33 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -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 - - - Check out our blog{" "} - for all the news on the next version of Owlbear Rodeo - -