Features/psp 7494 (#4068)

* Updated the deposts page * Fixed stylings for buttons and margin for collapsable section * updated snaps * PR comment updates. --------- Co-authored-by: FuriousLlama <[email protected]> Co-authored-by: Smith <[email protected]> Co-authored-by: Alejandro Sanchez <[email protected]>
bcgov · May 31, 2024 · 3a59370 · 3a59370
1 parent 48e7a8c
commit 3a59370
Show file tree

Hide file tree

Showing 39 changed files with 181 additions and 460 deletions.
diff --git a/source/frontend/src/assets/scss/_variables.module.scss b/source/frontend/src/assets/scss/_variables.module.scss
@@ -10,8 +10,9 @@
   highlightBackgroundColor: $highlight-background-color;
   // buttons
   borderOutlineColor: $border-outline-color;
-
+  
   // Colors
+  pimsGreen80: $pims-green-80;
   warningBackgroundColor: $warning-background-color;
   numberBackgroundColor: $number-background-color;
   dangerBackgroundColor: $danger-background-color;

diff --git a/source/frontend/src/components/common/Section/Section.tsx b/source/frontend/src/components/common/Section/Section.tsx
@@ -42,7 +42,7 @@ export const Section: React.FC<
           <Row className="no-gutters">
             <Col>{header}</Col>
             {isCollapsable && (
-              <Col xs="1">
+              <Col xs="auto" className="pl-8">
                 {isCollapsed && (
                   <ArrowDropDownIcon
                     title={`expand-${title ?? 'section'}`}

diff --git a/source/frontend/src/components/common/SectionListHeader.tsx b/source/frontend/src/components/common/SectionListHeader.tsx
@@ -12,6 +12,7 @@ export interface ISectionListHeaderProps {
   addButtonIcon?: JSX.Element;
   onAdd?: () => void;
   claims: Claims[];
+  'data-testId'?: string;
 }
 
 export const SectionListHeader: React.FunctionComponent<
@@ -27,7 +28,7 @@ export const SectionListHeader: React.FunctionComponent<
       </Col>
       <Col xs="auto" className="my-1">
         {hasClaim(props.claims) && (
-          <StyledSectionAddButton onClick={onClick}>
+          <StyledSectionAddButton onClick={onClick} data-testid={props['data-testId']}>
             {props.addButtonIcon}
             &nbsp;{props.addButtonText ?? 'Add'}
           </StyledSectionAddButton>

diff --git a/source/frontend/src/components/common/styles.ts b/source/frontend/src/components/common/styles.ts
@@ -106,6 +106,9 @@ export const StyledAddButton = styled(Button)`
   &.btn.btn-primary:active {
     background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
   }
+  &.btn.btn-primary:hover {
+    background-color: ${props => props.theme.css.pimsGreen80};
+  }
 `;
 
 export const StyledSectionAddButton = styled(StyledAddButton)`

diff --git a/...s/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap b/...s/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap
@@ -688,7 +688,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
                 Mailing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c10"
@@ -942,7 +942,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c10"
@@ -1196,7 +1196,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c10"

diff --git a/.../src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap b/.../src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap
@@ -853,7 +853,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c12"
@@ -1107,7 +1107,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c12"
@@ -1361,7 +1361,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c12"

diff --git a/...d/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap b/...d/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap
@@ -1067,7 +1067,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                     </div>
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c20"
@@ -1321,7 +1321,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                     Property Address
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c20"
@@ -1575,7 +1575,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                     Billing Address
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c20"

diff --git a/...res/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap b/...res/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap
@@ -806,7 +806,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
                 Mailing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c10"
@@ -1060,7 +1060,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c10"
@@ -1314,7 +1314,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c10"

diff --git a/...nd/src/features/contacts/contact/edit/Person/__snapshots__/UpdatePersonForm.test.tsx.snap b/...nd/src/features/contacts/contact/edit/Person/__snapshots__/UpdatePersonForm.test.tsx.snap
@@ -926,7 +926,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c13"
@@ -1180,7 +1180,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c13"
@@ -1434,7 +1434,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c13"

diff --git a/...end/src/features/contacts/contact/edit/__snapshots__/UpdateContactContainer.test.tsx.snap b/...end/src/features/contacts/contact/edit/__snapshots__/UpdateContactContainer.test.tsx.snap
@@ -1070,7 +1070,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
                     </div>
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c19"
@@ -1324,7 +1324,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
                     Property Address
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c19"
@@ -1578,7 +1578,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
                     Billing Address
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c19"

diff --git a/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap b/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap
@@ -263,7 +263,7 @@ exports[`Document List View > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c3"

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
@@ -2330,7 +2330,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
                 Consultation
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c25"