scaling image and fixing custom navbar panels

Canadian-Geospatial-Platform · Jul 16, 2024 · 3a231d4 · 3a231d4
1 parent b3e1933
commit 3a231d4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/packages/geoview-core/src/core/components/legend/legend-layer.tsx b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
@@ -50,19 +50,23 @@ export function LegendLayerImage(props: LegendLayerImageProps): JSX.Element {
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    bgcolor: 'background.paper',
+    bgcolor: 'background.paper'
+  };
+
+  const imgStyle = {
+    width: '100%', 
+    transform: 'scale(2)',
     border: '2px solid #ccc',
     boxShadow: 24,
     borderRadius: 1,
-    p: 4,
-  };
+  }
 
   return (
     <>
       <Box component="img" alt="icon" src={imgSrc} sx={{ maxWidth: '100%', cursor: 'pointer' }} onClick={handleOpen} />
       <Modal open={open} onClose={handleClose} container={mapElem}>
         <Box sx={style}>
-          <Box component="img" alt="icon" src={imgSrc} sx={{ maxWidth: '100%', cursor: 'pointer' }} onClick={handleOpen} />
+          <Box component="img" alt="icon" src={imgSrc} sx={imgStyle} onClick={handleOpen} />
         </Box>
       </Modal>
     </>

diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx b/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx
@@ -74,11 +74,7 @@ export default function NavbarPanelButton({ buttonPanel }: NavbarPanelButtonType
           placement="left-end"
           onClose={handleClickAway}
           container={shellContainer}
-          sx={{
-            '& .MuiPopover-paper': {
-              transform: 'translateX(-8px) !important', // Adjust the value for desired spacing
-            },
-          }}
+          sx={{ marginRight: '5px !important'}}
         >
           <Paper sx={{ width: `${buttonPanel.panel?.width ?? 300}px`, maxHeight: '500px' }}>
             <DialogTitle sx={sxClasses.popoverTitle}>{(buttonPanel.panel?.title as string) ?? ''}</DialogTitle>