diff --git a/source/frontend/src/assets/scss/_variables.module.scss b/source/frontend/src/assets/scss/_variables.module.scss index 4238dbe6b5..9c9fc6dde4 100644 --- a/source/frontend/src/assets/scss/_variables.module.scss +++ b/source/frontend/src/assets/scss/_variables.module.scss @@ -23,6 +23,8 @@ linkColor: $link-color; linkHoverColor: $link-hover-color; activeActionColor: $active-action-color; + primaryHoverActionColor: $primary-hover-action-color; + primaryActiveActionColor: $primary-active-action-color; hoverActionColor: $hover-action-color; headerTextColor: $header-text-color; headerBorderColor: $header-border-color; diff --git a/source/frontend/src/assets/scss/colors.scss b/source/frontend/src/assets/scss/colors.scss index 6c2475e483..019cd92395 100644 --- a/source/frontend/src/assets/scss/colors.scss +++ b/source/frontend/src/assets/scss/colors.scss @@ -1,10 +1,11 @@ @import '@/../node_modules/@bcgov/design-tokens/css/variables.css'; $pims-blue-20: #d9eaf7; -$pims-blue-80: #1a5496; - -$pims-blue-50: #428bca; $pims-blue-30: #8ec6ff; +$pims-blue-50: #428bca; +$pims-blue-80: #1a5496; +$pims-blue-90: #1e5189; +$pims-blue-100: #053662; $pims-yellow-10: #fef1d8; $pims-yellow-30: #fcba19; @@ -25,6 +26,8 @@ $pims-green-80: #2e8540; $active-action-color: $pims-blue-50; $hover-action-color: $pims-blue-30; +$primary-hover-action-color: $pims-blue-90; +$primary-active-action-color: $pims-blue-100; $border-outline-color: $pims-grey-80; $warning-background-color: $pims-yellow-10; $number-background-color: $pims-yellow-30; diff --git a/source/frontend/src/components/common/TabView.tsx b/source/frontend/src/components/common/TabView.tsx index 2915757e93..2b45db8153 100644 --- a/source/frontend/src/components/common/TabView.tsx +++ b/source/frontend/src/components/common/TabView.tsx @@ -35,17 +35,23 @@ const StyledTabs = styled(BsTabs)` .nav-item { color: ${props => props.theme.css.linkColor}; min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; &:hover { - color: ${props => props.theme.css.linkHoverColor}; + color: ${props => props.theme.css.highlightBackgroundColor}; + background-color: ${props => props.theme.css.primaryHoverActionColor}; border-color: transparent; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } &.active { - background-color: ${props => props.theme.css.highlightBackgroundColor}; + border-radius: 0.4rem; + color: ${props => props.theme.css.highlightBackgroundColor}; font-family: 'BCSans-Bold'; - color: ${props => props.theme.css.linkHoverColor}; + background-color: ${props => props.theme.css.primaryActiveActionColor}; border-color: transparent; } } diff --git a/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap b/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap index a9240c7c38..a8c5b78500 100644 --- a/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap +++ b/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap @@ -320,20 +320,26 @@ exports[`MapSelectorContainer component > renders as expected when provided no p .c2 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c2 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c2 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap index c9a3d12b12..38e4b55218 100644 --- a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap +++ b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap @@ -476,20 +476,26 @@ exports[`AddLeaseContainer component > renders as expected 1`] = ` .c20 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c20 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c20 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap b/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap index b2a47b22b0..07c281a401 100644 --- a/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap +++ b/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap @@ -427,20 +427,26 @@ exports[`LeasePropertySelector component > renders as expected 1`] = ` .c4 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c4 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c4 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap index f66bfb4968..4d4228d82a 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap @@ -241,20 +241,26 @@ exports[`AcquisitionView component > renders as expected 1`] = ` .c28 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c28 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c28 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap index 9e1e33846a..05680f4b4d 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap @@ -325,20 +325,26 @@ exports[`AcquisitionProperties component > renders as expected 1`] = ` .c2 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c2 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c2 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap index 3a79be50b5..311befeb20 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap @@ -495,20 +495,26 @@ exports[`AddAcquisitionContainer component > Sub-interest file > renders as expe .c20 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c20 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c20 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } @@ -2864,20 +2870,26 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = ` .c21 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c21 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c21 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap index 8278c54fda..6c0b6c47ab 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap @@ -377,20 +377,26 @@ exports[`AddAcquisitionForm component > Sub-interest files > renders as expected .c9 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c9 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c9 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } @@ -2495,20 +2501,26 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = ` .c10 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c10 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c10 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap index 3959b08880..763f13c88c 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap @@ -34,20 +34,26 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = ` .c1 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c1 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c1 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap b/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap index 50daada756..043fd9d4e0 100644 --- a/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap @@ -299,20 +299,26 @@ exports[`Add Consolidation View > matches snapshot 1`] = ` .c16 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c16 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c16 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap index 083f8230f8..5004e2b78f 100644 --- a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap @@ -363,20 +363,26 @@ exports[`DispositionView component > renders as expected 1`] = ` .c28 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c28 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c28 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap index 489731b61b..2b68872264 100644 --- a/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap @@ -475,20 +475,26 @@ exports[`Add Disposition Container View > matches snapshot 1`] = ` .c21 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c21 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c21 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap index d7db23e5bc..99b21cd37e 100644 --- a/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap @@ -325,20 +325,26 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = ` .c2 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c2 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c2 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap index c4ee92c250..eeb152679b 100644 --- a/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap @@ -34,20 +34,26 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = ` .c1 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c1 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c1 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap index 6d158c5729..a603fd6771 100644 --- a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap @@ -418,20 +418,26 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` .c20 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c20 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c20 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap index 8efcb2c386..48db8ce0ee 100644 --- a/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap @@ -34,20 +34,26 @@ exports[`Project Tabs component > matches snapshot 1`] = ` .c1 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c1 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c1 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap index 2e95907bbe..9e1ff66072 100644 --- a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap @@ -375,20 +375,26 @@ exports[`ResearchContainer component > renders as expected 1`] = ` .c28 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c28 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c28 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap index 722fd90f43..af22a7480d 100644 --- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap @@ -484,20 +484,26 @@ exports[`AddResearchContainer component > renders as expected 1`] = ` .c22 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c22 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c22 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap index 94aef3b83f..412f1f3dbf 100644 --- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap @@ -366,20 +366,26 @@ exports[`AddResearchForm component > renders as expected 1`] = ` .c12 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c12 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c12 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap index f6b05dae06..d71d05cb9f 100644 --- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap @@ -427,20 +427,26 @@ exports[`ResearchProperties component > renders as expected when provided no pro .c4 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c4 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c4 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap index 3c3a23c206..20a91b634e 100644 --- a/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap @@ -58,20 +58,26 @@ exports[`ResearchFileTabs component > matches snapshot 1`] = ` .c1 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c1 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c1 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap b/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap index 30d8f713c4..f8a5651d2e 100644 --- a/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap @@ -444,20 +444,26 @@ exports[`UpdateProperties component > renders as expected 1`] = ` .c11 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c11 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c11 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; } diff --git a/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap index dbd524902f..0645dafd27 100644 --- a/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap @@ -299,20 +299,26 @@ exports[`Add Subdivision View > matches snapshot 1`] = ` .c16 .nav-item { color: var(--surface-color-primary-button-default); min-width: 5rem; - padding: 0.1rem 1.2rem; + padding: 0.1rem 1.3rem; + margin-bottom: 0.1rem; + margin-left: 0.1rem; } .c16 .nav-item:hover { - color: var(--surface-color-primary-button-hover); + color: #f2f2f2; + background-color: #1e5189; border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; + border-radius: 0.4rem; + font-family: 'BCSans-Bold'; } .c16 .nav-item.active { - background-color: #f2f2f2; + border-radius: 0.4rem; + color: #f2f2f2; font-family: 'BCSans-Bold'; - color: var(--surface-color-primary-button-hover); + background-color: #053662; border-color: transparent; }