made side menu mui icons black in light mode

src/bin/BinYards.tsx

@@ -50,6 +50,7 @@ import ObjectTeams from "teams/ObjectTeams";
 import { GrainBag } from "models/GrainBag";
 import { makeStyles } from "@mui/styles";
 import DraggableTabs from "common/DraggableTabs";
+import CancelSubmit from "common/CancelSubmit";
 
 const parentTab = {
   "&": {
@@ -210,6 +211,7 @@ export default function BinYard(props: Props) {
   const [yardPermissions, setYardPermissions] = useState<Dictionary<pond.Permission[]>>({});
   const [searchSelected, setSearchSelected] = useState(false);
   const [{ user, as }] = useGlobalState();
+  const [addingYard, setAddingYard] = useState(false)
 
   useEffect(() => {
     if (props.yards && props.yardPerms) {
@@ -232,6 +234,8 @@ export default function BinYard(props: Props) {
   };
 
   const submitYard = () => {
+    if (addingYard) return
+    setAddingYard(true)
     let newBinYard = pond.BinYardSettings.create();
     newBinYard.name = addYardName;
     newBinYard.description = addYardDescription;
@@ -248,6 +252,8 @@ export default function BinYard(props: Props) {
       })
       .catch(_err => {
         error("Could not add bin yard");
+      }).finally(() => {
+        setAddingYard(false)
       });
   };
 
@@ -306,16 +312,10 @@ export default function BinYard(props: Props) {
         <DialogTitle>Create New Bin Yard</DialogTitle>
         {yardForm()}
         <DialogActions>
-          <Button
+          <CancelSubmit
-            onClick={() => {
+            onCancel={() => setShowAddYard(false)}
-              setShowAddYard(false);
+            onSubmit={submitYard}
-            }}
+          />
-            color="primary">
-            Cancel
-          </Button>
-          <Button onClick={submitYard} color="primary">
-            Submit
-          </Button>
         </DialogActions>
       </ResponsiveDialog>
     );

src/common/ImgIcon.tsx

@@ -1,7 +1,7 @@
 import { Icon, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles((_theme: Theme) => ({
   icon: {
     display: "flex",           // Ensure flexbox for centering
     justifyContent: "center",  // Center horizontally
@@ -14,7 +14,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     maxWidth: "100%",          // Fit within container width
     width: "auto",             // Maintain aspect ratio
     height: "auto",            // Maintain aspect ratio
-    color: "black"
   },
 }));
 

src/navigation/SideNavigator.tsx

@@ -36,6 +36,7 @@ import { useAuth0 } from "@auth0/auth0-react";
 import FieldsIcon from "products/AgIcons/FieldsIcon";
 import PlaneIcon from "products/AviationIcons/PlaneIcon";
 import AirportMapIcon from "products/AviationIcons/AirportMapIcon";
+import { getThemeType } from "theme";
 
 const drawerWidth = 230;
 
@@ -206,7 +207,7 @@ export default function SideNavigator(props: Props) {
             classes={getClasses("/team")} 
             >
             <ListItemIcon>
-              <People />
+              <People style={{ color: getThemeType() === "light" ? "black" : undefined }}/>
             </ListItemIcon>
             {open && <ListItemText primary="Teams" />}
           </ListItemButton>
@@ -218,7 +219,7 @@ export default function SideNavigator(props: Props) {
             classes={getClasses("/user")}
           >
             <ListItemIcon>
-              <Person />
+              <Person style={{ color: getThemeType() === "light" ? "black" : undefined }}/>
             </ListItemIcon>
             {open && <ListItemText primary="Users" />}
           </ListItemButton>