Update migration notification

src/MigrationNotification.tsx

@@ -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();
+  const [closed, setClosed] = useState(false);
 
-  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]);
+  if (closed) {
+    return null;
+  }
 
-  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}