PSP-9205 : UI UX Clean Up - tab menu - color replacement (#4426)

Co-authored-by: Herrera <[email protected]>
bcgov · Nov 1, 2024 · 8cbbb44 · 8cbbb44
1 parent dfb9923
commit 8cbbb44
Show file tree

Hide file tree

Showing 25 changed files with 258 additions and 103 deletions.
diff --git 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
@@ -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
@@ -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/...frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap b/...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
@@ -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/...c/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap b/...c/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/.../frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap b/.../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/...tures/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap b/...tures/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/...c/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap b/...c/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/...nd/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap b/...nd/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/.../src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap b/.../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;
 }