From b0cc667965a28ccefc05d2f14f5c6b3cd36e232f Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Mon, 26 Feb 2024 16:05:16 -0500
Subject: [PATCH] fixes based on feedback

---
 .../src/core/components/data-table/data-table.tsx   | 10 +++++-----
 .../core/components/data-table/export-button.tsx    |  2 +-
 .../src/core/components/legend/legend-layer.tsx     |  2 +-
 .../core/components/notifications/notifications.tsx | 13 +++++++++++++
 packages/geoview-time-slider/src/time-slider.tsx    |  5 +++++
 5 files changed, 25 insertions(+), 7 deletions(-)

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
index c479bbb97a6..63ca38ceefd 100644
--- a/packages/geoview-core/src/core/components/data-table/data-table.tsx
+++ b/packages/geoview-core/src/core/components/data-table/data-table.tsx
@@ -409,12 +409,12 @@ function DataTable({ data, layerPath, tableHeight = 600 }: DataTableProps) {
     },
     renderToolbarInternalActions: ({ table }) => (
       <Box>
-        <MRTToggleFiltersButton table={table} />
+        <MRTToggleFiltersButton className='style1' table={table} />
         <FilterMap layerPath={layerPath} />
-        <MRTShowHideColumnsButton table={table} />
-        <MRTToggleDensePaddingButton table={table} />
-        <MRTFullScreenToggleButton table={table} />
-        <ExportButton rows={rows} columns={columns}>
+        <MRTShowHideColumnsButton className='style1' table={table} />
+        <MRTToggleDensePaddingButton className='style1' table={table} />
+        <MRTFullScreenToggleButton className='style1'  table={table} />
+        <ExportButton  rows={rows} columns={columns}>
           <JSONExportButton features={data.features as TypeFeatureInfoEntry[]} layerPath={layerPath} />
         </ExportButton>
       </Box>
diff --git a/packages/geoview-core/src/core/components/data-table/export-button.tsx b/packages/geoview-core/src/core/components/data-table/export-button.tsx
index 95c56d6c338..8cb45ef9400 100644
--- a/packages/geoview-core/src/core/components/data-table/export-button.tsx
+++ b/packages/geoview-core/src/core/components/data-table/export-button.tsx
@@ -80,7 +80,7 @@ function ExportButton({ rows, columns, children }: ExportButtonProps): JSX.Eleme
 
   return (
     <>
-      <IconButton onClick={handleClick}>
+      <IconButton onClick={handleClick}  className='style1'>
         <Tooltip title={t('dataTable.exportBtn')} placement="bottom" enterDelay={100}>
           <DownloadIcon />
         </Tooltip>
diff --git a/packages/geoview-core/src/core/components/legend/legend-layer.tsx b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
index bc75c80a1e8..b2df689b267 100644
--- a/packages/geoview-core/src/core/components/legend/legend-layer.tsx
+++ b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
@@ -130,7 +130,7 @@ export function LegendLayer(props: LegendLayerProps): JSX.Element {
               className="layerTitle"
               secondary={getSecondaryText()}
             />
-            <IconButton sx={{ marginBottom: '20px' }} color="primary" edge="end" size="small" tooltip="layers.toggleCollapse">
+            <IconButton sx={{ marginBottom: '20px' }} className="style1" edge="end" size="small" tooltip="layers.toggleCollapse">
               {isGroupOpen ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
             </IconButton>
           </>
diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx
index 1df54a76832..ba0baadf648 100644
--- a/packages/geoview-core/src/core/components/notifications/notifications.tsx
+++ b/packages/geoview-core/src/core/components/notifications/notifications.tsx
@@ -20,6 +20,7 @@ import { getSxClasses } from './notifications-style';
 import { useAppNotifications, useAppStoreActions } from '@/core/stores/store-interface-and-intial-values/app-state';
 import { useGeoViewMapId } from '@/app';
 import { logger } from '@/core/utils/logger';
+import { ClickAwayListener } from '@mui/material';
 
 export type NotificationDetailsType = {
   key: string;
@@ -63,6 +64,12 @@ export default function Notifications(): JSX.Element {
     setOpen(!open);
   };
 
+  const handleClickAway = () => {
+    if(open) {
+      setOpen(false);
+    }
+  }
+
   /**
    * Remove a notification
    */
@@ -104,6 +111,9 @@ export default function Notifications(): JSX.Element {
 
   return (
     <>
+    <ClickAwayListener mouseEvent="onMouseDown"
+  touchEvent="onTouchStart" onClickAway={handleClickAway}>
+      <div>
       <Badge badgeContent={notificationsCount} color="error">
         <IconButton
           id="notification"
@@ -118,6 +128,7 @@ export default function Notifications(): JSX.Element {
       </Badge>
 
       <Popper open={open} anchorEl={anchorEl} placement="right-end" container={mapElem}>
+      
         <Paper sx={sxClasses.notificationPanel}>
           <Typography component="h3" sx={sxClasses.notificationsTitle}>
             {t('appbar.notifications')}
@@ -133,6 +144,8 @@ export default function Notifications(): JSX.Element {
           </Box>
         </Paper>
       </Popper>
+      </div>
+      </ClickAwayListener>
     </>
   );
 }
diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx
index 86352344355..7cc68517a76 100644
--- a/packages/geoview-time-slider/src/time-slider.tsx
+++ b/packages/geoview-time-slider/src/time-slider.tsx
@@ -359,6 +359,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) {
           <div style={{ textAlign: 'center', paddingTop: '20px' }}>
             {!singleHandle && (
               <IconButton
+                className='style1'
                 aria-label={returnLockTooltip()}
                 tooltip={returnLockTooltip()}
                 tooltipPlacement="top"
@@ -368,6 +369,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) {
               </IconButton>
             )}
             <IconButton
+            className='style1'
               aria-label={getLocalizedMessage(mapId, 'timeSlider.slider.back') as string}
               tooltip="timeSlider.slider.back"
               tooltipPlacement="top"
@@ -377,6 +379,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) {
               <ArrowLeftIcon />
             </IconButton>
             <IconButton
+              className='style1'
               aria-label={
                 isPlaying
                   ? (getLocalizedMessage(mapId, 'timeSlider.slider.pauseAnimation') as string)
@@ -390,6 +393,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) {
               {!isPlaying ? <PlayArrowIcon /> : <PauseIcon />}
             </IconButton>
             <IconButton
+              className='style1'
               aria-label={getLocalizedMessage(mapId, 'timeSlider.slider.forward') as string}
               tooltip="timeSlider.slider.forward"
               tooltipPlacement="top"
@@ -399,6 +403,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) {
               <ArrowRightIcon />
             </IconButton>
             <IconButton
+              className='style1'
               aria-label={getLocalizedMessage(mapId, 'timeSlider.slider.changeDirection') as string}
               tooltip="timeSlider.slider.changeDirection"
               tooltipPlacement="top"