emotion: Resources

aslilac · aslilac · commit 01dc82608c9b · 2023-10-30T17:23:41.000Z
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -1,8 +1,8 @@
+import { type Interpolation, type Theme } from "@emotion/react";
 import Button from "@mui/material/Button";
-import { makeStyles } from "@mui/styles";
+import { type FC, useState } from "react";
+import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
-import { FC, useState } from "react";
-import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { Stack } from "../Stack/Stack";
 import { ResourceCard } from "./ResourceCard";
 
@@ -19,7 +19,6 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
   resources,
   agentRow,
 }) => {
-  const styles = useStyles();
   const [shouldDisplayHideResources, setShouldDisplayHideResources] =
     useState(false);
   const displayResources = shouldDisplayHideResources
@@ -40,9 +39,9 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
         />
       ))}
       {hasHideResources && (
-        <div className={styles.buttonWrapper}>
+        <div css={styles.buttonWrapper}>
           <Button
-            className={styles.showMoreButton}
+            css={styles.showMoreButton}
             size="small"
             onClick={() => setShouldDisplayHideResources((v) => !v)}
           >
@@ -55,17 +54,17 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  buttonWrapper: {
+const styles = {
+  buttonWrapper: (theme) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     marginTop: theme.spacing(2),
-  },
+  }),
 
   showMoreButton: {
     borderRadius: 9999,
     width: "100%",
     maxWidth: 260,
   },
-}));
+} satisfies Record<string, Interpolation<Theme>>;
