adding global style overrides

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 */
+  }
 }

packages/geoview-core/src/core/components/app-bar/app-bar-style.ts

@@ -40,6 +40,7 @@ export const getSxClasses = (theme: Theme) => ({
     height: 44,
     width: 44,
     transition: 'background-color 0.3s ease-in-out',
+    border: `2px solid transparent`,
     '&:hover': {
       backgroundColor: theme.palette.geoViewColor.primary.light[100],
       color: theme.palette.geoViewColor.primary.light[700],
@@ -53,8 +54,9 @@ export const getSxClasses = (theme: Theme) => ({
       color: theme.palette.geoViewColor.primary.light[700],
     },
     '&.active': {
-      backgroundColor: theme.palette.geoViewColor.primary.light[100],
-      color: theme.palette.background.paper,
+      border: `2px solid ${theme.palette.geoViewColor.primary.light[100]}`,
+      backgroundColor: 'transparent',
+      color: theme.palette.geoViewColor.primary.light[100],
     },
     '& .MuiSvgIcon-root': {
       height: 20,

packages/geoview-core/src/core/components/app-bar/app-bar.tsx

@@ -224,7 +224,7 @@ export function Appbar(): JSX.Element {
           <Box>
             <List sx={sxClasses.appBarList}>
               <ListItem>
-                <Geolocator sx={sxClasses.appBarButton} />
+                <Geolocator />
               </ListItem>
             </List>
           </Box>
@@ -275,7 +275,7 @@ export function Appbar(): JSX.Element {
           <Box>
             <List sx={sxClasses.appBarList}>
               <ListItem>
-                <ExportButton className={` ${activeModalId ? 'export' : ''}`} />
+                <ExportButton className={` style3 ${activeModalId ? 'active' : ''}`} />
               </ListItem>
             </List>
           </Box>

packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx

@@ -2,27 +2,12 @@ import { useState } from 'react';
 import { IconButton, SearchIcon } from '@/ui';
 import { useUIStoreActions } from '@/core/stores/store-interface-and-intial-values/ui-state';
 
-/**
- * Interface used for geolocator button properties
- */
-interface GeolocatorProps {
-  sx?: React.CSSProperties;
-}
-
-/**
- * default properties values
- */
-const defaultProps = {
-  sx: {},
-};
-
 /**
  * Geolocator Button component
  *
  * @returns {JSX.Element} the geolocator button
  */
-export default function Geolocator(props: GeolocatorProps): JSX.Element {
-  const { sx = {} } = props;
+export default function Geolocator(): JSX.Element {
   const [active, setActive] = useState(true);
 
   const { setGeolocatorActive } = useUIStoreActions();
@@ -39,12 +24,10 @@ export default function Geolocator(props: GeolocatorProps): JSX.Element {
       tooltip="appbar.geolocator"
       tooltipPlacement="bottom-end"
       onClick={click}
-      sx={sx}
-      className={`${active ? 'active' : ''}`}
+      color="primary"
+      className={`style3 ${!active ? 'active' : ''}`}
     >
       <SearchIcon />
     </IconButton>
   );
 }
-
-Geolocator.defaultProps = defaultProps;

packages/geoview-core/src/core/components/app-bar/buttons/version.tsx

@@ -61,7 +61,7 @@ export default function Version(): JSX.Element {
         tooltip="appbar.version"
         tooltipPlacement="bottom-end"
         onClick={handleClick}
-        className={open ? 'active' : ''}
+        className={`style3 ${open ? 'active' : ''}`}
       >
         <SvgIcon viewBox="-4 -2 38 36">
           <GeoCaIcon />

packages/geoview-core/src/core/components/common/layer-list-style.ts

@@ -69,7 +69,7 @@ export const getSxClasses = (theme: Theme) => ({
     },
   },
   paper: { marginBottom: '1rem' },
-  borderWithIndex: `2px solid ${theme.palette.geoViewColor.primary.main}`,
+  borderWithIndex: `2px solid ${theme.palette.geoViewColor.primary.main} !important`,
   borderNone: 'none',
   backgroundProcessing: `${theme.palette.geoViewColor.warning.opacity(0.33)}`,
   backgroundError: `${theme.palette.geoViewColor.error.main}`,

packages/geoview-core/src/core/components/common/layer-list.tsx

@@ -138,6 +138,7 @@ const LayerListItem = memo(function LayerListItem({ isSelected, layer, onListIte
         border: isSelected ? sxClasses.borderWithIndex : sxClasses.borderNone,
         backgroundColor: renderLayerBackground(),
       }}
+      className="bordered"
     >
       <Tooltip title={layer.tooltip} placement="top" arrow>
         <Box>

packages/geoview-core/src/core/components/data-table/data-table-style.ts

@@ -3,17 +3,6 @@ import { Theme } from '@mui/material';
 export const getSxClasses = (theme: Theme) => ({
   dataPanel: { background: theme.palette.geoViewColor.bgColor.main, paddingBottom: '1rem' },
   gridContainer: { paddingLeft: '1rem', paddingRight: '1rem' },
-  iconImage: {
-    padding: 3,
-    borderRadius: 0,
-    border: '1px solid',
-    borderColor: theme.palette.geoViewColor.grey.dark[100],
-    boxShadow: 2,
-    background: theme.palette.geoViewColor.white,
-    objectFit: 'scale-down',
-    width: '35px',
-    height: '35px',
-  },
   selectedRows: {
     backgroundColor: theme.palette.geoViewColor.white,
     transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',

packages/geoview-core/src/core/components/data-table/data-table.tsx

@@ -370,7 +370,7 @@ function DataTable({ data, layerPath, tableHeight = 600 }: DataTableProps) {
             component="img"
             alt={feature.featureIcon.toDataURL().toString()}
             src={feature.featureIcon.toDataURL().toString()}
-            sx={sxClasses.iconImage}
+            className="layer-icon"
           />
         ),
         ZOOM: (

packages/geoview-core/src/core/components/details/details-panel.tsx

@@ -446,7 +446,7 @@ export function DetailsPanel({ fullWidth }: DetailsPanelType): JSX.Element {
             </Box>
           )}
           {!memoSelectedLayerDataFeatures && (
-            <Paper sx={{ padding: '2rem' }}>
+            <Paper sx={{ padding: '2rem' }} className="bordered">
               <Typography variant="h3" gutterBottom sx={sxClasses.detailsInstructionsTitle}>
                 {t('details.detailsInstructions')}
               </Typography>

packages/geoview-core/src/core/components/details/details-style.ts

@@ -34,18 +34,6 @@ export const getSxClasses = (theme: Theme) => ({
     overflowY: 'auto',
     overflowX: 'hidden',
   },
-  featureInfoSingleImage: {
-    padding: 3,
-    borderRadius: 0,
-    border: '1px solid',
-    borderColor: theme.palette.geoViewColor.grey.dark[100],
-    boxShadow: 2,
-    background: theme.palette.geoViewColor.white,
-    objectFit: 'scale-down',
-    width: '35px',
-    height: '35px',
-    marginRight: '10px',
-  },
   selectFeatureCheckbox: {
     color: theme.palette.geoViewColor.primary.main,
     '&.Mui-checked': {

packages/geoview-core/src/core/components/details/feature-info-new.tsx

@@ -99,7 +99,7 @@ export function FeatureInfo({ features, currentFeatureIndex }: TypeFeatureInfoPr
   }, [checkedFeatures, feature]); // ! Check if feature is necessary in this dependency array? If so explain it in comment? Should be featurUid?
 
   return (
-    <Paper sx={{ boxShadow: 'none' }}>
+    <Paper sx={{ boxShadow: 'none', border: 'none' }}>
       <Box
         sx={{
           p: '0 20px 10px 20px',
@@ -110,7 +110,7 @@ export function FeatureInfo({ features, currentFeatureIndex }: TypeFeatureInfoPr
       >
         {/* Left box - feature icon and feature name */}
         <Box sx={sxClasses.flexBoxAlignCenter}>
-          <Box component="img" src={featureIconSrc} alt={nameFieldValue} sx={sxClasses.featureInfoSingleImage} />
+          <Box component="img" src={featureIconSrc} alt={nameFieldValue} className="layer-icon" />
           <Typography sx={{ display: 'inline-block' }} component="div">
             {nameFieldValue}
           </Typography>

packages/geoview-core/src/core/components/export/export-modal-button.tsx

@@ -7,6 +7,7 @@
  */
 interface ExportProps {
   className?: string;
+  sxDetails?: object;
 }
 
 /**
@@ -15,7 +16,7 @@
  * @returns {JSX.Element} the export button
  */
 export default function ExportButton(props: ExportProps): JSX.Element {
-  const { className } = props;
+  const { className, sxDetails } = props;
 
   // get store function
   const mapId = useGeoViewMapId();
@@ -27,8 +28,8 @@
       tooltip="appbar.export"
       tooltipPlacement="bottom-end"
       onClick={() => openModal({ activeElementId: 'export', callbackElementId: `${mapId}-export-btn` })}
+      sx={sxDetails}
       className={className}
-      color="primary"
     >
       <DownloadIcon />
     </IconButton>

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'}
-              color="primary"
+              className="style3"
               disabled={
                 isCollapsed || isMapFullScreen || footerPanelResizeValues[footerPanelResizeValues.length - 1] === footerPanelResizeValue
               }

packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx

@@ -156,7 +156,7 @@ export function HoverTooltip(): JSX.Element {
         visibility: showTooltip ? 'visible' : 'hidden',
       }}
     >
-      <img alt={t('hovertooltip.alticon')!} src={tooltipIcon} style={{ ...theme.iconImage, width: '35px', height: '35px' }} />
+      <Box component="img" className="layer-icon" alt={t('hovertooltip.alticon')!} src={tooltipIcon} />
       <Box sx={sxClasses.tooltipText}>{tooltipValue}</Box>
     </Box>
   );

packages/geoview-core/src/core/components/layers/left-panel/left-panel-styles.ts

@@ -63,8 +63,6 @@ export const getSxClasses = (theme: Theme) => ({
         alignItems: 'center',
 
         '& .MuiIconButton-root': {
-          color: `${theme.palette.geoViewColor.primary.main} !important`,
-          background: `${theme.palette.geoViewColor.bgColor.dark[100]} !important`,
           margin: '0px 5px',
         },
       },

packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx

@@ -172,7 +172,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
     }
     if (layer.layerStatus === 'error') {
       return (
-        <IconButton edge="end" size="small" onClick={handleReloadLayer} tooltip="layers.reloadLayer">
+        <IconButton edge="end" size="small" onClick={handleReloadLayer} tooltip="layers.reloadLayer" className="style1">
           <RestartAltIcon />
         </IconButton>
       );
@@ -187,14 +187,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
     }
 
     return (
-      <IconButton
-        color="primary"
-        edge="end"
-        size="small"
-        onClick={() => handleToggleVisibility()}
-        tooltip="layers.toggleVisibility"
-        className="style1"
-      >
+      <IconButton edge="end" size="small" onClick={() => handleToggleVisibility()} tooltip="layers.toggleVisibility" className="style1">
         {(() => {
           if (!getVisibilityFromOrderedLayerInfo(layer.layerPath)) return <VisibilityOffOutlinedIcon />;
           return <VisibilityOutlinedIcon />;
@@ -245,13 +238,17 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
   function getContainerClass() {
     const result: string[] = ['layerItemContainer', layer.layerStatus ?? ''];
 
+    if (depth === 0) {
+      result.push('bordered');
+    }
+
     // if layer has selected child but its not itself selected
     if (layerChildIsSelected && !layerIsSelected && !isGroupOpen) {
-      result.push('selectedLayer');
+      result.push('selectedLayer bordered-primary');
     }
 
     if (layerIsSelected) {
-      result.push('selectedLayer');
+      result.push('selectedLayer bordered-primary');
     }
 
     if (isDragging) {
@@ -262,7 +259,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
   }
 
   return (
-    <Box className={getContainerClass()}>
+    <Box className={getContainerClass()} data-layer-depth={depth}>
       <ListItem key={layer.layerName} divider>
         <ListItemButton selected={layerIsSelected || (layerChildIsSelected && !isGroupOpen)}>
           <LayerIcon layer={layer} />

packages/geoview-core/src/core/components/legend/legend-styles.ts

@@ -48,6 +48,10 @@ export const getSxClasses = (theme: Theme) => ({
       overflow: 'hidden',
     },
 
+    '& .layerTitle > .MuiListItemText-secondary': {
+      color: theme.palette.geoViewColor.textColor.light[400],
+    },
+
     '& .MuiListItemText-root': {
       marginLeft: '12px',
     },

packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx

@@ -17,11 +17,7 @@ import { EVENT_NAMES } from '@/api/events/event-types';
 import { payloadIsAButtonPanel, ButtonPanelPayload, PayloadBaseClass } from '@/api/events/payloads';
 import { TypeButtonPanel } from '@/ui/panel/panel-types';
 import { getSxClasses } from './nav-bar-style';
-import {
-  useUIActiveFocusItem,
-  useUIMapInfoExpanded,
-  useUINavbarComponents,
-} from '@/core/stores/store-interface-and-intial-values/ui-state';
+import { useUIMapInfoExpanded, useUINavbarComponents } from '@/core/stores/store-interface-and-intial-values/ui-state';
 import { logger } from '@/core/utils/logger';
 
 /**
@@ -41,7 +37,6 @@ export function Navbar(): JSX.Element {
 
   // get the expand or collapse from store
   const mapInfoExpanded = useUIMapInfoExpanded();
-  const activeModalId = useUIActiveFocusItem().activeElementId;
   const navBarComponents = useUINavbarComponents();
 
   // #region REACT HOOKS
@@ -181,7 +176,7 @@ export function Navbar(): JSX.Element {
           {navBarComponents.includes('fullscreen') && <Fullscreen />}
           {navBarComponents.includes('location') && <Location />}
           {navBarComponents.includes('home') && <Home />}
-          {navBarComponents.includes('export') && <ExportButton className={`${sxClasses.navButton} ${activeModalId ? 'export' : ''}`} />}
+          {navBarComponents.includes('export') && <ExportButton sxDetails={sxClasses.navButton} />}
         </ButtonGroup>
       </Box>
     </Box>

packages/geoview-core/src/core/components/notifications/notifications.tsx

@@ -84,7 +84,7 @@ export default function Notifications(): JSX.Element {
       <Box sx={sxClasses.notificationItem} key={index}>
         <Box>{getNotificationIcon(notification)}</Box>
         <Box sx={{ flexGrow: 1 }}>{notification.message}</Box>
-        <IconButton onClick={() => handleRemoveNotificationClick(notification)}>
+        <IconButton className="style3" onClick={() => handleRemoveNotificationClick(notification)}>
           <CloseIcon />
         </IconButton>
       </Box>
@@ -99,7 +99,7 @@ export default function Notifications(): JSX.Element {
           tooltip="appbar.notifications"
           tooltipPlacement="bottom-end"
           onClick={handleOpenPopover}
-          className={open ? 'style1' : ''}
+          className={`style3 ${open ? 'active' : ''}`}
           color="primary"
         >
           <NotificationsIcon />

packages/geoview-core/src/ui/style/global-style-overrides.ts

@@ -0,0 +1,32 @@
+import { IGeoViewColors } from './types';
+
+export const globalStyleOverrides = (geoViewColors: IGeoViewColors) => ({
+  '.layer-icon': {
+    padding: 3,
+    borderRadius: 0,
+    border: '1px solid',
+    borderColor: geoViewColors.grey.dark[100],
+    boxShadow: 2,
+    background: geoViewColors.white,
+    objectFit: 'scale-down',
+    width: '35px',
+    height: '35px',
+    marginRight: '10px',
+  },
+
+  'a[href]': {
+    color: geoViewColors.primary.main,
+    '*:hover': {
+      color: geoViewColors.primary.dark[300],
+    },
+  },
+
+  '.bordered': {
+    border: `1px solid ${geoViewColors.bgColor.darken(0.5, 0.5)}`,
+    boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.darken(0.2, 0.5)}`,
+  },
+  '.bordered-primary': {
+    border: `1px solid ${geoViewColors.primary.darken(0.1, 0.9)}`,
+    boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`,
+  },
+});