emotion: TemplateSettingsLayout

aslilac · aslilac · commit 0b1874e0ded7 · 2023-10-30T19:43:16.000Z
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
@@ -1,18 +1,17 @@
-import { makeStyles } from "@mui/styles";
-import { Sidebar } from "./Sidebar";
-import { Stack } from "components/Stack/Stack";
-import { createContext, FC, Suspense, useContext } from "react";
+import { createContext, type FC, Suspense, useContext } from "react";
 import { Helmet } from "react-helmet-async";
+import { useQuery } from "react-query";
 import { pageTitle } from "utils/page";
+import { Stack } from "components/Stack/Stack";
 import { Loader } from "components/Loader/Loader";
 import { Outlet, useParams } from "react-router-dom";
 import { Margins } from "components/Margins/Margins";
-import { useQuery } from "react-query";
 import { useOrganizationId } from "hooks/useOrganizationId";
 import { templateByName } from "api/queries/templates";
-import { type AuthorizationResponse, type Template } from "api/typesGenerated";
+import type { AuthorizationResponse, Template } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { checkAuthorization } from "api/queries/authCheck";
+import { Sidebar } from "./Sidebar";
 
 const TemplateSettings = createContext<
   { template: Template; permissions: AuthorizationResponse } | undefined
@@ -28,7 +27,6 @@ export function useTemplateSettings() {
 }
 
 export const TemplateSettingsLayout: FC = () => {
-  const styles = useStyles();
   const orgId = useOrganizationId();
   const { template: templateName } = useParams() as { template: string };
   const templateQuery = useQuery(templateByName(orgId, templateName));
@@ -58,7 +56,13 @@ export const TemplateSettingsLayout: FC = () => {
       </Helmet>
 
       <Margins>
-        <Stack className={styles.wrapper} direction="row" spacing={10}>
+        <Stack
+          css={(theme) => ({
+            padding: theme.spacing(6, 0),
+          })}
+          direction="row"
+          spacing={10}
+        >
           {templateQuery.isError || permissionsQuery.isError ? (
             <ErrorAlert error={templateQuery.error} />
           ) : (
@@ -70,7 +74,11 @@ export const TemplateSettingsLayout: FC = () => {
             >
               <Sidebar template={templateQuery.data} />
               <Suspense fallback={<Loader />}>
-                <main className={styles.content}>
+                <main
+                  css={{
+                    width: "100%",
+                  }}
+                >
                   <Outlet />
                 </main>
               </Suspense>
@@ -81,13 +89,3 @@ export const TemplateSettingsLayout: FC = () => {
     </>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  wrapper: {
-    padding: theme.spacing(6, 0),
-  },
-
-  content: {
-    width: "100%",
-  },
-}));
