emotion: AgentLatency

aslilac · aslilac · commit 1857b715c701 · 2023-10-13T17:28:14.000Z
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
@@ -1,13 +1,13 @@
-import { useRef, useState, FC } from "react";
-import { makeStyles, useTheme } from "@mui/styles";
+import { type FC, useRef, useState } from "react";
+import { useTheme } from "@emotion/react";
 import { Theme } from "@mui/material/styles";
+import type { WorkspaceAgent, DERPRegion } from "api/typesGenerated";
 import {
   HelpTooltipText,
   HelpPopover,
   HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
 import { Stack } from "components/Stack/Stack";
-import { WorkspaceAgent, DERPRegion } from "api/typesGenerated";
 import { getLatencyColor } from "utils/latency";
 
 const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
@@ -30,12 +30,11 @@ const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
 };
 
 export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
-  const theme: Theme = useTheme();
+  const theme = useTheme();
   const anchorRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = useState(false);
   const id = isOpen ? "latency-popover" : undefined;
   const latency = getDisplayLatency(theme, agent);
-  const styles = useStyles();
 
   if (!latency || !agent.latency) {
     return null;
@@ -49,8 +48,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
         ref={anchorRef}
         onMouseEnter={() => setIsOpen(true)}
         onMouseLeave={() => setIsOpen(false)}
-        className={styles.trigger}
-        style={{ color: latency.color }}
+        css={{ cursor: "pointer", color: latency.color }}
       >
         {Math.round(Math.round(latency.latency_ms))}ms
       </span>
@@ -67,7 +65,11 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
           first row is the preferred relay.
         </HelpTooltipText>
         <HelpTooltipText>
-          <Stack direction="column" spacing={1} className={styles.regions}>
+          <Stack
+            direction="column"
+            spacing={1}
+            css={{ marginTop: theme.spacing(2) }}
+          >
             {Object.entries(agent.latency)
               .sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
               .map(([regionName, region]) => (
@@ -76,7 +78,11 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
                   key={regionName}
                   spacing={0.5}
                   justifyContent="space-between"
-                  className={region.preferred ? styles.preferred : undefined}
+                  css={
+                    region.preferred && {
+                      color: theme.palette.text.primary,
+                    }
+                  }
                 >
                   <strong>{regionName}</strong>
                   {Math.round(region.latency_ms)}ms
@@ -88,15 +94,3 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
     </>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  trigger: {
-    cursor: "pointer",
-  },
-  regions: {
-    marginTop: theme.spacing(2),
-  },
-  preferred: {
-    color: theme.palette.text.primary,
-  },
-}));
