emotion: AgentOutdatedTooltip

aslilac · aslilac · commit 628566e07ef7 · 2023-10-16T16:55:08.000Z
diff --git a/site/src/components/Resources/AgentOutdatedTooltip.tsx b/site/src/components/Resources/AgentOutdatedTooltip.tsx
@@ -1,5 +1,5 @@
-import { ComponentProps, FC } from "react";
-import { makeStyles } from "@mui/styles";
+import { type ComponentProps, type FC } from "react";
+import { useTheme } from "@emotion/react";
 import RefreshIcon from "@mui/icons-material/RefreshOutlined";
 import {
   HelpTooltipText,
@@ -9,7 +9,7 @@ import {
   HelpTooltipLinksGroup,
   HelpTooltipContext,
 } from "components/HelpTooltip/HelpTooltip";
-import { WorkspaceAgent } from "api/typesGenerated";
+import type { WorkspaceAgent } from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
 
 type AgentOutdatedTooltipProps = ComponentProps<typeof HelpPopover> & {
@@ -28,7 +28,11 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
   onClose,
   anchorEl,
 }) => {
-  const styles = useStyles();
+  const theme = useTheme();
+  const versionLabelStyles = {
+    fontWeight: 600,
+    color: theme.palette.text.primary,
+  };
 
   return (
     <HelpPopover
@@ -50,12 +54,12 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
           </div>
 
           <Stack spacing={0.5}>
-            <span className={styles.versionLabel}>Agent version</span>
+            <span css={versionLabelStyles}>Agent version</span>
             <span>{agent.version}</span>
           </Stack>
 
           <Stack spacing={0.5}>
-            <span className={styles.versionLabel}>Server version</span>
+            <span css={versionLabelStyles}>Server version</span>
             <span>{serverVersion}</span>
           </Stack>
 
@@ -73,10 +77,3 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
     </HelpPopover>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  versionLabel: {
-    fontWeight: 600,
-    color: theme.palette.text.primary,
-  },
-}));
