emotion: NotFoundPage

aslilac · aslilac · commit 51ca0b92933a · 2023-10-31T18:33:29.000Z
diff --git a/site/src/pages/404Page/404Page.tsx b/site/src/pages/404Page/404Page.tsx
@@ -1,34 +1,30 @@
-import { makeStyles } from "@mui/styles";
 import Typography from "@mui/material/Typography";
-import { FC } from "react";
+import { type FC } from "react";
 
 export const NotFoundPage: FC = () => {
-  const styles = useStyles();
-
   return (
-    <div className={styles.root}>
-      <div className={styles.headingContainer}>
+    <div
+      css={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <div
+        css={(theme) => ({
+          margin: theme.spacing(1),
+          padding: theme.spacing(1),
+          borderRight: theme.palette.divider,
+        })}
+      >
         <Typography variant="h4">404</Typography>
       </div>
       <Typography variant="body2">This page could not be found.</Typography>
     </div>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  headingContainer: {
-    margin: theme.spacing(1),
-    padding: theme.spacing(1),
-    borderRight: theme.palette.divider,
-  },
-}));
-
 export default NotFoundPage;
