emotion: TimelineEntry

aslilac · aslilac · commit f3e471c70972 · 2023-10-30T18:41:46.000Z
diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx
@@ -1,7 +1,5 @@
-import { makeStyles } from "@mui/styles";
-import TableRow, { TableRowProps } from "@mui/material/TableRow";
+import TableRow, { type TableRowProps } from "@mui/material/TableRow";
 import { type PropsWithChildren, forwardRef } from "react";
-import { combineClasses } from "utils/combineClasses";
 
 type TimelineEntryProps = PropsWithChildren<
   TableRowProps & {
@@ -13,47 +11,39 @@ export const TimelineEntry = forwardRef(function TimelineEntry(
   { children, clickable = true, ...props }: TimelineEntryProps,
   ref?: React.ForwardedRef<HTMLTableRowElement>,
 ) {
-  const styles = useStyles();
-
   return (
     <TableRow
       ref={ref}
-      className={combineClasses({
-        [styles.timelineEntry]: true,
-        [styles.clickable]: clickable,
-      })}
+      css={(theme) => [
+        {
+          position: "relative",
+          "&:focus": {
+            outlineStyle: "solid",
+            outlineOffset: -1,
+            outlineWidth: 2,
+            outlineColor: theme.palette.secondary.dark,
+          },
+          "& td:before": {
+            position: "absolute",
+            left: 50,
+            display: "block",
+            content: "''",
+            height: "100%",
+            width: 2,
+            background: theme.palette.divider,
+          },
+        },
+        clickable && {
+          cursor: "pointer",
+
+          "&:hover": {
+            backgroundColor: theme.palette.action.hover,
+          },
+        },
+      ]}
       {...props}
     >
       {children}
     </TableRow>
   );
 });
-
-const useStyles = makeStyles((theme) => ({
-  clickable: {
-    cursor: "pointer",
-
-    "&:hover": {
-      backgroundColor: theme.palette.action.hover,
-    },
-  },
-
-  timelineEntry: {
-    position: "relative",
-    "&:focus": {
-      outlineStyle: "solid",
-      outlineOffset: -1,
-      outlineWidth: 2,
-      outlineColor: theme.palette.secondary.dark,
-    },
-    "& td:before": {
-      position: "absolute",
-      left: 50,
-      display: "block",
-      content: "''",
-      height: "100%",
-      width: 2,
-      background: theme.palette.divider,
-    },
-  },
-}));
