emotion: CodeExample

aslilac · aslilac · commit 781b73fa69ff · 2023-10-03T19:26:18.000Z
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,9 +1,7 @@
-import { makeStyles } from "@mui/styles";
-import { FC } from "react";
+import { type FC } from "react";
+import { useTheme } from "@emotion/react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
-import { combineClasses } from "utils/combineClasses";
 import { CopyButton } from "../CopyButton/CopyButton";
-import { Theme } from "@mui/material/styles";
 
 export interface CodeExampleProps {
   code: string;
@@ -14,46 +12,40 @@ export interface CodeExampleProps {
 /**
  * Component to show single-line code examples, with a copy button
  */
-export const CodeExample: FC<CodeExampleProps> = ({
-  code,
-  password,
-  className,
-}) => {
-  const styles = useStyles({ password });
+export const CodeExample: FC<CodeExampleProps> = (props) => {
+  const { code, password, className } = props;
+  const theme = useTheme();
 
   return (
-    <div className={combineClasses([styles.root, className])}>
-      <code className={styles.code}>{code}</code>
+    <div
+      css={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        background: "rgb(0 0 0 / 30%)",
+        color: theme.palette.primary.contrastText,
+        fontFamily: MONOSPACE_FONT_FAMILY,
+        fontSize: 14,
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(1),
+        lineHeight: "150%",
+        border: `1px solid ${theme.palette.divider}`,
+      }}
+      className={className}
+    >
+      <code
+        css={{
+          padding: theme.spacing(0, 1),
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          wordBreak: "break-all",
+          "-webkit-text-security": password ? "disc" : undefined,
+        }}
+      >
+        {code}
+      </code>
       <CopyButton text={code} />
     </div>
   );
 };
-
-interface styleProps {
-  inline?: boolean;
-  password?: boolean;
-}
-
-const useStyles = makeStyles<Theme, styleProps>((theme) => ({
-  root: (props) => ({
-    display: props.inline ? "inline-flex" : "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    background: "rgb(0 0 0 / 30%)",
-    color: theme.palette.primary.contrastText,
-    fontFamily: MONOSPACE_FONT_FAMILY,
-    fontSize: 14,
-    borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(1),
-    lineHeight: "150%",
-    border: `1px solid ${theme.palette.divider}`,
-  }),
-  code: {
-    padding: theme.spacing(0, 1),
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    wordBreak: "break-all",
-    "-webkit-text-security": (props) => (props.password ? "disc" : undefined),
-  },
-}));
