just some styling

src/bin/BinYards.tsx

@@ -14,7 +14,6 @@ import {
   Menu,
   MenuItem,
   Tab,
-  Tabs,
   TextField,
   Theme,
   Tooltip,
@@ -25,11 +24,9 @@ import { pond } from "protobuf-ts/pond";
 import {
   useBinYardAPI,
   useSnackbar,
-  //useUserAPI,
   usePermissionAPI,
   useBinAPI,
   useGlobalState
-  //useTeamAPI
 } from "providers";
 import React, { useEffect, useState } from "react";
 import AddIcon from "@mui/icons-material/LibraryAdd";
@@ -44,7 +41,6 @@ import EditIcon from "@mui/icons-material/Edit";
 import ShareIcon from "@mui/icons-material/Share";
 import { red, blue, green } from "@mui/material/colors";
 import { openSnackbar } from "providers/Snackbar";
-// import { Status } from "@sentry/react";
 import { binScope, binYardScope } from "models/Scope";
 import ShareObject from "user/ShareObject";
 import { Bin, Team, User } from "models";
@@ -116,11 +112,6 @@ const useStyles = makeStyles((theme: Theme) => {
     },
     tab: {
       ...parentTab,
-      // width: theme.spacing(20),
-      // minWidth: theme.spacing(20),
-      // left: 0,
-      // height: "100%",
-      // background: theme.palette.background.paper
     },
     smallTab: {
       ...parentTab,
@@ -174,7 +165,6 @@ const useStyles = makeStyles((theme: Theme) => {
 
 interface Props {
   setYardFilter: React.Dispatch<React.SetStateAction<string>>;
-
   loadBins: () => void;
   loadYards: (search?: string, limit?: number, offset?: number) => void;
   yardsLoading: boolean;
@@ -191,8 +181,6 @@ export default function BinYard(props: Props) {
   const { setYardFilter, loadBins, loadYards, /*gainBags,*/ setShowing, yardsLoading } = props;
   const binYardAPI = useBinYardAPI();
   const binAPI = useBinAPI();
-  // const userAPI = useUserAPI();
-  // const teamAPI = useTeamAPI();
   const [tab, setTab] = useState<number>(props.tab ? props.tab : 1);
   const [showAddYard, setShowAddYard] = useState<boolean>(false);
   const [addYardName, setAddYardName] = useState<string>("");

src/pages/Bins.tsx

@@ -14,8 +14,6 @@ import {
   FormControl,
   FormControlLabel,
   Grid2 as Grid,
-  // GridList,
-  // GridListTile,
   IconButton,
   ImageList,
   ImageListItem,
@@ -1403,5 +1401,5 @@ export default function Bins(props: Props) {
     );
   };
 
-  return !props.insert ? <PageContainer padding={1}>{page()}</PageContainer> : page();
+  return !props.insert ? <PageContainer padding={-1}>{page()}</PageContainer> : page();
 }

src/pages/Mines.tsx

@@ -1,8 +1,6 @@
-import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";
 import PageContainer from "./PageContainer";
 import {
-  Theme,
   Tooltip,
   Chip,
   Typography,
@@ -10,59 +8,12 @@ import {
 } from "@mui/material";
 import { pond } from "protobuf-ts/pond";
 import { useMineAPI } from "hooks";
-// import { useHistory } from "react-router";
 import AddMine from "ventilation/AddMine";
-import { Add } from "@mui/icons-material";
-import { makeStyles, withStyles } from "@mui/styles";
+import { LibraryAdd } from "@mui/icons-material";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import { useNavigate } from "react-router-dom";
 import { or } from "utils";
 
-const useStyles = makeStyles((theme: Theme) => {
-  return ({
-    gutter: {
-      paddingLeft: theme.spacing(1),
-      paddingRight: theme.spacing(1),
-      [theme.breakpoints.up("sm")]: {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2)
-      },
-      [theme.breakpoints.up("md")]: {
-        paddingLeft: theme.spacing(3),
-        paddingRight: theme.spacing(3)
-      }
-    },
-    actionToolbar: {
-      paddingLeft: 0,
-      paddingRight: theme.spacing(1),
-      [theme.breakpoints.up("sm")]: {
-        paddingRight: theme.spacing(2)
-      }
-    },
-    densePaddingY: {
-      paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1)
-    },
-    mobileContent: {
-      maxWidth: "100%",
-      margin: 0,
-      padding: `${theme.spacing(1)}px ${theme.spacing(1)}px`
-    },
-    tableContainer: {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1),
-      [theme.breakpoints.up("sm")]: {
-        marginTop: theme.spacing(2),
-        marginBottom: theme.spacing(2)
-      },
-      [theme.breakpoints.up("md")]: {
-        marginTop: theme.spacing(3),
-        marginBottom: theme.spacing(3)
-      }
-    }
-  })
-});
-
 interface MineRow {
   mine: pond.Mine;
 }
@@ -84,7 +35,6 @@ const mineColumns: Column<MineRow>[] = [
 ];
 
 export default function Mines() {
-  const classes = useStyles();
   const mineAPI = useMineAPI();
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -95,24 +45,6 @@ export default function Mines() {
   const [mineDialog, setMineDialog] = useState(false);
   const [searchValue, setSearchValue] = useState("");
 
-  const ColorAdd = withStyles((theme: Theme) => ({
-    root: {
-      color: theme.palette.getContrastText(theme.palette.primary.main),
-      backgroundColor: theme.palette.primary.main,
-      marginTop: "auto",
-      marginBottom: "auto",
-      borderRadius: "4px",
-      "&:hover": {
-        backgroundColor: theme.palette.primary.light,
-        cursor: "pointer"
-      },
-      "&:disabled": {
-        backgroundColor: "rgba(0,0,0,0)",
-        color: theme.palette.getContrastText(theme.palette.primary.main)
-      }
-    }
-  }))(Add);
-
   const load = useCallback(() => {
     setIsLoading(true);
     mineAPI
@@ -148,7 +80,7 @@ export default function Mines() {
         <Typography variant="h5">
            Mines
         </Typography>
-        <ColorAdd onClick={() => setMineDialog(true)} />
+        <LibraryAdd color="primary" onClick={() => setMineDialog(true)} />
       </Grid2>
     )
   }
@@ -157,8 +89,12 @@ export default function Mines() {
     navigate(or(data.mine.settings?.key, ""))
   }
 
-  const minesTable = () => {
-    return (
+  const closeCallback = () => {
+    setMineDialog(false);
+  };
+
+  return (
+    <PageContainer padding={0}>
       <ResponsiveTable<MineRow>
         title={renderTitle}
         rows={mineTableData}
@@ -173,20 +109,6 @@ export default function Mines() {
         isLoading={isLoading}
         onRowClick={onRowClick}
       />
-    )
-  }
-
-  const tableContent = () => {
-    return <div className={classNames(classes.gutter, classes.tableContainer)}>{minesTable()}</div>;
-  };
-
-  const closeCallback = () => {
-    setMineDialog(false);
-  };
-
-  return (
-    <PageContainer>
-      {tableContent()}
       <AddMine open={mineDialog} closeCallback={closeCallback} refreshCallback={load} />
     </PageContainer>
   );

src/pages/VentEditor.tsx

@@ -140,7 +140,8 @@ export default function Ventilation() {
   }, [mineKey, mineAPI]);
 
   return (
-    <PageContainer>
+    // TODO: why does padding have to be -2 to fit the page?
+    <PageContainer padding={-2}>
       <div style={{ height: "100%", overflow: "hidden" }}>
         <EditorHeader
           setMode={setMode}