Update Next.js, Material UI

admin/src/components/reqlog/HttpHeadersTable.tsx

@@ -1,83 +1,66 @@
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-  Snackbar,
-} from "@material-ui/core";
-import { Alert } from "@material-ui/lab";
+import { Table, TableBody, TableCell, TableContainer, TableRow, Snackbar } from "@mui/material";
+import { Alert } from "@mui/lab";
 import React, { useState } from "react";
 
-const useStyles = makeStyles((theme: Theme) => {
-  const paddingX = 0;
-  const paddingY = theme.spacing(1) / 3;
-  const tableCell = {
-    paddingLeft: paddingX,
-    paddingRight: paddingX,
-    paddingTop: paddingY,
-    paddingBottom: paddingY,
-    verticalAlign: "top",
-    border: "none",
-    whiteSpace: "nowrap" as any,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    "&:hover": {
-      color: theme.palette.secondary.main,
-      whiteSpace: "inherit" as any,
-      overflow: "inherit",
-      textOverflow: "inherit",
-      cursor: "copy",
-    },
-  };
-  return createStyles({
-    root: {},
-    table: {
-      tableLayout: "fixed",
-      width: "100%",
-    },
-    keyCell: {
-      ...tableCell,
-      paddingRight: theme.spacing(1),
-      width: "40%",
-      fontWeight: "bold",
-      fontSize: ".75rem",
-    },
-    valueCell: {
-      ...tableCell,
-      width: "60%",
-      border: "none",
-      fontSize: ".75rem",
-    },
-  });
-});
+const baseCellStyle = {
+  px: 0,
+  py: 0.33,
+  verticalAlign: "top",
+  border: "none",
+  whiteSpace: "nowrap" as any,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  "&:hover": {
+    color: "primary.main",
+    whiteSpace: "inherit" as any,
+    overflow: "inherit",
+    textOverflow: "inherit",
+    cursor: "copy",
+  },
+};
+
+const keyCellStyle = {
+  ...baseCellStyle,
+  pr: 1,
+  width: "40%",
+  fontWeight: "bold",
+  fontSize: ".75rem",
+};
+
+const valueCellStyle = {
+  ...baseCellStyle,
+  width: "60%",
+  border: "none",
+  fontSize: ".75rem",
+};
 
 interface Props {
   headers: Array<{ key: string; value: string }>;
 }
 
 function HttpHeadersTable({ headers }: Props): JSX.Element {
-  const classes = useStyles();
-
   const [open, setOpen] = useState(false);
 
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
 
+    const windowSel = window.getSelection();
+
+    if (!windowSel || !document) {
+      return;
+    }
+
     const r = document.createRange();
     r.selectNode(e.currentTarget);
-    window.getSelection().removeAllRanges();
-    window.getSelection().addRange(r);
+    windowSel.removeAllRanges();
+    windowSel.addRange(r);
     document.execCommand("copy");
-    window.getSelection().removeAllRanges();
+    windowSel.removeAllRanges();
 
     setOpen(true);
   };
 
-  const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
+  const handleClose = (event: Event | React.SyntheticEvent, reason?: string) => {
     if (reason === "clickaway") {
       return;
     }
@@ -92,20 +75,21 @@ function HttpHeadersTable({ headers }: Props): JSX.Element {
           Copied to clipboard.
         </Alert>
       </Snackbar>
-      <TableContainer className={classes.root}>
-        <Table className={classes.table} size="small">
+      <TableContainer>
+        <Table
+          sx={{
+            tableLayout: "fixed",
+            width: "100%",
+          }}
+          size="small"
+        >
           <TableBody>
             {headers.map(({ key, value }, index) => (
               <TableRow key={index}>
-                <TableCell
-                  component="th"
-                  scope="row"
-                  className={classes.keyCell}
-                  onClick={handleClick}
-                >
+                <TableCell component="th" scope="row" sx={keyCellStyle} onClick={handleClick}>
                   <code>{key}:</code>
                 </TableCell>
-                <TableCell className={classes.valueCell} onClick={handleClick}>
+                <TableCell sx={valueCellStyle} onClick={handleClick}>
                   <code>{value}</code>
                 </TableCell>
               </TableRow>