emotion: LastUsed

aslilac · aslilac · commit a7343f08c2cc · 2023-10-09T21:14:28.000Z
diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -1,43 +1,44 @@
-import { makeStyles, useTheme } from "@mui/styles";
-import { FC } from "react";
+import { type FC } from "react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { colors } from "theme/colors";
+import { useTheme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
-import { Theme } from "@mui/material/styles";
+import { colors } from "theme/colors";
 
 dayjs.extend(relativeTime);
 
-type CircleProps = { color: string; variant?: "solid" | "outlined" };
+type CircleProps = {
+  color: string;
+  variant?: "solid" | "outlined";
+};
 
 const Circle: FC<CircleProps> = ({ color, variant = "solid" }) => {
-  const styles = useCircleStyles({ color, variant });
-  return <div className={styles.root} />;
-};
+  const theme = useTheme();
 
-const useCircleStyles = makeStyles((theme) => ({
-  root: {
-    width: theme.spacing(1),
-    height: theme.spacing(1),
-    backgroundColor: (props: CircleProps) =>
-      props.variant === "solid" ? props.color : undefined,
-    border: (props: CircleProps) =>
-      props.variant === "outlined" ? `1px solid ${props.color}` : undefined,
-    borderRadius: 9999,
-  },
-}));
+  return (
+    <div
+      aria-hidden
+      css={{
+        width: theme.spacing(1),
+        height: theme.spacing(1),
+        backgroundColor: variant === "solid" ? color : undefined,
+        border: variant === "outlined" ? `1px solid ${color}` : undefined,
+        borderRadius: 9999,
+      }}
+    />
+  );
+};
 
 interface LastUsedProps {
   lastUsedAt: string;
 }
 
 export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
-  const theme: Theme = useTheme();
-  const styles = useStyles();
+  const theme = useTheme();
   const t = dayjs(lastUsedAt);
   const now = dayjs();
   let message = t.fromNow();
-  let circle: JSX.Element = (
+  let circle = (
     <Circle color={theme.palette.text.secondary} variant="outlined" />
   );
 
@@ -59,7 +60,7 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
 
   return (
     <Stack
-      className={styles.root}
+      css={{ color: theme.palette.text.secondary }}
       direction="row"
       spacing={1}
       alignItems="center"
@@ -69,9 +70,3 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
     </Stack>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    color: theme.palette.text.secondary,
-  },
-}));
