Merge branch 'open-source' into feature/open-source

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() {
         <AuthProvider>
           <KeyboardProvider>
             <ToastProvider>
+              <MigrationNotification />
               <Router>
                 <Switch>
                   {/* Legacy support camel case routes */}

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 (
+    <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>
+  );
+}

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
         </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}