styling componnts

Canadian-Geospatial-Platform · Feb 23, 2024 · 6963d20 · 6963d20
1 parent 0002734
commit 6963d20
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 12 deletions.
diff --git a/packages/geoview-core/public/css/style.css b/packages/geoview-core/public/css/style.css
@@ -211,4 +211,10 @@ table.state {
 
 .config-json-valid {
   color: green
+}
+
+@media only screen and (max-width: 767px) {
+  body {
+    padding: 2px; /* Adjust the value as needed */
+  }
 }
diff --git a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx
@@ -450,7 +450,7 @@ export function FooterBar(): JSX.Element | null {
             <IconButton
               onClick={handleDynamicFocus}
               tooltip={isFocusToMap ? 'footerBar.focusToMap' : 'footerBar.focusToFooter'}
-              className='style3'
+              className="style3"
               disabled={
                 isCollapsed || isMapFullScreen || footerPanelResizeValues[footerPanelResizeValues.length - 1] === footerPanelResizeValue
               }

diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
@@ -170,7 +170,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
     }
     if (layer.layerStatus === 'error') {
       return (
-        <IconButton edge="end" size="small" onClick={handleReloadLayer} tooltip="layers.reloadLayer"  className="style1">
+        <IconButton edge="end" size="small" onClick={handleReloadLayer} tooltip="layers.reloadLayer" className="style1">
           <RestartAltIcon />
         </IconButton>
       );
@@ -185,13 +185,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
     }
 
     return (
-      <IconButton
-        edge="end"
-        size="small"
-        onClick={() => handleToggleVisibility()}
-        tooltip="layers.toggleVisibility"
-        className="style1"
-      >
+      <IconButton edge="end" size="small" onClick={() => handleToggleVisibility()} tooltip="layers.toggleVisibility" className="style1">
         {(() => {
           if (layer.isVisible === 'no') return <VisibilityOffOutlinedIcon />;
           return <VisibilityOutlinedIcon />;

diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
@@ -237,7 +237,8 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV
                 color: `${geoViewColors.bgColor.dark[450]}`,
               },
             },
-            '&.style3': { //used for app-bar buttons
+            '&.style3': {
+              // used for app-bar buttons
               backgroundColor: `tranparent`,
               border: `2px solid transparent`,
               color: `${geoViewColors.primary.main}`,
@@ -250,7 +251,7 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV
               '&:disabled': {
                 color: `${geoViewColors.bgColor.dark[450]}`,
               },
-            }
+            },
           },
         },
       },

diff --git a/packages/geoview-layers-panel/src/reorder-layers-list.tsx b/packages/geoview-layers-panel/src/reorder-layers-list.tsx
@@ -65,7 +65,7 @@ function ReorderLayersList({ mapId, title, layerIds, setReorderLayersVisible, se
   return (
     <>
       <Box sx={{ display: 'flex', justifyContent: 'end', zIndex: 2 }}>
-        <IconButton className='style3' onClick={() => setReorderLayersVisible(false)}>
+        <IconButton className="style3" onClick={() => setReorderLayersVisible(false)}>
           <CloseIcon />
         </IconButton>
       </Box>