emotion: DividerWithText

aslilac · aslilac · commit d5c399074d48 · 2023-10-31T18:47:11.000Z
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx
@@ -1,32 +1,31 @@
-import { makeStyles } from "@mui/styles";
-import { FC, PropsWithChildren } from "react";
+import { type Interpolation, type Theme } from "@emotion/react";
+import { type FC, type PropsWithChildren } from "react";
 
 export const DividerWithText: FC<PropsWithChildren> = ({ children }) => {
-  const classes = useStyles();
   return (
-    <div className={classes.container}>
-      <div className={classes.border} />
-      <span className={classes.content}>{children}</span>
-      <div className={classes.border} />
+    <div css={styles.container}>
+      <div css={styles.border} />
+      <span css={styles.content}>{children}</span>
+      <div css={styles.border} />
     </div>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
+const styles = {
   container: {
     display: "flex",
     alignItems: "center",
   },
-  border: {
+  border: (theme) => ({
     borderBottom: `2px solid ${theme.palette.divider}`,
     width: "100%",
-  },
-  content: {
+  }),
+  content: (theme) => ({
     paddingTop: theme.spacing(0.5),
     paddingBottom: theme.spacing(0.5),
     paddingRight: theme.spacing(2),
     paddingLeft: theme.spacing(2),
     fontSize: theme.typography.h5.fontSize,
     color: theme.palette.text.secondary,
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
