emotion: AppPreviewLink

aslilac · aslilac · commit 17a8a900fe31 · 2023-10-30T17:25:16.000Z
diff --git a/site/src/components/Resources/AppLink/AppPreviewLink.tsx b/site/src/components/Resources/AppLink/AppPreviewLink.tsx
@@ -1,7 +1,6 @@
-import { makeStyles } from "@mui/styles";
 import { Stack } from "components/Stack/Stack";
-import { FC } from "react";
-import * as TypesGen from "api/typesGenerated";
+import { type FC } from "react";
+import type * as TypesGen from "api/typesGenerated";
 import { BaseIcon } from "./BaseIcon";
 import { ShareIcon } from "./ShareIcon";
 
@@ -10,11 +9,22 @@ interface AppPreviewProps {
 }
 
 export const AppPreviewLink: FC<AppPreviewProps> = ({ app }) => {
-  const styles = useStyles();
-
   return (
     <Stack
-      className={styles.appPreviewLink}
+      css={(theme) => ({
+        padding: theme.spacing(0.25, 1.5),
+        borderRadius: 9999,
+        border: `1px solid ${theme.palette.divider}`,
+        color: theme.palette.text.primary,
+        background: theme.palette.background.paper,
+        flexShrink: 0,
+        width: "fit-content",
+        fontSize: 12,
+
+        "& img, & svg": {
+          width: 13,
+        },
+      })}
       alignItems="center"
       direction="row"
       spacing={1}
@@ -25,20 +35,3 @@ export const AppPreviewLink: FC<AppPreviewProps> = ({ app }) => {
     </Stack>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  appPreviewLink: {
-    padding: theme.spacing(0.25, 1.5),
-    borderRadius: 9999,
-    border: `1px solid ${theme.palette.divider}`,
-    color: theme.palette.text.primary,
-    background: theme.palette.background.paper,
-    flexShrink: 0,
-    width: "fit-content",
-    fontSize: 12,
-
-    "& img, & svg": {
-      width: 13,
-    },
-  },
-}));
