From 4f80c36c8c2fe9dae953b5f839921e9a55b25a72 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Tue, 18 Mar 2025 13:09:31 -0600
Subject: [PATCH] fixed ImgIcon not quite centering things properly

---
 src/common/ImgIcon.tsx           | 23 +++++++++++++++--------
 src/navigation/SideNavigator.tsx | 12 ++++++------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/common/ImgIcon.tsx b/src/common/ImgIcon.tsx
index 4ed3d38..5134fa3 100644
--- a/src/common/ImgIcon.tsx
+++ b/src/common/ImgIcon.tsx
@@ -1,17 +1,21 @@
 import { Icon } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-// import Image from "material-ui-image";
-import { Img as Image } from 'react-image';
+import { Img as Image } from "react-image";
 
 const useStyles = makeStyles(() => ({
   icon: {
-    textAlign: "center",
+    display: "flex",           // Ensure flexbox for centering
+    justifyContent: "center",  // Center horizontally
+    alignItems: "center",      // Center vertically
     margin: "1px",
+    overflow: "hidden",        // Prevent image overflow
   },
   img: {
-    height: "100%",
-    width: "auto !important"
-  }
+    maxHeight: "100%",         // Fit within container height
+    maxWidth: "100%",          // Fit within container width
+    width: "auto",             // Maintain aspect ratio
+    height: "auto",            // Maintain aspect ratio
+  },
 }));
 
 interface Props {
@@ -29,7 +33,10 @@ export function ImgIcon(props: Props) {
   if (!src) return null;
 
   return (
-    <Icon className={classes.icon} style={{height: iconHeight, width: iconWidth}}>
+    <Icon
+      className={classes.icon}
+      style={{ height: iconHeight, width: iconWidth }}
+    >
       <Image
         alt={alt}
         className={classes.img}
@@ -39,4 +46,4 @@ export function ImgIcon(props: Props) {
       />
     </Icon>
   );
-}
+}
\ No newline at end of file
diff --git a/src/navigation/SideNavigator.tsx b/src/navigation/SideNavigator.tsx
index bcf2f51..e83655a 100644
--- a/src/navigation/SideNavigator.tsx
+++ b/src/navigation/SideNavigator.tsx
@@ -24,12 +24,12 @@ import { Link, useLocation } from "react-router-dom";
 import BinsIcon from "products/Bindapt/BinsIcon";
 import { useGlobalState } from "providers";
 import {
-  hasTutorialPlaylist,
-  IsAdaptiveAgriculture,
-  IsAdCon,
-  isBXT,
+  // hasTutorialPlaylist,
+  // IsAdaptiveAgriculture,
+  // IsAdCon,
+  // isBXT,
   IsMiVent,
-  IsOmniAir
+  // IsOmniAir
 } from "services/whiteLabel";
 import MiningIcon from "products/ventilation/MiningIcon";
 import { useAuth0 } from "@auth0/auth0-react";
@@ -235,7 +235,7 @@ export default function SideNavigator(props: Props) {
       </Toolbar>
       <Divider />
       {/* {isAuthenticated || isOffline() ? authenticatedSideMenu() : unauthenticatedSideMenu()} */}
-     {isAuthenticated && authenticatedSideMenu()}
+      {isAuthenticated && authenticatedSideMenu()}
     </SwipeableDrawer>
   );
 }
\ No newline at end of file