added grain bag list and svgs

src/grainBag/grainBagCard.tsx

@@ -1,8 +1,8 @@
-import { Box, Card, Typography } from "@material-ui/core";
+import { Box, Card, Typography } from "@mui/material";
 import GrainDescriber from "grain/GrainDescriber";
 import { GrainBag } from "models/GrainBag";
 import moment from "moment";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import GrainBagSVG from "./grainBagSVG";
 
 interface Props {

src/grainBag/grainBagList.tsx

@@ -1,11 +1,19 @@
-import { Box, Button, createStyles, Grid, makeStyles, Theme, Typography } from "@material-ui/core";
+import { 
+  Box, 
+  Button, 
+  Grid, 
+  Theme, 
+  Typography 
+} from "@mui/material";
 import React from "react";
-import ScrollMenu from "react-horizontal-scroll-menu";
-import { useHistory } from "react-router";
-import { ArrowForward, ArrowBack } from "@material-ui/icons";
+// import ScrollMenu from "react-horizontal-scroll-menu";
+// import { useHistory } from "react-router";
+import { ArrowForward, ArrowBack } from "@mui/icons-material";
 import { useMobile } from "hooks";
 import { GrainBag } from "models/GrainBag";
 import GrainBagCard from "./grainBagCard";
+import { makeStyles } from "@mui/styles";
+import { useNavigate } from "react-router-dom";
 
 interface Props {
   grainBags: GrainBag[];
@@ -13,8 +21,8 @@ interface Props {
   gridView?: boolean;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
     gridListTile: {
       minHeight: "184px",
       height: "auto !important",
@@ -25,23 +33,25 @@ const useStyles = makeStyles((theme: Theme) =>
       visibility: "hidden"
     }
   })
-);
+});
 
 export default function GrainBagList(props: Props) {
   const { grainBags, title, gridView } = props;
   const classes = useStyles();
-  const history = useHistory();
+  // const history = useHistory();
+  const navigate = useNavigate()
   const isMobile = useMobile();
 
   const goToBag = (i: number) => {
     let path = "/grainbags/" + grainBags[i].key();
-    history.replace(path);
+    // history.replace(path);
+    navigate(path, { replace: true })
   };
 
   const scroll = () => {
     return (
       <React.Fragment>
-        <ScrollMenu
+        {/* <ScrollMenu
           wheel={false}
           alignCenter={false}
           inertiaScrolling
@@ -66,7 +76,7 @@ export default function GrainBagList(props: Props) {
               <GrainBagCard grainBag={b} />
             </Box>
           ))}
-        />
+        /> */}
       </React.Fragment>
     );
   };
@@ -86,7 +96,8 @@ export default function GrainBagList(props: Props) {
   return (
     <React.Fragment>
       {title && <Typography>{title}</Typography>}
-      {gridView ? grid() : scroll()}
+      {/* {gridView ? grid() : scroll()} */}
+      {grid()}
     </React.Fragment>
   );
 }

src/grainBag/grainBagSVG.tsx

@@ -1,12 +1,12 @@
-import { Box, makeStyles, Theme, createStyles } from "@material-ui/core";
-import React from "react";
+import { Box, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 
 const GRAIN_COLOUR = "#b5a962";
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     bag: {
-      fill: theme.palette.type === "light" ? "#373737" : "#292929",
+      fill: theme.palette.mode === "light" ? "#373737" : "#292929",
       fillOpacity: 1
     },
     inventory: {