From bd2e70e45499d940d9a49b7212089b2603e06997 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Tue, 20 Feb 2024 14:46:08 -0500
Subject: [PATCH] fix the appBar buttons

---
 .../src/core/components/app-bar/app-bar.tsx        |  2 +-
 .../core/components/app-bar/buttons/version.tsx    |  2 +-
 .../components/notifications/notifications.tsx     |  2 +-
 packages/geoview-core/src/ui/style/default.ts      |  2 +-
 .../src/ui/style/themeOptionsGenerator.ts          | 14 ++++++++++++++
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
index 5feb502d0bc..aab1e8761c3 100644
--- a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
+++ b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
@@ -275,7 +275,7 @@ export function Appbar(): JSX.Element {
           <Box>
             <List sx={sxClasses.appBarList}>
               <ListItem>
-                <ExportButton className={` ${activeModalId ? 'export' : ''}`} />
+                <ExportButton className={` ${activeModalId ? 'style2' : ''}`} />
               </ListItem>
             </List>
           </Box>
diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
index cab155a05d9..5e5e30aa0ab 100644
--- a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
+++ b/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={open ? 'style2' : ''}
       >
         <SvgIcon viewBox="-4 -2 38 36">
           <GeoCaIcon />
diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx
index 688203151e2..3c323b0dc87 100644
--- a/packages/geoview-core/src/core/components/notifications/notifications.tsx
+++ b/packages/geoview-core/src/core/components/notifications/notifications.tsx
@@ -99,7 +99,7 @@ export default function Notifications(): JSX.Element {
           tooltip="appbar.notifications"
           tooltipPlacement="bottom-end"
           onClick={handleOpenPopover}
-          className={open ? 'style1' : ''}
+          className={open ? 'style2' : ''}
           color="primary"
         >
           <NotificationsIcon />
diff --git a/packages/geoview-core/src/ui/style/default.ts b/packages/geoview-core/src/ui/style/default.ts
index 099068db360..045ebae72ec 100644
--- a/packages/geoview-core/src/ui/style/default.ts
+++ b/packages/geoview-core/src/ui/style/default.ts
@@ -20,7 +20,7 @@ export const opacity = {
 export const geoViewColors: IGeoViewColors = {
   white: '#FFFFFF',
 
-  bgColor: new GeoViewColorClass('#dadde5'),
+  bgColor: new GeoViewColorClass('#F1F2F5'),
   primary: new GeoViewColorClass('#515BA5'),
   secondary: new GeoViewColorClass('#1976d2'),
   textColor: new GeoViewColorClass('#393939'),
diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
index f92dc960547..66eaaab0a00 100644
--- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
+++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
@@ -197,6 +197,20 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV
               backgroundColor: `${geoViewColors.bgColor.dark[100]} !important`,
               border: `3px solid transparent !important`,
               color: `${geoViewColors.primary.main} !important`,
+              '&:hover, &:active, &.active': {
+                backgroundColor: `${geoViewColors.primary.light[400]} !important`,
+                border: `3px solid ${geoViewColors.primary.light[500]} !important`,
+                color: `${geoViewColors.primary.dark[100]} !important`,
+                boxShadow: 1,
+              },
+              '&:disabled': {
+                color: `${geoViewColors.bgColor.dark[450]} !important`,
+              },
+            },
+            '&.style2': {
+              backgroundColor: `${geoViewColors.primary.main} !important`,
+              border: `3px solid transparent !important`,
+              color: `${geoViewColors.white} !important`,
               '&:hover, &:active, &.active': {
                 backgroundColor: `${geoViewColors.primary.light[800]} !important`,
                 border: `3px solid ${geoViewColors.primary.light[500]} !important`,