fixed the styling on the home marker

src/maps/MapBase.tsx

@@ -665,7 +665,7 @@ export default function MapBase(props: Props) {
             latitude={homePin.latitude}
             draggable
             onDragEnd={homeDragEnd}
-            offset={[0, -25]}>
+            offset={[0, -30]}>
             <Box
               className={classes.pin}
               style={{ pointerEvents: "none", width: 50, height: 50, background: "red" }}>
@@ -674,11 +674,11 @@ export default function MapBase(props: Props) {
                   transform: "rotate(-45deg)",
                   width: 30,
                   height: 30,
-                  marginTop: -10,
-                  marginLeft: -10,
+                  marginTop: 10,
+                  marginLeft: 7,
                   pointerEvents: "none"
                 }}>
-                <HomeIcon type="light" />
+                <HomeIcon type="light" height={30} width={30} />
               </Box>
             </Box>
           </Marker>

src/navigation/Router.tsx

@@ -8,6 +8,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { getWhitelabel } from "services/whiteLabel";
 import Ventilation from "pages/VentEditor";
 import FieldMap from "pages/FieldMap";
+import GrainBag from "pages/grainBag";
 
 const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
 const DevicePage = lazy(() => import("pages/Device"));
@@ -222,6 +223,7 @@ export default function Router(props: Props) {
           <Route path="users" element={<Users/>} />
           <Route path="visualFarm" element={<FieldMap />} />
           <Route path="/logout" element={<Logout />} />
+          <Route path="grainbags/:bagID" element={<GrainBag />} />
 {/* 
           <ErrorBoundary FallbackComponent={ErrorFallback}>
             <Route path="*" element={<RelativeRoutes/>} />

src/products/AgIcons/HomeIcon.tsx

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