emotion: SettingsLayout

aslilac · aslilac · commit 9e453d1f4f8f · 2023-10-30T17:54:38.000Z
diff --git a/site/src/components/SettingsLayout/SettingsLayout.tsx b/site/src/components/SettingsLayout/SettingsLayout.tsx
@@ -1,16 +1,14 @@
-import { makeStyles } from "@mui/styles";
-import { Sidebar } from "./Sidebar";
-import { Stack } from "components/Stack/Stack";
-import { FC, Suspense } from "react";
+import { type FC, Suspense } from "react";
+import { Outlet } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
-import { Margins } from "../Margins/Margins";
 import { useMe } from "hooks/useMe";
 import { Loader } from "components/Loader/Loader";
-import { Outlet } from "react-router-dom";
+import { Stack } from "components/Stack/Stack";
+import { Margins } from "../Margins/Margins";
+import { Sidebar } from "./Sidebar";
 
 export const SettingsLayout: FC = () => {
-  const styles = useStyles();
   const me = useMe();
 
   return (
@@ -20,10 +18,21 @@ export const SettingsLayout: FC = () => {
       </Helmet>
 
       <Margins>
-        <Stack className={styles.wrapper} direction="row" spacing={6}>
+        <Stack
+          css={(theme) => ({
+            padding: theme.spacing(6, 0),
+          })}
+          direction="row"
+          spacing={6}
+        >
           <Sidebar user={me} />
           <Suspense fallback={<Loader />}>
-            <main className={styles.content}>
+            <main
+              css={{
+                maxWidth: 800,
+                width: "100%",
+              }}
+            >
               <Outlet />
             </main>
           </Suspense>
@@ -32,14 +41,3 @@ export const SettingsLayout: FC = () => {
     </>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  wrapper: {
-    padding: theme.spacing(6, 0),
-  },
-
-  content: {
-    maxWidth: 800,
-    width: "100%",
-  },
-}));
