emotion: Expander

aslilac · aslilac · commit ae5c50de58e7 · 2023-10-09T21:29:33.000Z
diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
@@ -1,9 +1,8 @@
+import { type Interpolation, type Theme } from "@emotion/react";
 import Collapse from "@mui/material/Collapse";
 import Link from "@mui/material/Link";
-import makeStyles from "@mui/styles/makeStyles";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { type FC, type PropsWithChildren } from "react";
-import { combineClasses } from "utils/combineClasses";
 
 export interface ExpanderProps {
   expanded: boolean;
@@ -15,29 +14,27 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
   setExpanded,
   children,
 }) => {
-  const styles = useStyles();
-
   const toggleExpanded = () => setExpanded(!expanded);
 
   return (
     <>
       {!expanded && (
-        <Link onClick={toggleExpanded} className={styles.expandLink}>
-          <span className={styles.text}>
+        <Link onClick={toggleExpanded} css={styles.expandLink}>
+          <span css={styles.text}>
             Click here to learn more
             <DropdownArrow margin={false} />
           </span>
         </Link>
       )}
       <Collapse in={expanded}>
-        <div className={styles.text}>{children}</div>
+        <div css={styles.text}>{children}</div>
       </Collapse>
       {expanded && (
         <Link
           onClick={toggleExpanded}
-          className={combineClasses([styles.expandLink, styles.collapseLink])}
+          css={[styles.expandLink, styles.collapseLink]}
         >
-          <span className={styles.text}>
+          <span css={styles.text}>
             Click here to hide
             <DropdownArrow margin={false} close />
           </span>
@@ -47,18 +44,18 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  expandLink: {
+const styles = {
+  expandLink: (theme) => ({
     cursor: "pointer",
     color: theme.palette.text.secondary,
-  },
-  collapseLink: {
+  }),
+  collapseLink: (theme) => ({
     marginTop: theme.spacing(2),
-  },
-  text: {
+  }),
+  text: (theme) => ({
     display: "flex",
     alignItems: "center",
     color: theme.palette.text.secondary,
     fontSize: theme.typography.caption.fontSize,
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
