emotion: AuditLogDiff

aslilac · aslilac · commit dbe1c0c68cee · 2023-10-31T20:32:36.000Z
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
@@ -1,9 +1,8 @@
-import { makeStyles } from "@mui/styles";
-import { AuditLog } from "api/typesGenerated";
+import { type Interpolation, type Theme } from "@emotion/react";
+import { type FC } from "react";
+import type { AuditLog } from "api/typesGenerated";
 import { colors } from "theme/colors";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
-import { combineClasses } from "utils/combineClasses";
-import { FC } from "react";
 
 const getDiffValue = (value: unknown): string => {
   if (typeof value === "string") {
@@ -23,43 +22,32 @@ const getDiffValue = (value: unknown): string => {
 };
 
 export const AuditLogDiff: FC<{ diff: AuditLog["diff"] }> = ({ diff }) => {
-  const styles = useStyles();
   const diffEntries = Object.entries(diff);
 
   return (
-    <div className={styles.diff}>
-      <div className={combineClasses([styles.diffColumn, styles.diffOld])}>
+    <div css={styles.diff}>
+      <div css={[styles.diffColumn, styles.diffOld]}>
         {diffEntries.map(([attrName, valueDiff], index) => (
-          <div key={attrName} className={styles.diffRow}>
-            <div className={styles.diffLine}>{index + 1}</div>
-            <div className={styles.diffIcon}>-</div>
+          <div key={attrName} css={styles.diffRow}>
+            <div css={styles.diffLine}>{index + 1}</div>
+            <div css={styles.diffIcon}>-</div>
             <div>
               {attrName}:{" "}
-              <span
-                className={combineClasses([
-                  styles.diffValue,
-                  styles.diffValueOld,
-                ])}
-              >
+              <span css={[styles.diffValue, styles.diffValueOld]}>
                 {valueDiff.secret ? "••••••••" : getDiffValue(valueDiff.old)}
               </span>
             </div>
           </div>
         ))}
       </div>
-      <div className={combineClasses([styles.diffColumn, styles.diffNew])}>
+      <div css={[styles.diffColumn, styles.diffNew]}>
         {diffEntries.map(([attrName, valueDiff], index) => (
-          <div key={attrName} className={styles.diffRow}>
-            <div className={styles.diffLine}>{index + 1}</div>
-            <div className={styles.diffIcon}>+</div>
+          <div key={attrName} css={styles.diffRow}>
+            <div css={styles.diffLine}>{index + 1}</div>
+            <div css={styles.diffIcon}>+</div>
             <div>
               {attrName}:{" "}
-              <span
-                className={combineClasses([
-                  styles.diffValue,
-                  styles.diffValueNew,
-                ])}
-              >
+              <span css={[styles.diffValue, styles.diffValueNew]}>
                 {valueDiff.secret ? "••••••••" : getDiffValue(valueDiff.new)}
               </span>
             </div>
@@ -70,60 +58,60 @@ export const AuditLogDiff: FC<{ diff: AuditLog["diff"] }> = ({ diff }) => {
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  diff: {
+const styles = {
+  diff: (theme) => ({
     display: "flex",
     alignItems: "flex-start",
     fontSize: theme.typography.body2.fontSize,
     borderTop: `1px solid ${theme.palette.divider}`,
     fontFamily: MONOSPACE_FONT_FAMILY,
     position: "relative",
     zIndex: 2,
-  },
+  }),
 
-  diffColumn: {
+  diffColumn: (theme) => ({
     flex: 1,
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2.5),
     paddingRight: theme.spacing(2),
     lineHeight: "160%",
     alignSelf: "stretch",
     overflowWrap: "anywhere",
-  },
+  }),
 
-  diffOld: {
+  diffOld: (theme) => ({
     backgroundColor: theme.palette.error.dark,
     color: theme.palette.error.contrastText,
-  },
+  }),
 
   diffRow: {
     display: "flex",
     alignItems: "baseline",
   },
 
-  diffLine: {
+  diffLine: (theme) => ({
     opacity: 0.5,
     width: theme.spacing(6),
     textAlign: "right",
     flexShrink: 0,
-  },
+  }),
 
-  diffIcon: {
+  diffIcon: (theme) => ({
     width: theme.spacing(4),
     textAlign: "center",
     fontSize: theme.typography.body1.fontSize,
     flexShrink: 0,
-  },
+  }),
 
-  diffNew: {
+  diffNew: (theme) => ({
     backgroundColor: theme.palette.success.dark,
     color: theme.palette.success.contrastText,
-  },
+  }),
 
-  diffValue: {
+  diffValue: (theme) => ({
     padding: 1,
     borderRadius: theme.shape.borderRadius / 2,
-  },
+  }),
 
   diffValueOld: {
     backgroundColor: colors.red[12],
@@ -132,4 +120,4 @@ const useStyles = makeStyles((theme) => ({
   diffValueNew: {
     backgroundColor: colors.green[12],
   },
-}));
+} satisfies Record<string, Interpolation<Theme>>;
