emotion: ExternalAuthSettingsPageView

aslilac · aslilac · commit 5703ff072372 · 2023-10-31T20:46:29.000Z
diff --git a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
@@ -1,11 +1,11 @@
-import { makeStyles } from "@mui/styles";
+import { css, useTheme } from "@emotion/react";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import { DeploymentValues, ExternalAuthConfig } from "api/typesGenerated";
+import type { DeploymentValues, ExternalAuthConfig } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { EnterpriseBadge } from "components/DeploySettingsLayout/Badges";
 import { Header } from "components/DeploySettingsLayout/Header";
@@ -18,7 +18,7 @@ export type ExternalAuthSettingsPageViewProps = {
 export const ExternalAuthSettingsPageView = ({
   config,
 }: ExternalAuthSettingsPageViewProps): JSX.Element => {
-  const styles = useStyles();
+  const theme = useTheme();
 
   return (
     <>
@@ -40,15 +40,32 @@ export const ExternalAuthSettingsPageView = ({
         }}
       />
 
-      <div className={styles.description}>
+      <div
+        css={{
+          marginTop: theme.spacing(3),
+          marginBottom: theme.spacing(3),
+        }}
+      >
         <Alert severity="info" actions={<EnterpriseBadge key="enterprise" />}>
           Integrating with multiple External authentication providers is an
           Enterprise feature.
         </Alert>
       </div>
 
       <TableContainer>
-        <Table className={styles.table}>
+        <Table
+          css={css`
+            & td {
+              padding-top: ${theme.spacing(3)};
+              padding-bottom: ${theme.spacing(3)};
+            }
+
+            & td:last-child,
+            & th:last-child {
+              padding-left: ${theme.spacing(4)};
+            }
+          `}
+        >
           <TableHead>
             <TableRow>
               <TableCell width="25%">ID</TableCell>
@@ -61,7 +78,7 @@ export const ExternalAuthSettingsPageView = ({
               config.external_auth?.length === 0) && (
               <TableRow>
                 <TableCell colSpan={999}>
-                  <div className={styles.empty}>
+                  <div css={{ textAlign: "center" }}>
                     No providers have been configured!
                   </div>
                 </TableCell>
@@ -83,23 +100,3 @@ export const ExternalAuthSettingsPageView = ({
     </>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  table: {
-    "& td": {
-      paddingTop: theme.spacing(3),
-      paddingBottom: theme.spacing(3),
-    },
-
-    "& td:last-child, & th:last-child": {
-      paddingLeft: theme.spacing(4),
-    },
-  },
-  description: {
-    marginTop: theme.spacing(3),
-    marginBottom: theme.spacing(3),
-  },
-  empty: {
-    textAlign: "center",
-  },
-}));
