added height and width the the ImgIcon common component in order to control the icon size so that icons that are not square dont get the bottom cut off

package.json

@@ -29,6 +29,7 @@
     "@mui/x-date-pickers": "^7.26.0",
     "@sentry/react": "^8.38.0",
     "@turf/area": "^7.2.0",
+    "@turf/turf": "^7.2.0",
     "@types/classnames": "^2.3.0",
     "axios": "^1.7.7",
     "dayjs": "^1.11.13",

src/bin/AddBinFab.tsx

@@ -53,7 +53,7 @@ export default function AddBinFab(props: Props) {
       aria-label="Create Bin"
       className={classString}
       size={isMobile ? "medium" : "large"}>
-      <ImgIcon alt="Create Bin" src={AddBinIcon} />
+      <ImgIcon alt="Create Bin" src={AddBinIcon} iconHeight={"35px"} iconWidth={"35px"}/>
     </Fab>
   );
 }

src/bin/BinsList.tsx

@@ -85,6 +85,9 @@ export default function BinsList(props: Props) {
     //const visibility = useContext(VisibilityContext);
     return (
       <ScrollMenu 
+        onUpdate={(visibility) => {
+          console.log(visibility.useIsVisible('last', false))
+        }}
         LeftArrow={leftArrow} 
         RightArrow={rightArrow}>
         {bins.map((b, i) => (

src/common/ImgIcon.tsx

@@ -6,7 +6,7 @@ import { Img as Image } from 'react-image';
 const useStyles = makeStyles(() => ({
   icon: {
     textAlign: "center",
-    margin: "1px"
+    margin: "1px",
   },
   img: {
     height: "100%",
@@ -18,16 +18,18 @@ interface Props {
   src?: string;
   alt?: string;
   style?: any;
+  iconHeight?: number | string;
+  iconWidth?: number | string;
 }
 
 export function ImgIcon(props: Props) {
-  const { src, alt, style } = props;
+  const { src, alt, style, iconHeight, iconWidth } = props;
   const classes = useStyles();
 
   if (!src) return null;
 
   return (
-    <Icon className={classes.icon}>
+    <Icon className={classes.icon} style={{height: iconHeight, width: iconWidth}}>
       <Image
         alt={alt}
         className={classes.img}

src/navigation/SideNavigator.tsx

@@ -139,7 +139,7 @@ export default function SideNavigator(props: Props) {
             classes={getClasses("/bin")}
             >
             <ListItemIcon>
-              <BinsIcon />
+              <BinsIcon height={"26px"}/>
             </ListItemIcon>
             {open && <ListItemText primary="Bins" />}
           </ListItemButton>
@@ -168,7 +168,7 @@ export default function SideNavigator(props: Props) {
               classes={getClasses("/mine")}
               >
               <ListItemIcon>
-                <MiningIcon />
+                <MiningIcon height={"26px"} width={"26px"} />
               </ListItemIcon>
               {open && <ListItemText primary="Mines" />}
             </ListItemButton>

src/products/Bindapt/BinsIcon.tsx

@@ -8,12 +8,13 @@ import { useThemeType } from "../../hooks/useThemeType";
 interface Props {
   singleBin?: boolean;
   type?: "light" | "dark";
-  size?: number;
+  width?: number | string;
+  height?: number | string;
 }
 
 export default function BinsIcon(props: Props) {
   const themeType = useThemeType();
-  const { type, singleBin, size } = props;
+  const { type, singleBin, width, height } = props;
 
   const lightIcon = () => {
     return singleBin ? BinLightIcon : BinsLightIcon;
@@ -31,9 +32,9 @@ export default function BinsIcon(props: Props) {
     return themeType === "light" ? darkIcon() : lightIcon();
   };
 
-  if (size) {
+  // if (size) {
-    return <img width={size} height={size} alt="bins" src={src()} />;
+  //   return <img width={size} height={size} alt="bins" src={src()} />;
-  }
+  // }
 
-  return <ImgIcon alt="bins" src={src()} />;
+  return <ImgIcon alt="bins" src={src()} iconHeight={height} iconWidth={width}/>;
 }

src/products/ventilation/MiningIcon.tsx

@@ -6,11 +6,13 @@ import React from "react";
 
 interface Props {
   type?: "light" | "dark";
+  height?: number | string
+  width?: number | string
 }
 
 export default function VentilationIcon(props: Props) {
   const themeType = useThemeType();
-  const { type } = props;
+  const { type, height, width } = props;
 
   const src = () => {
     if (type) {
@@ -20,5 +22,5 @@ export default function VentilationIcon(props: Props) {
     return themeType === "light" ? MineDarkIcon : MineLightIcon;
   };
 
-  return <ImgIcon alt="mine" src={src()} />;
+  return <ImgIcon alt="mine" src={src()} iconHeight={height} iconWidth={width}/>;
 }