From e766c1de41f5f787ec091e5dbeff93c1466c0b91 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Thu, 15 Feb 2024 12:26:10 -0500 Subject: [PATCH 01/19] adding global style overrides --- .../components/data-table/data-table-style.ts | 11 -------- .../core/components/data-table/data-table.tsx | 2 +- .../core/components/details/details-style.ts | 14 +---------- .../components/details/feature-info-new.tsx | 2 +- .../hover-tooltip/hover-tooltip.tsx | 2 +- .../add-new-layer/add-new-layer.tsx | 2 +- .../src/ui/style/global-style-overrides.ts | 25 +++++++++++++++++++ .../src/ui/style/themeOptionsGenerator.ts | 6 ++++- 8 files changed, 35 insertions(+), 29 deletions(-) create mode 100644 packages/geoview-core/src/ui/style/global-style-overrides.ts 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 index a091033a139..94f8272218d 100644 --- 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 index 64458c1f899..6644d423950 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 @@ -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 index f363c1a5ea7..c90e1ea14b2 100644 --- 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 index 51004deb42f..75b7a683d89 100644 --- 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 */} - + {nameFieldValue} 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 index ed36a849434..4fc102a142b 100644 --- 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', }} > - {t('hovertooltip.alticon')!} + {tooltipValue} ); 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 index 134a6f86218..a7056f26d48 100644 --- 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 new file mode 100644 index 00000000000..4acdcc274d1 --- /dev/null +++ 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], + } + } +}) \ No newline at end of file diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index 732bc1447dd..9c01c04f377 100644 --- 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: { From b9f518ee17e0736abfb7f3e6362c796bc9676291 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Mon, 19 Feb 2024 14:14:14 -0500 Subject: [PATCH 02/19] post build changes --- .../core/components/data-table/data-table.tsx | 2 +- .../core/components/details/details-style.ts | 2 +- .../components/details/feature-info-new.tsx | 2 +- .../hover-tooltip/hover-tooltip.tsx | 2 +- packages/geoview-core/src/ui/style/default.ts | 2 +- .../src/ui/style/global-style-overrides.ts | 48 +++++++++---------- 6 files changed, 28 insertions(+), 30 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 6644d423950..dabe7aa063c 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 @@ -370,7 +370,7 @@ function DataTable({ data, layerPath, tableHeight = 600 }: DataTableProps) { component="img" alt={feature.featureIcon.toDataURL().toString()} src={feature.featureIcon.toDataURL().toString()} - className='layer-icon' + 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 index c90e1ea14b2..77783c85827 100644 --- a/packages/geoview-core/src/core/components/details/details-style.ts +++ b/packages/geoview-core/src/core/components/details/details-style.ts @@ -44,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 index 75b7a683d89..8cab35d4d93 100644 --- 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 */} - + {nameFieldValue} 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 index 3a6b3c51ec3..bdc8eb5d66e 100644 --- a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx +++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx @@ -156,7 +156,7 @@ export function HoverTooltip(): JSX.Element { visibility: showTooltip ? 'visible' : 'hidden', }} > - + {tooltipValue} ); diff --git a/packages/geoview-core/src/ui/style/default.ts b/packages/geoview-core/src/ui/style/default.ts index 045ebae72ec..099068db360 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('#F1F2F5'), + bgColor: new GeoViewColorClass('#dadde5'), primary: new GeoViewColorClass('#515BA5'), secondary: new GeoViewColorClass('#1976d2'), textColor: new GeoViewColorClass('#393939'), diff --git a/packages/geoview-core/src/ui/style/global-style-overrides.ts b/packages/geoview-core/src/ui/style/global-style-overrides.ts index 4acdcc274d1..83ddc8f9f53 100644 --- a/packages/geoview-core/src/ui/style/global-style-overrides.ts +++ b/packages/geoview-core/src/ui/style/global-style-overrides.ts @@ -1,25 +1,23 @@ -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], - } - } -}) \ No newline at end of file +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], + }, + }, +}); From bd2e70e45499d940d9a49b7212089b2603e06997 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Tue, 20 Feb 2024 14:46:08 -0500 Subject: [PATCH 03/19] 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 { - + 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' : ''} > 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" > 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`, From 1427b4b4de7ad48d2b272004a959a6b98763d14a Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Tue, 20 Feb 2024 15:21:42 -0500 Subject: [PATCH 04/19] fix buttons and subtitle text --- .../src/core/components/export/export-modal-button.tsx | 5 +++-- .../geoview-core/src/core/components/legend/legend-styles.ts | 4 ++++ .../geoview-core/src/core/components/nav-bar/nav-bar.tsx | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/geoview-core/src/core/components/export/export-modal-button.tsx b/packages/geoview-core/src/core/components/export/export-modal-button.tsx index fc5738eb7ed..7a4cd9f4782 100644 --- a/packages/geoview-core/src/core/components/export/export-modal-button.tsx +++ b/packages/geoview-core/src/core/components/export/export-modal-button.tsx @@ -7,6 +7,7 @@ import { useGeoViewMapId } from '@/app'; */ interface ExportProps { className?: string; + sxDetails?: object; } /** @@ -15,7 +16,7 @@ interface ExportProps { * @returns {JSX.Element} the export button */ export default function ExportButton(props: ExportProps): JSX.Element { - const { className } = props; + const { className, sxDetails } = props; // get store function const mapId = useGeoViewMapId(); @@ -27,8 +28,8 @@ export default function ExportButton(props: ExportProps): JSX.Element { tooltip="appbar.export" tooltipPlacement="bottom-end" onClick={() => openModal({ activeElementId: 'export', callbackElementId: `${mapId}-export-btn` })} + sx={sxDetails} className={className} - color="primary" > diff --git a/packages/geoview-core/src/core/components/legend/legend-styles.ts b/packages/geoview-core/src/core/components/legend/legend-styles.ts index 7d5c0335a6e..9c89d21e559 100644 --- a/packages/geoview-core/src/core/components/legend/legend-styles.ts +++ b/packages/geoview-core/src/core/components/legend/legend-styles.ts @@ -48,6 +48,10 @@ export const getSxClasses = (theme: Theme) => ({ overflow: 'hidden', }, + '& .layerTitle > .MuiListItemText-secondary': { + color: theme.palette.geoViewColor.textColor.light[400], + }, + '& .MuiListItemText-root': { marginLeft: '12px', }, 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 index e2887ca2d91..b4eb44ed739 100644 --- a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx +++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx @@ -181,7 +181,7 @@ export function Navbar(): JSX.Element { {navBarComponents.includes('fullscreen') && } {navBarComponents.includes('location') && } {navBarComponents.includes('home') && } - {navBarComponents.includes('export') && } + {navBarComponents.includes('export') && } From f1361cfb9d9baac8de71b3640d9a81cf3e334364 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 21 Feb 2024 10:35:48 -0500 Subject: [PATCH 05/19] adding borders for contrast --- .../src/core/components/common/layer-list.tsx | 1 + .../components/layers/left-panel/single-layer.tsx | 8 +++++++- .../src/ui/style/global-style-overrides.ts | 7 +++++++ .../src/ui/style/themeOptionsGenerator.ts | 11 +++++++++++ 4 files changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/geoview-core/src/core/components/common/layer-list.tsx b/packages/geoview-core/src/core/components/common/layer-list.tsx index 4a81cb8c977..e18938d6ef9 100644 --- a/packages/geoview-core/src/core/components/common/layer-list.tsx +++ b/packages/geoview-core/src/core/components/common/layer-list.tsx @@ -138,6 +138,7 @@ const LayerListItem = memo(function LayerListItem({ isSelected, layer, onListIte border: isSelected ? sxClasses.borderWithIndex : sxClasses.borderNone, backgroundColor: renderLayerBackground(), }} + className="bordered" > diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx index 58928b98f75..080ed237648 100644 --- a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx +++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx @@ -243,13 +243,19 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi function getContainerClass() { const result: string[] = ['layerItemContainer', layer.layerStatus ?? '']; + if(depth === 0) { + result.push('bordered'); + } + // if layer has selected child but its not itself selected if (layerChildIsSelected && !layerIsSelected && !isGroupOpen) { result.push('selectedLayer'); + result.push('bordered-primary'); } if (layerIsSelected) { result.push('selectedLayer'); + result.push('bordered-primary'); } if (isDragging) { @@ -260,7 +266,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi } return ( - + diff --git a/packages/geoview-core/src/ui/style/global-style-overrides.ts b/packages/geoview-core/src/ui/style/global-style-overrides.ts index 83ddc8f9f53..2f0541e6afd 100644 --- a/packages/geoview-core/src/ui/style/global-style-overrides.ts +++ b/packages/geoview-core/src/ui/style/global-style-overrides.ts @@ -20,4 +20,11 @@ export const globalStyleOverrides = (geoViewColors: IGeoViewColors) => ({ color: geoViewColors.primary.dark[300], }, }, + + '.bordered': { + border: `2px solid ${geoViewColors.bgColor.darken(0.1, 0.9)}`, + }, + '.bordered-primary': { + border: `2px solid ${geoViewColors.primary.darken(0.1, 0.9)}`, + } }); diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index 66eaaab0a00..3d7083aaa95 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -190,6 +190,17 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV }, }, }, + MuiPaper: { + styleOverrides: { + root: { + borderRadius: 5, + borderWith: '2px', + borderColor: geoViewColors.bgColor.darken(0.1, 0.9), + borderStyle: 'solid', + boxShadow: 'none' + } + } + }, MuiIconButton: { styleOverrides: { root: { From 17639e8f9f9800ad26f682a5b3c184ba46cd37b4 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 21 Feb 2024 10:51:28 -0500 Subject: [PATCH 06/19] post build --- .../core/components/layers/left-panel/single-layer.tsx | 4 ++-- .../geoview-core/src/core/components/nav-bar/nav-bar.tsx | 9 ++------- .../geoview-core/src/ui/style/global-style-overrides.ts | 2 +- .../geoview-core/src/ui/style/themeOptionsGenerator.ts | 6 +++--- 4 files changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx index 080ed237648..b160bceb375 100644 --- a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx +++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx @@ -243,7 +243,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi function getContainerClass() { const result: string[] = ['layerItemContainer', layer.layerStatus ?? '']; - if(depth === 0) { + if (depth === 0) { result.push('bordered'); } @@ -266,7 +266,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi } return ( - + 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 index b4eb44ed739..9ac8c5a56e7 100644 --- a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx +++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx @@ -17,11 +17,7 @@ import { EVENT_NAMES } from '@/api/events/event-types'; import { payloadIsAButtonPanel, ButtonPanelPayload, PayloadBaseClass } from '@/api/events/payloads'; import { TypeButtonPanel } from '@/ui/panel/panel-types'; import { getSxClasses } from './nav-bar-style'; -import { - useUIActiveFocusItem, - useUIMapInfoExpanded, - useUINavbarComponents, -} from '@/core/stores/store-interface-and-intial-values/ui-state'; +import { useUIMapInfoExpanded, useUINavbarComponents } from '@/core/stores/store-interface-and-intial-values/ui-state'; import { logger } from '@/core/utils/logger'; /** @@ -41,7 +37,6 @@ export function Navbar(): JSX.Element { // get the expand or collapse from store const mapInfoExpanded = useUIMapInfoExpanded(); - const activeModalId = useUIActiveFocusItem().activeElementId; const navBarComponents = useUINavbarComponents(); // #region REACT HOOKS @@ -181,7 +176,7 @@ export function Navbar(): JSX.Element { {navBarComponents.includes('fullscreen') && } {navBarComponents.includes('location') && } {navBarComponents.includes('home') && } - {navBarComponents.includes('export') && } + {navBarComponents.includes('export') && } diff --git a/packages/geoview-core/src/ui/style/global-style-overrides.ts b/packages/geoview-core/src/ui/style/global-style-overrides.ts index 2f0541e6afd..cf19bd20080 100644 --- a/packages/geoview-core/src/ui/style/global-style-overrides.ts +++ b/packages/geoview-core/src/ui/style/global-style-overrides.ts @@ -26,5 +26,5 @@ export const globalStyleOverrides = (geoViewColors: IGeoViewColors) => ({ }, '.bordered-primary': { border: `2px solid ${geoViewColors.primary.darken(0.1, 0.9)}`, - } + }, }); diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index 3d7083aaa95..579bbcfa97b 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -197,9 +197,9 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV borderWith: '2px', borderColor: geoViewColors.bgColor.darken(0.1, 0.9), borderStyle: 'solid', - boxShadow: 'none' - } - } + boxShadow: 'none', + }, + }, }, MuiIconButton: { styleOverrides: { From cece7b2dfafcdb24bc39b3460b3e53d44315fae4 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 21 Feb 2024 11:35:04 -0500 Subject: [PATCH 07/19] fix it for the dark theme --- packages/geoview-core/src/ui/style/global-style-overrides.ts | 2 +- packages/geoview-core/src/ui/style/themeOptionsGenerator.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/geoview-core/src/ui/style/global-style-overrides.ts b/packages/geoview-core/src/ui/style/global-style-overrides.ts index cf19bd20080..764ba748c9c 100644 --- a/packages/geoview-core/src/ui/style/global-style-overrides.ts +++ b/packages/geoview-core/src/ui/style/global-style-overrides.ts @@ -22,7 +22,7 @@ export const globalStyleOverrides = (geoViewColors: IGeoViewColors) => ({ }, '.bordered': { - border: `2px solid ${geoViewColors.bgColor.darken(0.1, 0.9)}`, + border: `2px solid ${geoViewColors.bgColor.darken(0.5, 0.5)}`, }, '.bordered-primary': { border: `2px solid ${geoViewColors.primary.darken(0.1, 0.9)}`, diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index 579bbcfa97b..b3a6bac051b 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -195,7 +195,7 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV root: { borderRadius: 5, borderWith: '2px', - borderColor: geoViewColors.bgColor.darken(0.1, 0.9), + borderColor: geoViewColors.bgColor.darken(0.5, 0.5), borderStyle: 'solid', boxShadow: 'none', }, From b4a5bcd787c8ea4678a54fa55749e13bb0d1c8eb Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 21 Feb 2024 13:02:46 -0500 Subject: [PATCH 08/19] sticking to border --- .../src/core/components/details/feature-info-new.tsx | 2 +- .../geoview-core/src/ui/style/global-style-overrides.ts | 2 ++ .../geoview-core/src/ui/style/themeOptionsGenerator.ts | 8 ++++++-- 3 files changed, 9 insertions(+), 3 deletions(-) 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 index 8cab35d4d93..e021dc47203 100644 --- a/packages/geoview-core/src/core/components/details/feature-info-new.tsx +++ b/packages/geoview-core/src/core/components/details/feature-info-new.tsx @@ -99,7 +99,7 @@ export function FeatureInfo({ features, currentFeatureIndex }: TypeFeatureInfoPr }, [checkedFeatures, feature]); // ! Check if feature is necessary in this dependency array? If so explain it in comment? Should be featurUid? return ( - + ({ '.bordered': { border: `2px solid ${geoViewColors.bgColor.darken(0.5, 0.5)}`, + boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, }, '.bordered-primary': { border: `2px solid ${geoViewColors.primary.darken(0.1, 0.9)}`, + boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, }, }); diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index b3a6bac051b..d37eb85f1a2 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -194,10 +194,14 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV styleOverrides: { root: { borderRadius: 5, - borderWith: '2px', + borderWith: '1px', borderColor: geoViewColors.bgColor.darken(0.5, 0.5), borderStyle: 'solid', - boxShadow: 'none', + boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, + + '&.unbordered': { + borderStyle: 'none' + } }, }, }, From 6748ad53730bb948fadd126d9d970b5c838e56a4 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 21 Feb 2024 13:12:57 -0500 Subject: [PATCH 09/19] unbordered --- packages/geoview-core/src/ui/style/themeOptionsGenerator.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index d37eb85f1a2..9f715e16efd 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -200,8 +200,8 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, '&.unbordered': { - borderStyle: 'none' - } + borderStyle: 'none', + }, }, }, }, From 5b5cb8863f07769dfcfe03f1a03c13c1ce5f1cbc Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 21 Feb 2024 13:28:24 -0500 Subject: [PATCH 10/19] sticking with borders --- .../core/components/details/feature-info-new.tsx | 2 +- .../components/layers/left-panel/single-layer.tsx | 4 ++-- .../src/core/components/nav-bar/nav-bar.tsx | 9 ++------- .../src/ui/style/global-style-overrides.ts | 6 ++++-- .../src/ui/style/themeOptionsGenerator.ts | 14 +++++++++----- 5 files changed, 18 insertions(+), 17 deletions(-) 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 index 8cab35d4d93..e021dc47203 100644 --- a/packages/geoview-core/src/core/components/details/feature-info-new.tsx +++ b/packages/geoview-core/src/core/components/details/feature-info-new.tsx @@ -99,7 +99,7 @@ export function FeatureInfo({ features, currentFeatureIndex }: TypeFeatureInfoPr }, [checkedFeatures, feature]); // ! Check if feature is necessary in this dependency array? If so explain it in comment? Should be featurUid? return ( - + + 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 index b4eb44ed739..9ac8c5a56e7 100644 --- a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx +++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx @@ -17,11 +17,7 @@ import { EVENT_NAMES } from '@/api/events/event-types'; import { payloadIsAButtonPanel, ButtonPanelPayload, PayloadBaseClass } from '@/api/events/payloads'; import { TypeButtonPanel } from '@/ui/panel/panel-types'; import { getSxClasses } from './nav-bar-style'; -import { - useUIActiveFocusItem, - useUIMapInfoExpanded, - useUINavbarComponents, -} from '@/core/stores/store-interface-and-intial-values/ui-state'; +import { useUIMapInfoExpanded, useUINavbarComponents } from '@/core/stores/store-interface-and-intial-values/ui-state'; import { logger } from '@/core/utils/logger'; /** @@ -41,7 +37,6 @@ export function Navbar(): JSX.Element { // get the expand or collapse from store const mapInfoExpanded = useUIMapInfoExpanded(); - const activeModalId = useUIActiveFocusItem().activeElementId; const navBarComponents = useUINavbarComponents(); // #region REACT HOOKS @@ -181,7 +176,7 @@ export function Navbar(): JSX.Element { {navBarComponents.includes('fullscreen') && } {navBarComponents.includes('location') && } {navBarComponents.includes('home') && } - {navBarComponents.includes('export') && } + {navBarComponents.includes('export') && } diff --git a/packages/geoview-core/src/ui/style/global-style-overrides.ts b/packages/geoview-core/src/ui/style/global-style-overrides.ts index 2f0541e6afd..4fe8f814a18 100644 --- a/packages/geoview-core/src/ui/style/global-style-overrides.ts +++ b/packages/geoview-core/src/ui/style/global-style-overrides.ts @@ -22,9 +22,11 @@ export const globalStyleOverrides = (geoViewColors: IGeoViewColors) => ({ }, '.bordered': { - border: `2px solid ${geoViewColors.bgColor.darken(0.1, 0.9)}`, + border: `2px solid ${geoViewColors.bgColor.darken(0.5, 0.5)}`, + boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, }, '.bordered-primary': { border: `2px solid ${geoViewColors.primary.darken(0.1, 0.9)}`, - } + boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, + }, }); diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index 3d7083aaa95..9f715e16efd 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -194,12 +194,16 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV styleOverrides: { root: { borderRadius: 5, - borderWith: '2px', - borderColor: geoViewColors.bgColor.darken(0.1, 0.9), + borderWith: '1px', + borderColor: geoViewColors.bgColor.darken(0.5, 0.5), borderStyle: 'solid', - boxShadow: 'none' - } - } + boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, + + '&.unbordered': { + borderStyle: 'none', + }, + }, + }, }, MuiIconButton: { styleOverrides: { From 9fd221e104c0eb2c72acfb29de1dd32cb4dba56b Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 21 Feb 2024 13:55:12 -0500 Subject: [PATCH 11/19] fix geolocator button --- .../src/core/components/app-bar/app-bar-style.ts | 6 ++++-- .../src/core/components/app-bar/buttons/geolocator.tsx | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar-style.ts b/packages/geoview-core/src/core/components/app-bar/app-bar-style.ts index a1ec9d2ee27..904a81a8586 100644 --- a/packages/geoview-core/src/core/components/app-bar/app-bar-style.ts +++ b/packages/geoview-core/src/core/components/app-bar/app-bar-style.ts @@ -40,6 +40,7 @@ export const getSxClasses = (theme: Theme) => ({ height: 44, width: 44, transition: 'background-color 0.3s ease-in-out', + border: `2px solid transparent`, '&:hover': { backgroundColor: theme.palette.geoViewColor.primary.light[100], color: theme.palette.geoViewColor.primary.light[700], @@ -53,8 +54,9 @@ export const getSxClasses = (theme: Theme) => ({ color: theme.palette.geoViewColor.primary.light[700], }, '&.active': { - backgroundColor: theme.palette.geoViewColor.primary.light[100], - color: theme.palette.background.paper, + border: `2px solid ${theme.palette.geoViewColor.primary.light[100]}`, + backgroundColor: 'transparent', + color: theme.palette.geoViewColor.primary.light[100], }, '& .MuiSvgIcon-root': { height: 20, diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx index 75380882686..8ac718d3eba 100644 --- a/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx +++ b/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx @@ -40,7 +40,7 @@ export default function Geolocator(props: GeolocatorProps): JSX.Element { tooltipPlacement="bottom-end" onClick={click} sx={sx} - className={`${active ? 'active' : ''}`} + className={`${!active ? 'active' : ''}`} > From 349e2d6fec6766fd866d46ebda91e0fef965414e Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 21 Feb 2024 15:25:05 -0500 Subject: [PATCH 12/19] fix border color --- .../src/core/components/common/layer-list-style.ts | 2 +- packages/geoview-core/src/ui/style/global-style-overrides.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/geoview-core/src/core/components/common/layer-list-style.ts b/packages/geoview-core/src/core/components/common/layer-list-style.ts index d291299ec61..97ca81e1b8b 100644 --- a/packages/geoview-core/src/core/components/common/layer-list-style.ts +++ b/packages/geoview-core/src/core/components/common/layer-list-style.ts @@ -69,7 +69,7 @@ export const getSxClasses = (theme: Theme) => ({ }, }, paper: { marginBottom: '1rem' }, - borderWithIndex: `2px solid ${theme.palette.geoViewColor.primary.main}`, + borderWithIndex: `2px solid ${theme.palette.geoViewColor.primary.main} !important`, borderNone: 'none', backgroundProcessing: `${theme.palette.geoViewColor.warning.opacity(0.33)}`, backgroundError: `${theme.palette.geoViewColor.error.main}`, diff --git a/packages/geoview-core/src/ui/style/global-style-overrides.ts b/packages/geoview-core/src/ui/style/global-style-overrides.ts index 4fe8f814a18..2ef51149904 100644 --- a/packages/geoview-core/src/ui/style/global-style-overrides.ts +++ b/packages/geoview-core/src/ui/style/global-style-overrides.ts @@ -22,11 +22,11 @@ export const globalStyleOverrides = (geoViewColors: IGeoViewColors) => ({ }, '.bordered': { - border: `2px solid ${geoViewColors.bgColor.darken(0.5, 0.5)}`, + border: `1px solid ${geoViewColors.bgColor.darken(0.5, 0.5)}`, boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, }, '.bordered-primary': { - border: `2px solid ${geoViewColors.primary.darken(0.1, 0.9)}`, + border: `1px solid ${geoViewColors.primary.darken(0.1, 0.9)}`, boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, }, }); From cdbbb77869e58c959f72a43d544ffdc6160f30fe Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 21 Feb 2024 16:49:51 -0500 Subject: [PATCH 13/19] fixing gelocator button --- .../src/core/components/app-bar/buttons/geolocator.tsx | 3 +-- packages/geoview-core/src/ui/style/global-style-overrides.ts | 2 +- packages/geoview-core/src/ui/style/themeOptionsGenerator.ts | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx index 8ac718d3eba..914a2fc587a 100644 --- a/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx +++ b/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx @@ -39,8 +39,7 @@ export default function Geolocator(props: GeolocatorProps): JSX.Element { tooltip="appbar.geolocator" tooltipPlacement="bottom-end" onClick={click} - sx={sx} - className={`${!active ? 'active' : ''}`} + className={`${!active ? 'style2' : ''}`} > diff --git a/packages/geoview-core/src/ui/style/global-style-overrides.ts b/packages/geoview-core/src/ui/style/global-style-overrides.ts index 2ef51149904..93e65efb642 100644 --- a/packages/geoview-core/src/ui/style/global-style-overrides.ts +++ b/packages/geoview-core/src/ui/style/global-style-overrides.ts @@ -23,7 +23,7 @@ export const globalStyleOverrides = (geoViewColors: IGeoViewColors) => ({ '.bordered': { border: `1px solid ${geoViewColors.bgColor.darken(0.5, 0.5)}`, - boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, + boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.darken(0.2, 0.5)}`, }, '.bordered-primary': { border: `1px solid ${geoViewColors.primary.darken(0.1, 0.9)}`, diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index 9f715e16efd..f5d610246b5 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -197,7 +197,7 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV borderWith: '1px', borderColor: geoViewColors.bgColor.darken(0.5, 0.5), borderStyle: 'solid', - boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.dark[200]}`, + boxShadow: `0px 12px 9px -13px ${geoViewColors.bgColor.darken(0.2, 0.5)}`, '&.unbordered': { borderStyle: 'none', From c90429a9f6c563eb0a97df6c31a6a46dcc6f1357 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 21 Feb 2024 16:59:18 -0500 Subject: [PATCH 14/19] fix geolocator button --- .../src/core/components/app-bar/app-bar.tsx | 2 +- .../components/app-bar/buttons/geolocator.tsx | 19 +------------------ .../core/components/details/details-panel.tsx | 2 +- 3 files changed, 3 insertions(+), 20 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 aab1e8761c3..12bc07b9118 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 @@ -224,7 +224,7 @@ export function Appbar(): JSX.Element { - + diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx index 914a2fc587a..c67b68959cf 100644 --- a/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx +++ b/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx @@ -2,27 +2,12 @@ import { useState } from 'react'; import { IconButton, SearchIcon } from '@/ui'; import { useUIStoreActions } from '@/core/stores/store-interface-and-intial-values/ui-state'; -/** - * Interface used for geolocator button properties - */ -interface GeolocatorProps { - sx?: React.CSSProperties; -} - -/** - * default properties values - */ -const defaultProps = { - sx: {}, -}; - /** * Geolocator Button component * * @returns {JSX.Element} the geolocator button */ -export default function Geolocator(props: GeolocatorProps): JSX.Element { - const { sx = {} } = props; +export default function Geolocator(): JSX.Element { const [active, setActive] = useState(true); const { setGeolocatorActive } = useUIStoreActions(); @@ -45,5 +30,3 @@ export default function Geolocator(props: GeolocatorProps): JSX.Element { ); } - -Geolocator.defaultProps = defaultProps; diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx index 53dfa6bbecb..36ec1ed5e90 100644 --- a/packages/geoview-core/src/core/components/details/details-panel.tsx +++ b/packages/geoview-core/src/core/components/details/details-panel.tsx @@ -435,7 +435,7 @@ export function DetailsPanel({ fullWidth }: DetailsPanelType): JSX.Element { )} {!memoSelectedLayerDataFeatures && ( - + {t('details.detailsInstructions')} From 264b4c1d1da42677a850effb5baabbacceb0c654 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Thu, 22 Feb 2024 08:38:15 -0500 Subject: [PATCH 15/19] fixing appbar buttons to be consistent --- .../src/core/components/app-bar/app-bar.tsx | 2 +- .../core/components/app-bar/buttons/geolocator.tsx | 3 ++- .../core/components/app-bar/buttons/version.tsx | 2 +- .../components/notifications/notifications.tsx | 2 +- .../src/ui/style/themeOptionsGenerator.ts | 14 ++++++++++++++ 5 files changed, 19 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 12bc07b9118..6552d982380 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 { - + diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx index c67b68959cf..cf26c65e33c 100644 --- a/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx +++ b/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx @@ -24,7 +24,8 @@ export default function Geolocator(): JSX.Element { tooltip="appbar.geolocator" tooltipPlacement="bottom-end" onClick={click} - className={`${!active ? 'style2' : ''}`} + color="primary" + className={`style3 ${!active ? 'active' : ''}`} > 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 5e5e30aa0ab..5f37ff619bb 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 ? 'style2' : ''} + className={`style3 ${open ? 'active' : ''}`} > diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx index 3c323b0dc87..ceaab5dfbad 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 ? 'style2' : ''} + className={`style3 ${open ? 'active' : ''}`} color="primary" > diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index f5d610246b5..b7b1a902b5f 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -236,6 +236,20 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV color: `${geoViewColors.bgColor.dark[450]} !important`, }, }, + '&.style3': { + backgroundColor: `tranparent !important`, + border: `2px solid transparent !important`, + color: `${geoViewColors.primary.main} !important`, + '&:hover, &:active, &.active': { + backgroundColor: `${geoViewColors.primary.main} !important`, + border: `2px solid ${geoViewColors.primary.light[500]} !important`, + color: `${geoViewColors.white} !important`, + boxShadow: 1, + }, + '&:disabled': { + color: `${geoViewColors.bgColor.dark[450]} !important`, + }, + }, }, }, }, From 25c93a10b089ae1ce2d78a7c65696230a5a3f923 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Thu, 22 Feb 2024 08:51:07 -0500 Subject: [PATCH 16/19] fix primary color --- packages/geoview-core/src/ui/style/light-theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/geoview-core/src/ui/style/light-theme.ts b/packages/geoview-core/src/ui/style/light-theme.ts index 1729b9ccfab..350f27e50c4 100644 --- a/packages/geoview-core/src/ui/style/light-theme.ts +++ b/packages/geoview-core/src/ui/style/light-theme.ts @@ -5,6 +5,6 @@ export const lightThemeColors: IGeoViewColors = { ...defaultGeoViewColors, bgColor: new GeoViewColorClass('#F9F9F9'), - primary: new GeoViewColorClass('#AA4A44'), + primary: new GeoViewColorClass('#0066CC'), textColor: new GeoViewColorClass('#000000'), }; From 00027341e0dd9cd1cedeeadac0b230ea0b51483c Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Thu, 22 Feb 2024 14:56:27 -0500 Subject: [PATCH 17/19] fixing icon buttons --- .../src/core/components/app-bar/app-bar.tsx | 2 +- .../core/components/footer-bar/footer-bar.tsx | 2 +- .../layers/left-panel/left-panel-styles.ts | 2 - .../layers/left-panel/single-layer.tsx | 3 +- .../notifications/notifications.tsx | 2 +- .../src/ui/style/themeOptionsGenerator.ts | 49 ++++++++++--------- .../src/reorder-layers-list.tsx | 2 +- 7 files changed, 30 insertions(+), 32 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 6552d982380..db7d23985e8 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 { - + diff --git a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx index 7138dbe0cb6..5e24243ea6e 100644 --- a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx +++ b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx @@ -450,7 +450,7 @@ export function FooterBar(): JSX.Element | null { ({ alignItems: 'center', '& .MuiIconButton-root': { - color: `${theme.palette.geoViewColor.primary.main} !important`, - background: `${theme.palette.geoViewColor.bgColor.dark[100]} !important`, margin: '0px 5px', }, }, diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx index b160bceb375..ab849de9572 100644 --- a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx +++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx @@ -170,7 +170,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi } if (layer.layerStatus === 'error') { return ( - + ); @@ -186,7 +186,6 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi return ( handleToggleVisibility()} diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx index ceaab5dfbad..046a5aeff1f 100644 --- a/packages/geoview-core/src/core/components/notifications/notifications.tsx +++ b/packages/geoview-core/src/core/components/notifications/notifications.tsx @@ -84,7 +84,7 @@ export default function Notifications(): JSX.Element { {getNotificationIcon(notification)} {notification.message} - handleRemoveNotificationClick(notification)}> + handleRemoveNotificationClick(notification)}> diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index b7b1a902b5f..336606fef44 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -205,51 +205,52 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV }, }, }, + MuiButton: {}, MuiIconButton: { styleOverrides: { root: { '&.style1': { - backgroundColor: `${geoViewColors.bgColor.dark[100]} !important`, - border: `3px solid transparent !important`, - color: `${geoViewColors.primary.main} !important`, + backgroundColor: `${geoViewColors.bgColor.dark[100]}`, + border: `3px solid transparent`, + color: `${geoViewColors.primary.main}`, '&:hover, &:active, &.active': { - backgroundColor: `${geoViewColors.primary.light[400]} !important`, - border: `3px solid ${geoViewColors.primary.light[500]} !important`, - color: `${geoViewColors.primary.dark[100]} !important`, + backgroundColor: `${geoViewColors.bgColor.light[100]}`, + border: `3px solid ${geoViewColors.primary.light[500]}`, + color: `${geoViewColors.primary.dark[100]}`, boxShadow: 1, }, '&:disabled': { - color: `${geoViewColors.bgColor.dark[450]} !important`, + color: `${geoViewColors.bgColor.dark[450]}`, }, }, '&.style2': { - backgroundColor: `${geoViewColors.primary.main} !important`, - border: `3px solid transparent !important`, - color: `${geoViewColors.white} !important`, + backgroundColor: `${geoViewColors.primary.main}`, + border: `3px solid transparent`, + color: `${geoViewColors.white}`, '&:hover, &:active, &.active': { - backgroundColor: `${geoViewColors.primary.light[800]} !important`, - border: `3px solid ${geoViewColors.primary.light[500]} !important`, - color: `${geoViewColors.primary.dark[100]} !important`, + backgroundColor: `${geoViewColors.primary.light[800]}`, + border: `3px solid ${geoViewColors.primary.light[500]}`, + color: `${geoViewColors.primary.dark[100]}`, boxShadow: 1, }, '&:disabled': { - color: `${geoViewColors.bgColor.dark[450]} !important`, + color: `${geoViewColors.bgColor.dark[450]}`, }, }, - '&.style3': { - backgroundColor: `tranparent !important`, - border: `2px solid transparent !important`, - color: `${geoViewColors.primary.main} !important`, + '&.style3': { //used for app-bar buttons + backgroundColor: `tranparent`, + border: `2px solid transparent`, + color: `${geoViewColors.primary.main}`, '&:hover, &:active, &.active': { - backgroundColor: `${geoViewColors.primary.main} !important`, - border: `2px solid ${geoViewColors.primary.light[500]} !important`, - color: `${geoViewColors.white} !important`, + backgroundColor: `${geoViewColors.primary.main}`, + border: `2px solid ${geoViewColors.primary.light[500]}`, + color: `${geoViewColors.white}`, boxShadow: 1, }, '&:disabled': { - color: `${geoViewColors.bgColor.dark[450]} !important`, + color: `${geoViewColors.bgColor.dark[450]}`, }, - }, + } }, }, }, @@ -290,7 +291,7 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV root: { color: geoViewColors.textColor.light[100], // Text color for the tabs '&.Mui-selected': { - color: `${geoViewColors.primary.light[200]} !important`, // Text color for the selected tab + color: `${geoViewColors.primary.light[200]}`, // Text color for the selected tab }, }, }, diff --git a/packages/geoview-layers-panel/src/reorder-layers-list.tsx b/packages/geoview-layers-panel/src/reorder-layers-list.tsx index 20712da2d5d..6bb12492720 100644 --- a/packages/geoview-layers-panel/src/reorder-layers-list.tsx +++ b/packages/geoview-layers-panel/src/reorder-layers-list.tsx @@ -65,7 +65,7 @@ function ReorderLayersList({ mapId, title, layerIds, setReorderLayersVisible, se return ( <> - setReorderLayersVisible(false)}> + setReorderLayersVisible(false)}> From 6963d20de274f0f5a7e5d37704bb52870120bd47 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Thu, 22 Feb 2024 21:40:12 -0500 Subject: [PATCH 18/19] styling componnts --- packages/geoview-core/public/css/style.css | 6 ++++++ .../src/core/components/footer-bar/footer-bar.tsx | 2 +- .../core/components/layers/left-panel/single-layer.tsx | 10 ++-------- .../geoview-core/src/ui/style/themeOptionsGenerator.ts | 5 +++-- .../geoview-layers-panel/src/reorder-layers-list.tsx | 2 +- 5 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/geoview-core/public/css/style.css b/packages/geoview-core/public/css/style.css index 9a69fdd5903..7a42c3153d1 100644 --- a/packages/geoview-core/public/css/style.css +++ b/packages/geoview-core/public/css/style.css @@ -211,4 +211,10 @@ table.state { .config-json-valid { color: green +} + +@media only screen and (max-width: 767px) { + body { + padding: 2px; /* Adjust the value as needed */ + } } \ No newline at end of file diff --git a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx index 5e24243ea6e..1d25161e651 100644 --- a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx +++ b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx @@ -450,7 +450,7 @@ export function FooterBar(): JSX.Element | null { + ); @@ -185,13 +185,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi } return ( - handleToggleVisibility()} - tooltip="layers.toggleVisibility" - className="style1" - > + handleToggleVisibility()} tooltip="layers.toggleVisibility" className="style1"> {(() => { if (layer.isVisible === 'no') return ; return ; diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts index 336606fef44..5dce8d7a2fe 100644 --- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts +++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts @@ -237,7 +237,8 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV color: `${geoViewColors.bgColor.dark[450]}`, }, }, - '&.style3': { //used for app-bar buttons + '&.style3': { + // used for app-bar buttons backgroundColor: `tranparent`, border: `2px solid transparent`, color: `${geoViewColors.primary.main}`, @@ -250,7 +251,7 @@ export const generateThemeOptions = (geoViewColors: IGeoViewColors = defaultGeoV '&:disabled': { color: `${geoViewColors.bgColor.dark[450]}`, }, - } + }, }, }, }, diff --git a/packages/geoview-layers-panel/src/reorder-layers-list.tsx b/packages/geoview-layers-panel/src/reorder-layers-list.tsx index 6bb12492720..db71724e1fb 100644 --- a/packages/geoview-layers-panel/src/reorder-layers-list.tsx +++ b/packages/geoview-layers-panel/src/reorder-layers-list.tsx @@ -65,7 +65,7 @@ function ReorderLayersList({ mapId, title, layerIds, setReorderLayersVisible, se return ( <> - setReorderLayersVisible(false)}> + setReorderLayersVisible(false)}> From feac264ea6005d6820a7c43fc151cc7a92c19853 Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Fri, 23 Feb 2024 09:14:53 -0500 Subject: [PATCH 19/19] fixing based on feedback --- .../src/core/components/layers/left-panel/single-layer.tsx | 6 ++---- .../geoview-core/src/core/components/nav-bar/nav-bar.tsx | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx index 8e5cde16fb8..3f018abc073 100644 --- a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx +++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx @@ -244,13 +244,11 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi // if layer has selected child but its not itself selected if (layerChildIsSelected && !layerIsSelected && !isGroupOpen) { - result.push('selectedLayer'); - result.push('bordered-primary'); + result.push('selectedLayer bordered-primary'); } if (layerIsSelected) { - result.push('selectedLayer'); - result.push('bordered-primary'); + result.push('selectedLayer bordered-primary'); } if (isDragging) { 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 index 9ac8c5a56e7..eeffb082d1b 100644 --- a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx +++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx @@ -176,7 +176,7 @@ export function Navbar(): JSX.Element { {navBarComponents.includes('fullscreen') && } {navBarComponents.includes('location') && } {navBarComponents.includes('home') && } - {navBarComponents.includes('export') && } + {navBarComponents.includes('export') && }