fix the appBar buttons

Canadian-Geospatial-Platform · Feb 20, 2024 · bd2e70e · bd2e70e
1 parent 174fa22
commit bd2e70e
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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`,