emotion: EditRolesButton

coder · aslilac · Nov 2, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
commit 0bf94491c0e0ae2d9e5aa32ee62d8f92cfc003f4
@@ -1,7 +1,8 @@
+import { css } from "@emotion/css";
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
 import { EditSquare } from "components/Icons/EditSquare";
-import { FC } from "react";
-import { makeStyles } from "@mui/styles";
+import { type FC } from "react";
 import { Stack } from "components/Stack/Stack";
 import Checkbox from "@mui/material/Checkbox";
 import UserIcon from "@mui/icons-material/PersonOutline";
@@ -34,15 +35,13 @@ const Option: React.FC<{
   isChecked: boolean;
   onChange: (roleName: string) => void;
 }> = ({ value, name, description, isChecked, onChange }) => {
-  const styles = useStyles();
-
   return (
-    <label htmlFor={name} className={styles.option}>
+    <label htmlFor={name} css={styles.option}>
       <Stack direction="row" alignItems="flex-start">
         <Checkbox
           id={name}
           size="small"
-          className={styles.checkbox}
+          css={styles.checkbox}
           value={value}
           checked={isChecked}
           onChange={(e) => {
@@ -51,7 +50,7 @@ const Option: React.FC<{
         />
         <Stack spacing={0}>
           <strong>{name}</strong>
-          <span className={styles.optionDescription}>{description}</span>
+          <span css={styles.optionDescription}>{description}</span>
         </Stack>
       </Stack>
     </label>
@@ -77,7 +76,7 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
   userLoginType,
   oidcRoleSync,
 }) => {
-  const styles = useStyles();
+  const theme = useTheme();
 
   const handleChange = (roleName: string) => {
     if (selectedRoleNames.has(roleName)) {
@@ -108,20 +107,28 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
       <PopoverTrigger>
         <IconButton
           size="small"
-          className={styles.editButton}
+          css={styles.editButton}
           title="Edit user roles"
         >
           <EditSquare />
         </IconButton>
       </PopoverTrigger>
 
-      <PopoverContent classes={{ paper: styles.popoverPaper }}>
+      <PopoverContent
+        classes={{
+          paper: css`
+            width: ${theme.spacing(45)};
+            margin-top: ${theme.spacing(1)};
+            background: ${theme.palette.background.paperLight};
+          `,
+        }}
+      >
         <fieldset
-          className={styles.fieldset}
+          css={styles.fieldset}
           disabled={isLoading}
           title="Available roles"
         >
-          <Stack className={styles.options} spacing={3}>
+          <Stack css={styles.options} spacing={3}>
             {roles.map((role) => (
               <Option
                 key={role.name}
@@ -134,12 +141,12 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
             ))}
           </Stack>
         </fieldset>
-        <div className={styles.footer}>
+        <div css={styles.footer}>
           <Stack direction="row" alignItems="flex-start">
-            <UserIcon className={styles.userIcon} />
+            <UserIcon css={styles.userIcon} />
             <Stack spacing={0}>
               <strong>Member</strong>
-              <span className={styles.optionDescription}>
+              <span css={styles.optionDescription}>
                 {roleDescriptions.member}
               </span>
             </Stack>
@@ -150,8 +157,8 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  editButton: {
+const styles = {
+  editButton: (theme) => ({
     color: theme.palette.text.secondary,
 
     "& .MuiSvgIcon-root": {
@@ -165,12 +172,7 @@ const useStyles = makeStyles((theme) => ({
       color: theme.palette.text.primary,
       backgroundColor: "transparent",
     },
-  },
-  popoverPaper: {
-    width: theme.spacing(45),
-    marginTop: theme.spacing(1),
-    background: theme.palette.background.paperLight,
-  },
+  }),
   fieldset: {
     border: 0,
     margin: 0,
@@ -180,14 +182,14 @@ const useStyles = makeStyles((theme) => ({
       opacity: 0.5,
     },
   },
-  options: {
+  options: (theme) => ({
     padding: theme.spacing(3),
-  },
+  }),
   option: {
     cursor: "pointer",
     fontSize: 14,
   },
-  checkbox: {
+  checkbox: (theme) => ({
     padding: 0,
     position: "relative",
     top: 1, // Alignment
@@ -196,21 +198,21 @@ const useStyles = makeStyles((theme) => ({
       width: theme.spacing(2.5),
       height: theme.spacing(2.5),
     },
-  },
-  optionDescription: {
+  }),
+  optionDescription: (theme) => ({
     fontSize: 13,
     color: theme.palette.text.secondary,
     lineHeight: "160%",
-  },
-  footer: {
+  }),
+  footer: (theme) => ({
     padding: theme.spacing(3),
     backgroundColor: theme.palette.background.paper,
     borderTop: `1px solid ${theme.palette.divider}`,
     fontSize: 14,
-  },
-  userIcon: {
+  }),
+  userIcon: (theme) => ({
     width: theme.spacing(2.5), // Same as the checkbox
     height: theme.spacing(2.5),
     color: theme.palette.primary.main,
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;