From 51edc9ed24bd27d02a5eeef310aea4d8b6693a75 Mon Sep 17 00:00:00 2001
From: Herrera <eduardo.herrera@quartech.com>
Date: Fri, 8 Mar 2024 15:49:54 -0800
Subject: [PATCH] PSP-8002 : FT:UI/UX- Agreements: Agreement #(number) is not
 aligned accurately above the line

---
 .../tabs/agreement/detail/AgreementView.tsx   |  19 +-
 .../__snapshots__/AgreementView.test.tsx.snap | 196 ++++++++++--------
 2 files changed, 118 insertions(+), 97 deletions(-)

diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
index 6c364264f6..f9a5f20af8 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Col, Row } from 'react-bootstrap';
 import { FaMailBulk, FaPlus, FaTrash } from 'react-icons/fa';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
@@ -65,9 +64,9 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
           <StyledAgreementBorder key={`agreement-section-${index}`}>
             <Section
               header={
-                <Row>
-                  <Col md={5}>{`Agreement ${++index}`}</Col>
-                  <Col md={7}>
+                <StyledHeaderContainer>
+                  <div>{`Agreement ${++index}`}</div>
+                  <div>
                     {exists(agreement.agreementType) && (
                       <StyledButtonContainer>
                         <StyledAddButton
@@ -130,8 +129,8 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
                           )}
                       </StyledButtonContainer>
                     )}
-                  </Col>
-                </Row>
+                  </div>
+                </StyledHeaderContainer>
               }
               isCollapsable
               initiallyExpanded
@@ -208,6 +207,14 @@ export const StyledButtonContainer = styled.div`
   justify-content: flex-end;
   align-items: center;
   margin-bottom: 0.5rem;
+  align-items: center;
+`;
+
+const StyledHeaderContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 const StyledAgreementBorder = styled.div`
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap
index 370458eee8..28c3ea4c55 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`AgreementView component renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c6.btn {
+  .c7.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -36,49 +36,49 @@ exports[`AgreementView component renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c6.btn:hover {
+.c7.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c6.btn:focus {
+.c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c6.btn.btn-primary {
+.c7.btn.btn-primary {
   border: none;
 }
 
-.c6.btn.btn-secondary {
+.c7.btn.btn-secondary {
   background: none;
 }
 
-.c6.btn.btn-info {
+.c7.btn.btn-info {
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c6.btn.btn-info:hover,
-.c6.btn.btn-info:active,
-.c6.btn.btn-info:focus {
+.c7.btn.btn-info:hover,
+.c7.btn.btn-info:active,
+.c7.btn.btn-info:focus {
   background: none;
 }
 
-.c6.btn.btn-light {
+.c7.btn.btn-light {
   border: none;
 }
 
-.c6.btn.btn-dark {
+.c7.btn.btn-dark {
   border: none;
 }
 
-.c6.btn.btn-link {
+.c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   background: none;
@@ -99,9 +99,9 @@ exports[`AgreementView component renders as expected 1`] = `
   padding: 0;
 }
 
-.c6.btn.btn-link:hover,
-.c6.btn.btn-link:active,
-.c6.btn.btn-link:focus {
+.c7.btn.btn-link:hover,
+.c7.btn.btn-link:active,
+.c7.btn.btn-link:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -110,14 +110,14 @@ exports[`AgreementView component renders as expected 1`] = `
   outline: none;
 }
 
-.c6.btn.btn-link:disabled,
-.c6.btn.btn-link.disabled {
+.c7.btn.btn-link:disabled,
+.c7.btn.btn-link.disabled {
   background: none;
   pointer-events: none;
 }
 
-.c6.btn:disabled,
-.c6.btn:disabled:hover {
+.c7.btn:disabled,
+.c7.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -128,19 +128,19 @@ exports[`AgreementView component renders as expected 1`] = `
   opacity: 0.65;
 }
 
-.c6.Button .Button__icon {
+.c7.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c6.Button--icon-only:focus {
+.c7.Button--icon-only:focus {
   outline: none;
 }
 
-.c6.Button--icon-only .Button__icon {
+.c7.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c7 {
+.c8 {
   float: right;
   cursor: pointer;
 }
@@ -163,14 +163,14 @@ exports[`AgreementView component renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c9.required::before {
+.c10.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c8 {
+.c9 {
   font-weight: bold;
 }
 
@@ -190,7 +190,7 @@ exports[`AgreementView component renders as expected 1`] = `
   margin: 0;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -207,6 +207,28 @@ exports[`AgreementView component renders as expected 1`] = `
   -ms-flex-align: center;
   align-items: center;
   margin-bottom: 0.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c4 {
@@ -215,7 +237,7 @@ exports[`AgreementView component renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c10 {
+.c11 {
   font-weight: bold;
   border-bottom: 0.2rem solid;
   margin-top: 2rem;
@@ -271,21 +293,17 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="col"
                 >
                   <div
-                    class="row"
+                    class="c5"
                   >
-                    <div
-                      class="col-md-5"
-                    >
+                    <div>
                       Agreement 1
                     </div>
-                    <div
-                      class="col-md-7"
-                    >
+                    <div>
                       <div
-                        class="c5"
+                        class="c6"
                       >
                         <button
-                          class="c6 Button btn btn-primary"
+                          class="c7 Button btn btn-primary"
                           type="button"
                         >
                           <div
@@ -336,7 +354,7 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="col-1"
                 >
                   <svg
-                    class="c7"
+                    class="c8"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -369,13 +387,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Agreement status:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   Draft
                 </div>
@@ -387,13 +405,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Legal survey plan:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 />
               </div>
               <div
@@ -403,13 +421,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Agreement type:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   License Of Occupation (H0074)
                 </div>
@@ -421,13 +439,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Agreement date:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 />
               </div>
               <div
@@ -437,13 +455,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Commencement date:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 />
               </div>
               <div
@@ -453,13 +471,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Completion date:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 />
               </div>
               <div
@@ -469,13 +487,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Termination date:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 />
               </div>
               <div
@@ -485,17 +503,17 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Possession date:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 />
               </div>
               <div
-                class="c10"
+                class="c11"
               >
                 Financial
               </div>
@@ -506,13 +524,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Purchase price:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 />
               </div>
               <div
@@ -522,7 +540,7 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Deposit due no later than:
                     <span
@@ -552,7 +570,7 @@ exports[`AgreementView component renders as expected 1`] = `
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 />
               </div>
               <div
@@ -562,13 +580,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Deposit amount:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 />
               </div>
             </div>
@@ -590,21 +608,17 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="col"
                 >
                   <div
-                    class="row"
+                    class="c5"
                   >
-                    <div
-                      class="col-md-5"
-                    >
+                    <div>
                       Agreement 2
                     </div>
-                    <div
-                      class="col-md-7"
-                    >
+                    <div>
                       <div
-                        class="c5"
+                        class="c6"
                       >
                         <button
-                          class="c6 Button btn btn-primary"
+                          class="c7 Button btn btn-primary"
                           type="button"
                         >
                           <div
@@ -655,7 +669,7 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="col-1"
                 >
                   <svg
-                    class="c7"
+                    class="c8"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -688,13 +702,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Agreement status:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   Draft
                 </div>
@@ -706,13 +720,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Legal survey plan:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 />
               </div>
               <div
@@ -722,13 +736,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Agreement type:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   Test type 2 (ABCD)
                 </div>
@@ -740,13 +754,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Agreement date:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   Apr 5, 2023
                 </div>
@@ -758,13 +772,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Completion date:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   Apr 5, 2023
                 </div>
@@ -776,13 +790,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Termination date:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   Apr 5, 2023
                 </div>
@@ -794,19 +808,19 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Possession date:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   Apr 5, 2023
                 </div>
               </div>
               <div
-                class="c10"
+                class="c11"
               >
                 Financial
               </div>
@@ -817,13 +831,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Purchase price:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   $2,000.00
                 </div>
@@ -835,7 +849,7 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Deposit due no later than:
                     <span
@@ -865,7 +879,7 @@ exports[`AgreementView component renders as expected 1`] = `
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   <span>
                     20 
@@ -882,13 +896,13 @@ exports[`AgreementView component renders as expected 1`] = `
                   class="pr-0 text-left col-5"
                 >
                   <label
-                    class="c8"
+                    class="c9"
                   >
                     Deposit amount:
                   </label>
                 </div>
                 <div
-                  class="c9 text-left col"
+                  class="c10 text-left col"
                 >
                   $1,000.00
                 </div>