psp-8549 correct property header retired status styling.

bcgov · May 30, 2024 · cb53a90 · cb53a90
1 parent c2cdcd8
commit cb53a90
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 36 deletions.
diff --git a/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx b/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components';
 
 import { StyledIconButton } from '@/components/common/buttons';
 import { HeaderField } from '@/components/common/HeaderField/HeaderField';
+import { StyledFiller } from '@/components/common/HeaderField/styles';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { InlineFlexDiv } from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
@@ -75,12 +76,22 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
           )}
         </Col>
         <Col className="text-right">
-          <HeaderField className="justify-content-end" label="PID:">
-            {pid}
-          </HeaderField>
-          <HeaderField label="Land parcel type:" className="justify-content-end">
-            {apiProperty?.propertyType?.description}
-          </HeaderField>
+          <StyledFiller>
+            <HeaderField className="justify-content-end" label="PID:">
+              {pid}
+            </HeaderField>
+            <HeaderField label="Land parcel type:" className="justify-content-end">
+              {apiProperty?.propertyType?.description}
+            </HeaderField>
+            {isRetired && (
+              <HeaderField label="" className="justify-content-end align-items-end mt-auto">
+                <RetiredWarning>
+                  <AiOutlineExclamationCircle size={16} />
+                  RETIRED
+                </RetiredWarning>
+              </HeaderField>
+            )}
+          </StyledFiller>
         </Col>
         <Col xs="auto" className="d-flex p-0 align-items-center justify-content-end">
           {hasLocation && (
@@ -96,12 +107,6 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
             </TooltipWrapper>
           )}
         </Col>
-        {isRetired && (
-          <RetiredWarning>
-            <AiOutlineExclamationCircle size={16} />
-            RETIRED
-          </RetiredWarning>
-        )}
       </Row>
       <StyledDivider />
     </>

diff --git a/...frontend/src/features/mapSideBar/property/__snapshots__/MotiInventoryHeader.test.tsx.snap b/...frontend/src/features/mapSideBar/property/__snapshots__/MotiInventoryHeader.test.tsx.snap
@@ -6,7 +6,18 @@ exports[`MotiInventoryHeader component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  <div
+  .c0 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+<div
     class="no-gutters row"
   >
     <div
@@ -51,36 +62,40 @@ exports[`MotiInventoryHeader component > renders as expected 1`] = `
       class="text-right col"
     >
       <div
-        class="justify-content-end row"
+        class="c0"
       >
         <div
-          class="pr-0 text-left col-auto"
+          class="justify-content-end row"
         >
-          <strong>
-            <label>
-              PID:
-            </label>
-          </strong>
+          <div
+            class="pr-0 text-left col-auto"
+          >
+            <strong>
+              <label>
+                PID:
+              </label>
+            </strong>
+          </div>
+          <div
+            class="pl-1 text-left col-auto"
+          />
         </div>
         <div
-          class="pl-1 text-left col-auto"
-        />
-      </div>
-      <div
-        class="justify-content-end row"
-      >
-        <div
-          class="pr-0 text-left col-auto"
+          class="justify-content-end row"
         >
-          <strong>
-            <label>
-              Land parcel type:
-            </label>
-          </strong>
+          <div
+            class="pr-0 text-left col-auto"
+          >
+            <strong>
+              <label>
+                Land parcel type:
+              </label>
+            </strong>
+          </div>
+          <div
+            class="pl-1 text-left col-auto"
+          />
         </div>
-        <div
-          class="pl-1 text-left col-auto"
-        />
       </div>
     </div>
     <div