build dev

src/ui/React/Modal.tsx

@@ -3,8 +3,8 @@ import { Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
 import M from "@mui/material/Modal";
-import Backdrop from "@mui/material/Backdrop";
 import Fade from "@mui/material/Fade";
+import Box from "@mui/material/Box";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -39,18 +39,11 @@ interface IProps {
 export const Modal = (props: IProps): React.ReactElement => {
   const classes = useStyles();
   return (
-    <M
-      open={props.open}
-      onClose={props.onClose}
-      closeAfterTransition
-      className={classes.modal}
-      BackdropComponent={Backdrop}
-      BackdropProps={{
-        timeout: 100,
-      }}
-    >
+    <M open={props.open} onClose={props.onClose} closeAfterTransition className={classes.modal}>
       <Fade in={props.open}>
-        <div className={classes.paper}>{props.children}</div>
+        <div className={classes.paper}>
+          <Box sx={{ m: 2 }}>{props.children}</Box>
+        </div>
       </Fade>
     </M>
   );

src/ui/React/StatsTable.tsx

@@ -1,39 +1,35 @@
-import * as React from "react";
+import React from "react";
 
-export function StatsTable(rows: any[][], title?: string): React.ReactElement {
-  let titleElem = <></>;
-  if (title) {
-    titleElem = (
-      <>
-        <h2>
-          <u>{title}</u>
-        </h2>
-        <br />
-      </>
-    );
-  }
+import { Table, TableCell } from "./Table";
+import TableBody from "@mui/material/TableBody";
+import { Table as MuiTable } from "@mui/material";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+
+interface IProps {
+  rows: any[][];
+  title?: string;
+  wide?: boolean;
+}
+
+export function StatsTable({ rows, title, wide }: IProps): React.ReactElement {
+  const T = wide ? MuiTable : Table;
   return (
     <>
-      {titleElem}
-      <table>
-        <tbody>
-          {rows.map((row: any[]) => {
-            return (
-              <tr key={row[0]}>
-                {row.map((elem: any, i: number) => {
-                  let style = {};
-                  if (i !== 0) style = { textAlign: "right", paddingLeft: ".25em" };
-                  return (
-                    <td key={i} style={style}>
-                      {elem}
-                    </td>
-                  );
-                })}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+      {title && <Typography>{title}</Typography>}
+      <T size="small" padding="none">
+        <TableBody>
+          {rows.map((row: any[]) => (
+            <TableRow key={row[0]}>
+              {row.map((elem: any, i: number) => (
+                <TableCell key={i} align={i !== 0 ? "right" : "left"}>
+                  <Typography noWrap>{elem}</Typography>
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </T>
     </>
   );
 }

src/ui/React/Table.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { TableCell as MuiTableCell, TableCellProps, Table as MuiTable, TableProps } from "@mui/material";
+
+import makeStyles from "@mui/styles/makeStyles";
+
+const useStyles = makeStyles({
+  root: {
+    borderBottom: "none",
+  },
+  small: {
+    width: "1px",
+  },
+});
+
+export const TableCell: React.FC<TableCellProps> = (props: TableCellProps) => {
+  return (
+    <MuiTableCell
+      {...props}
+      classes={{
+        root: useStyles().root,
+        ...props.classes,
+      }}
+    />
+  );
+};
+
+export const Table: React.FC<TableProps> = (props: TableProps) => {
+  return (
+    <MuiTable
+      {...props}
+      classes={{
+        root: useStyles().small,
+        ...props.classes,
+      }}
+    />
+  );
+};