Fix styles

Canadian-Geospatial-Platform · Dec 4, 2024 · fd4c463 · fd4c463
1 parent 853661c
commit fd4c463
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 113 deletions.
diff --git a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx
@@ -157,7 +157,7 @@ export default function DataTableModal(): JSX.Element {
           <Box sx={{ minHeight: '300px', minWidth: '450px', position: 'relative' }}>
             <CircularProgress
               isLoaded={!isLoading}
-              sx={{
+              style={{
                 backgroundColor: 'inherit',
               }}
             />

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
@@ -476,10 +476,10 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps):
     columnVirtualizerOptions: { overscan: 2 },
     localization: dataTableLocalization,
     muiTableHeadCellProps: {
-      sx: () => sxClasses.tableHeadCell,
+      sx: sxClasses.tableHeadCell,
     },
     muiTableHeadProps: {
-      sx: () => sxClasses.tableHead,
+      sx: sxClasses.tableHead,
     },
     defaultColumn: {
       muiFilterTextFieldProps: {

diff --git a/packages/geoview-core/src/core/components/export/export-modal-style.ts b/packages/geoview-core/src/core/components/export/export-modal-style.ts
@@ -1,85 +1,85 @@
-import { Theme } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
-
-type SxStyles = Record<string, SxProps<Theme>>;
-
-/**
- * Get custom sx classes for the export modal
- *
- * @param {Theme} theme the theme object
- * @returns {Object} the sx classes object
- */
-export const getSxClasses = (theme: Theme): SxStyles => ({
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-    padding: theme.spacing(2),
-    '& .MuiFormControl-root': {
-      marginTop: theme.spacing(2),
-    },
-  },
-  exportContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(2),
-  },
-  mapContainer: {
-    width: '100%',
-    marginBottom: theme.spacing(2),
-    '& img': {
-      maxWidth: '100%',
-      height: 'auto',
-    },
-  },
-  legendContainer: {
-    width: '100%',
-    marginTop: theme.spacing(2),
-    '& img': {
-      maxWidth: '100%',
-      height: 'auto',
-    },
-  },
-  exportTitle: {
-    width: '100%',
-    textAlign: 'center',
-    marginBottom: theme.spacing(2),
-    color: theme.palette.text.primary,
-  },
-  attributionContainer: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    marginTop: theme.spacing(2),
-    padding: theme.spacing(1),
-    backgroundColor: theme.palette.background.default,
-  },
-  northArrowContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    '& svg': {
-      width: '24px',
-      height: '24px',
-    },
-  },
-  scaleContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: '0.875rem',
-  },
-  loadingContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%',
-    height: '200px',
-  },
-  dialogContent: {
-    minHeight: '400px',
-    maxHeight: '80vh',
-    overflow: 'auto',
-  },
-});
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+
+type SxStyles = Record<string, SxProps<Theme>>;
+
+/**
+ * Get custom sx classes for the export modal
+ *
+ * @param {Theme} theme the theme object
+ * @returns {Object} the sx classes object
+ */
+export const getSxClasses = (theme: Theme): SxStyles => ({
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    padding: theme.spacing(2),
+    '& .MuiFormControl-root': {
+      marginTop: theme.spacing(2),
+    },
+  },
+  exportContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(2),
+  },
+  mapContainer: {
+    width: '100%',
+    marginBottom: theme.spacing(2),
+    '& img': {
+      maxWidth: '100%',
+      height: 'auto',
+    },
+  },
+  legendContainer: {
+    width: '100%',
+    marginTop: theme.spacing(2),
+    '& img': {
+      maxWidth: '100%',
+      height: 'auto',
+    },
+  },
+  exportTitle: {
+    width: '100%',
+    textAlign: 'center',
+    marginBottom: theme.spacing(2),
+    color: theme.palette.text.primary,
+  },
+  attributionContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    marginTop: theme.spacing(2),
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.default,
+  },
+  northArrowContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    '& svg': {
+      width: '24px',
+      height: '24px',
+    },
+  },
+  scaleContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '0.875rem',
+  },
+  loadingContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '200px',
+  },
+  dialogContent: {
+    minHeight: '400px',
+    maxHeight: '80vh',
+    overflow: 'auto',
+  },
+});
diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
@@ -190,7 +190,7 @@ export function NavBar(props: NavBarProps): JSX.Element {
   }
 
   return (
-    <Box ref={navBarRef} sx={[sxClasses.navBarRef]}>
+    <Box ref={navBarRef} sx={sxClasses.navBarRef}>
       {Object.keys(buttonPanelGroups).map((key) => renderButtonPanelGroup(buttonPanelGroups[key], key))}
     </Box>
   );

diff --git a/packages/geoview-core/src/core/containers/containers-style.ts b/packages/geoview-core/src/core/containers/containers-style.ts
@@ -29,8 +29,7 @@ export const getFocusTrapSxClasses = (theme: Theme): SxStyles => {
       border: 'unset',
     },
     enableFocus: {
-      border: `5px solid ${borderColor}
-      }`,
+      border: `5px solid ${borderColor}`,
     },
   };
 };

diff --git a/packages/geoview-core/src/core/containers/focus-trap.tsx b/packages/geoview-core/src/core/containers/focus-trap.tsx
@@ -102,7 +102,8 @@ export function FocusTrapDialog(props: FocusTrapProps): JSX.Element {
   const handleExit = (evt: KeyboardEvent): void => {
     if (!ARROW_KEY_CODES.includes(evt.code as string)) {
       // remove the border from the map
-      mapElementStore!.style.border = sxClasses.exitFocus.border;
+      // TODO: Handle the focus style/stste within the store (set here, listen in map)
+      mapElementStore!.style.border = 'unset';
     }
 
     if (evt.code === 'KeyQ' && evt.ctrlKey) {
@@ -130,7 +131,7 @@ export function FocusTrapDialog(props: FocusTrapProps): JSX.Element {
   const handleEnable = (): void => {
     setOpen(false);
     setFocusTrap();
-    document.getElementById(`mapTargetElement-${mapId}`)!.style.border = sxClasses.enableFocus.border;
+    document.getElementById(`mapTargetElement-${mapId}`)!.style.border = '5px solid black';
   };
 
   const handleSkip = (): void => {
@@ -164,7 +165,7 @@ export function FocusTrapDialog(props: FocusTrapProps): JSX.Element {
           setOpen(false);
           exitFocus();
           // remove border from the map
-          document.getElementById(`mapTargetElement-${mapId}`)!.style.border = sxClasses.exitFocus.border;
+          document.getElementById(`mapTargetElement-${mapId}`)!.style.border = 'unset';
         },
         { once: true }
       );

diff --git a/packages/geoview-core/src/ui/circular-progress/circular-progress.tsx b/packages/geoview-core/src/ui/circular-progress/circular-progress.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/require-default-props */
 import { CSSProperties } from 'react';
 
-import { useTheme } from '@mui/material/styles';
+import { SxProps, Theme, useTheme } from '@mui/material/styles';
 import { CircularProgress as MaterialCircularProgress, CircularProgressProps, Box, Fade } from '@mui/material';
 
 import { getSxClasses } from './circular-progress-style';
@@ -12,7 +12,7 @@ import { getSxClasses } from './circular-progress-style';
 interface TypeCircularProgressProps extends CircularProgressProps {
   isLoaded: boolean;
   style?: CSSProperties;
-  sx?: CSSProperties;
+  sx?: SxProps<Theme>;
 }
 
 /**
@@ -27,9 +27,10 @@ export function CircularProgress(props: TypeCircularProgressProps): JSX.Element
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 
+  const sxMerged = { ...sxClasses.loading, ...sx };
   return (
     <Fade in={!isLoaded} timeout={250} mountOnEnter unmountOnExit>
-      <Box sx={{ ...sxClasses.loading, ...sx }} style={{ ...style }}>
+      <Box sx={sxMerged} style={{ ...style }}>
         <MaterialCircularProgress sx={sxClasses.progress} {...rest} />
       </Box>
     </Fade>

diff --git a/packages/geoview-core/src/ui/divider/divider.tsx b/packages/geoview-core/src/ui/divider/divider.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/require-default-props */
-import { useTheme } from '@mui/material/styles';
+import { SxProps, Theme, useTheme } from '@mui/material/styles';
 import { Divider as MaterialDivider, DividerProps } from '@mui/material';
 
 import { getSxClasses } from './divider-style';
@@ -10,6 +10,7 @@ import { getSxClasses } from './divider-style';
 interface TypeDividerProps extends DividerProps {
   orientation?: 'horizontal' | 'vertical';
   grow?: boolean;
+  sx?: SxProps<Theme>;
 }
 
 /**
@@ -30,12 +31,6 @@ export function Divider(props: TypeDividerProps): JSX.Element {
     dividerOrientation = orientation === 'horizontal' ? sxClasses.horizontal : sxClasses.vertical;
   }
 
-  return (
-    <MaterialDivider
-      sx={{ ...(grow ? sxClasses.grow : {}), ...dividerOrientation, ...sx }}
-      className={`${className ?? ''}`}
-      style={style}
-      {...rest}
-    />
-  );
+  const sxMerged = { ...(grow ? sxClasses.grow : {}), ...dividerOrientation, ...sx };
+  return <MaterialDivider sx={sxMerged} className={`${className ?? ''}`} style={style} {...rest} />;
 }
diff --git a/packages/geoview-core/src/ui/tabs/tabs.tsx b/packages/geoview-core/src/ui/tabs/tabs.tsx
@@ -218,6 +218,9 @@ export function Tabs(props: TypeTabsProps): JSX.Element {
     tabPanelRef.current?.addEventListener('keydown', handleFooterbarEscapeKey);
   }, [selectedTab, isCollapsed, tabs, onCloseKeyboard]);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const sxMerged: any = { ...sxClasses.panel, visibility: TabContentVisibilty };
+
   return (
     <Grid container sx={{ width: '100%', height: '100%' }}>
       <Grid container id="footerbar-header" sx={{ backgroundColor: theme.palette.geoViewColor.bgColor.dark[100], width: '100%' }}>
@@ -270,13 +273,7 @@ export function Tabs(props: TypeTabsProps): JSX.Element {
           {rightButtons as ReactNode}
         </Grid>
       </Grid>
-      <Box
-        id="tabPanel"
-        sx={{
-          ...sxClasses.panel,
-          visibility: TabContentVisibilty,
-        }}
-      >
+      <Box id="tabPanel" sx={sxMerged}>
         {tabPanels.map((tab, index) => {
           return tab ? (
             <TabPanel