adding global style overrides

Canadian-Geospatial-Platform · Feb 15, 2024 · e766c1d · e766c1d
1 parent bc15bf8
commit e766c1d
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 29 deletions.
diff --git a/packages/geoview-core/src/core/components/data-table/data-table-style.ts b/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',

diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/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: (

diff --git a/packages/geoview-core/src/core/components/details/details-style.ts b/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': {
@@ -56,7 +44,7 @@ export const getSxClasses = (theme: Theme) => ({
     marginRight: 0,
     wordBreak: 'break-word',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
+    textOverflow: 'ellipsis'
   },
   boxContainerFeatureInfo: {
     wordWrap: 'break-word',

diff --git a/packages/geoview-core/src/core/components/details/feature-info-new.tsx b/packages/geoview-core/src/core/components/details/feature-info-new.tsx
@@ -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>

diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
@@ -147,7 +147,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>
   );

diff --git a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
@@ -867,7 +867,7 @@ export function AddNewLayer(): JSX.Element {
     }
     setIsLoading(false);
     let message = '';
-    switch(geoviewLayerInstance?.layerPhase) {
+    switch (geoviewLayerInstance?.layerPhase) {
       case 'loading':
         message = api.utilities.replaceParams([layerName], t('layers.layerAddedAndLoading'));
         break;

diff --git a/packages/geoview-core/src/ui/style/global-style-overrides.ts b/packages/geoview-core/src/ui/style/global-style-overrides.ts
@@ -0,0 +1,25 @@
+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],
+    }
+  }
+})
diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
@@ -1,6 +1,7 @@
 import { ThemeOptions } from '@mui/material';
 import { IGeoViewColors } from './types';
 import { font, headingStyles, opacity, geoViewColors as defaultGeoViewColors, geoViewFontSizes } from './default';
+import { globalStyleOverrides } from './global-style-overrides';
 
 export const generateThemeOptions = function (geoViewColors: IGeoViewColors = defaultGeoViewColors): ThemeOptions {
   const themeOptions: ThemeOptions = {
@@ -59,7 +60,7 @@ export const generateThemeOptions = function (geoViewColors: IGeoViewColors = de
       divider: 'rgba(0, 0, 0, 0.12)',
       background: {
         paper: geoViewColors.bgColor.light[600],
-        default: geoViewColors.bgColor.light[500]
+        default: geoViewColors.bgColor.light[500],
       },
       action: {
         active: geoViewColors.primary.main,
@@ -178,6 +179,9 @@ export const generateThemeOptions = function (geoViewColors: IGeoViewColors = de
       left: '0%',
     },
     components: {
+      MuiCssBaseline: {
+        styleOverrides: globalStyleOverrides(geoViewColors),
+      },
       MuiTooltip: {
         styleOverrides: {
           tooltip: {