emotion: ChartSection

aslilac · aslilac · commit f098d2f57cf2 · 2023-10-31T18:45:11.000Z
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx
@@ -1,7 +1,11 @@
+import { useTheme } from "@emotion/react";
 import Paper from "@mui/material/Paper";
-import { makeStyles } from "@mui/styles";
-import { HTMLProps, ReactNode, FC, PropsWithChildren } from "react";
-import { combineClasses } from "utils/combineClasses";
+import {
+  type HTMLProps,
+  type ReactNode,
+  type FC,
+  type PropsWithChildren,
+} from "react";
 
 export interface ChartSectionProps {
   /**
@@ -18,44 +22,46 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
   contentsProps,
   title,
 }) => {
-  const styles = useStyles();
+  const theme = useTheme();
 
   return (
-    <Paper className={styles.root} elevation={0}>
+    <Paper
+      css={{
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+      }}
+      elevation={0}
+    >
       {title && (
-        <div className={styles.header}>
-          <h6 className={styles.title}>{title}</h6>
+        <div
+          css={{
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "space-between",
+            padding: theme.spacing(1.5, 2),
+          }}
+        >
+          <h6
+            css={{
+              margin: 0,
+              fontSize: 14,
+              fontWeight: 600,
+            }}
+          >
+            {title}
+          </h6>
           {action && <div>{action}</div>}
         </div>
       )}
 
       <div
         {...contentsProps}
-        className={combineClasses([styles.contents, contentsProps?.className])}
+        css={{
+          margin: theme.spacing(2),
+        }}
       >
         {children}
       </div>
     </Paper>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-  },
-  contents: {
-    margin: theme.spacing(2),
-  },
-  header: {
-    alignItems: "center",
-    display: "flex",
-    justifyContent: "space-between",
-    padding: theme.spacing(1.5, 2),
-  },
-  title: {
-    margin: 0,
-    fontSize: 14,
-    fontWeight: 600,
-  },
-}));
