emotion: TemplateDocsPage

aslilac · aslilac · commit 4ffc84a4d675 · 2023-10-31T20:32:25.000Z
diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
@@ -1,13 +1,13 @@
-import { makeStyles } from "@mui/styles";
-import { MemoizedMarkdown } from "components/Markdown/Markdown";
-import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
+import { useTheme } from "@emotion/react";
 import frontMatter from "front-matter";
 import { Helmet } from "react-helmet-async";
+import { MemoizedMarkdown } from "components/Markdown/Markdown";
+import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
 import { pageTitle } from "utils/page";
 
 export default function TemplateDocsPage() {
   const { template, activeVersion } = useTemplateLayoutContext();
-  const styles = useStyles();
+  const theme = useTheme();
 
   const readme = frontMatter(activeVersion.readme);
 
@@ -17,35 +17,34 @@ export default function TemplateDocsPage() {
         <title>{pageTitle(`${template.name} · Documentation`)}</title>
       </Helmet>
 
-      <div className={styles.markdownSection} id="readme">
-        <div className={styles.readmeLabel}>README.md</div>
-        <div className={styles.markdownWrapper}>
+      <div
+        css={{
+          background: theme.palette.background.paper,
+          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: theme.shape.borderRadius,
+        }}
+        id="readme"
+      >
+        <div
+          css={{
+            color: theme.palette.text.secondary,
+            fontWeight: 600,
+            padding: theme.spacing(2, 3),
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          }}
+        >
+          README.md
+        </div>
+        <div
+          css={{
+            padding: theme.spacing(0, 3, 5),
+            maxWidth: 800,
+            margin: "auto",
+          }}
+        >
           <MemoizedMarkdown>{readme.body}</MemoizedMarkdown>
         </div>
       </div>
     </>
   );
 }
-
-export const useStyles = makeStyles((theme) => {
-  return {
-    markdownSection: {
-      background: theme.palette.background.paper,
-      border: `1px solid ${theme.palette.divider}`,
-      borderRadius: theme.shape.borderRadius,
-    },
-
-    readmeLabel: {
-      color: theme.palette.text.secondary,
-      fontWeight: 600,
-      padding: theme.spacing(2, 3),
-      borderBottom: `1px solid ${theme.palette.divider}`,
-    },
-
-    markdownWrapper: {
-      padding: theme.spacing(0, 3, 5),
-      maxWidth: 800,
-      margin: "auto",
-    },
-  };
-});
