emotion: AvatarData

aslilac · aslilac · commit 3934f0ee1227 · 2023-09-29T19:16:42.000Z
diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -1,7 +1,7 @@
+import type { FC } from "react";
+import { useTheme } from "@emotion/react";
 import { Avatar } from "components/Avatar/Avatar";
-import { FC } from "react";
 import { Stack } from "components/Stack/Stack";
-import { makeStyles } from "@mui/styles";
 
 export interface AvatarDataProps {
   title: string | JSX.Element;
@@ -16,7 +16,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
   src,
   avatar,
 }) => {
-  const styles = useStyles();
+  const theme = useTheme();
 
   if (!avatar) {
     avatar = <Avatar src={src}>{title}</Avatar>;
@@ -27,38 +27,41 @@ export const AvatarData: FC<AvatarDataProps> = ({
       spacing={1.5}
       direction="row"
       alignItems="center"
-      className={styles.root}
+      css={{
+        minHeight: theme.spacing(5), // Make it predictable for the skeleton
+        width: "100%",
+        lineHeight: "150%",
+      }}
     >
       {avatar}
 
-      <Stack spacing={0} className={styles.info}>
-        <span className={styles.title}>{title}</span>
-        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
+      <Stack
+        spacing={0}
+        css={{
+          width: "100%",
+        }}
+      >
+        <span
+          css={{
+            color: theme.palette.text.primary,
+            fontWeight: 600,
+          }}
+        >
+          {title}
+        </span>
+        {subtitle && (
+          <span
+            css={{
+              fontSize: 12,
+              color: theme.palette.text.secondary,
+              lineHeight: "150%",
+              maxWidth: 540,
+            }}
+          >
+            {subtitle}
+          </span>
+        )}
       </Stack>
     </Stack>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    minHeight: theme.spacing(5), // Make it predictable for the skeleton
-    width: "100%",
-    lineHeight: "150%",
-  },
-
-  info: {
-    width: "100%",
-  },
-
-  title: {
-    color: theme.palette.text.primary,
-    fontWeight: 600,
-  },
-
-  subtitle: {
-    fontSize: 12,
-    color: theme.palette.text.secondary,
-    lineHeight: "150%",
-    maxWidth: 540,
-  },
-}));
