Psp-9882 header corrections.

source/frontend/src/components/common/Section/Section.tsx

@@ -40,7 +40,7 @@ export const Section: React.FC<
       {exists(header) && (
         <StyledSectionHeader isStyledHeader={isStyledHeader}>
           <Row className="no-gutters">
-            <Col>{header}</Col>
+            <Col className="align-items-end">{header}</Col>
             {isCollapsable && (
               <Col xs="auto" className="pl-2 d-flex align-items-end">
                 {isCollapsed && (
@@ -79,7 +79,8 @@ export const StyledSectionHeader = styled.h2<{ isStyledHeader?: boolean }>`
   font-weight: ${props => (props.isStyledHeader === true ? '' : 'bold')};
   color: ${props => props.theme.css.headerTextColor};
   border-bottom: 0.2rem ${props => props.theme.css.headerBorderColor} solid;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
+  font-size: 2.6rem;
 `;
 
 const StyledFormSection = styled.div<{ noPadding?: boolean }>`

source/frontend/src/components/common/SectionListHeader.tsx

@@ -25,7 +25,7 @@ export const SectionListHeader: React.FunctionComponent<
 
   return (
     <StyledRow className={clsx('no-gutters', props.className)}>
-      <Col xs="auto" className="px-2 my-1">
+      <Col xs="auto" className="align-items-end">
         {props.title}
       </Col>
       <Col xs="auto" className="my-1">

source/frontend/src/components/common/SimpleSectionHeader.tsx

@@ -21,7 +21,7 @@ export const SimpleSectionHeader: React.FunctionComponent<
 > = ({ title, className, children }) => {
   return (
     <StyledRow className={clsx('no-gutters', className)}>
-      <Col xs="auto" className="d-flex justify-content-start px-2 my-1">
+      <Col xs="auto" className="d-flex justify-content-start align-items-end">
         {title ?? ''}
       </Col>
       {exists(children) && (

source/frontend/src/components/common/__snapshots__/SimpleSectionHeader.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`SimpleSectionHeader component > renders as expected 1`] = `
     class="c0 no-gutters row"
   >
     <div
-      class="d-flex justify-content-start px-2 my-1 col-auto"
+      class="d-flex justify-content-start align-items-end col-auto"
     >
       TEST TITLE
     </div>

source/frontend/src/components/common/form/FormGuide/FormGuideView.tsx

@@ -41,7 +41,7 @@ const FormGuideView: FunctionComponent<PropsWithChildren<IFormGuideViewProps>> =
 
 export default FormGuideView;
 
-const StyledSectionHeader = styled.h2`
+const StyledSectionHeader = styled.div`
   font-size: 16px;
   color: #1a5a96;
   font-style: italic;

source/frontend/src/components/common/styles.ts

@@ -100,7 +100,7 @@ export const H3 = styled.h3`
   border-bottom: solid 0.2rem ${props => props.theme.css.actionColor};
   width: 100%;
   text-align: left;
-  margin-bottom: 2.4rem;
+  margin-bottom: 1.6rem;
 `;
 
 export const FilterBoxForm = styled(Form)`

source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/__snapshots__/FilterContentForm.test.tsx.snap

@@ -228,7 +228,8 @@ exports[`FilterContentForm component > renders as expected 1`] = `
   font-weight: bold;
   color: var(--theme-blue-100);
   border-bottom: 0.2rem var(--theme-blue-90) solid;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
+  font-size: 2.6rem;
 }
 
 .c3 {
@@ -335,7 +336,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
           class="no-gutters row"
         >
           <div
-            class="col"
+            class="align-items-end col"
           >
             Show Ownership
           </div>
@@ -620,7 +621,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
           class="no-gutters row"
         >
           <div
-            class="col"
+            class="align-items-end col"
           >
             Project
           </div>
@@ -732,7 +733,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
           class="no-gutters row"
         >
           <div
-            class="col"
+            class="align-items-end col"
           >
             Tenure
           </div>
@@ -1122,7 +1123,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
           class="no-gutters row"
         >
           <div
-            class="col"
+            class="align-items-end col"
           >
             Lease / Licence
           </div>
@@ -1694,7 +1695,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
           class="no-gutters row"
         >
           <div
-            class="col"
+            class="align-items-end col"
           >
             Anomaly
           </div>

source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap

@@ -244,7 +244,7 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2.4rem;
+  margin-bottom: 1.6rem;
 }
 
 .c3 {

source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap

@@ -239,7 +239,7 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2.4rem;
+  margin-bottom: 1.6rem;
 }
 
 .c2 {

source/frontend/src/features/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap

@@ -269,7 +269,8 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
   font-weight: bold;
   color: var(--theme-blue-100);
   border-bottom: 0.2rem var(--theme-blue-90) solid;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
+  font-size: 2.6rem;
 }
 
 .c3 {
@@ -342,7 +343,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 Contact Details
               </div>
@@ -450,7 +451,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 <div
                   class="d-flex align-items-center"
@@ -762,7 +763,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 Mailing Address
               </div>
@@ -1019,7 +1020,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 Property Address
               </div>
@@ -1276,7 +1277,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 Billing Address
               </div>
@@ -1533,7 +1534,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 Comments
               </div>

source/frontend/src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap

@@ -314,7 +314,8 @@ exports[`CreatePersonForm > renders as expected 1`] = `
   font-weight: bold;
   color: var(--theme-blue-100);
   border-bottom: 0.2rem var(--theme-blue-90) solid;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
+  font-size: 2.6rem;
 }
 
 .c3 {
@@ -355,7 +356,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 Contact Details
               </div>
@@ -563,7 +564,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 <div
                   class="d-flex align-items-center"
@@ -875,7 +876,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 <div
                   class="d-flex align-items-center"
@@ -1164,7 +1165,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 Property Address
               </div>
@@ -1421,7 +1422,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 Billing Address
               </div>
@@ -1678,7 +1679,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="col"
+                class="align-items-end col"
               >
                 Comments
               </div>

source/frontend/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap

@@ -336,7 +336,8 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
   font-weight: bold;
   color: var(--theme-blue-100);
   border-bottom: 0.2rem var(--theme-blue-90) solid;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
+  font-size: 2.6rem;
 }
 
 .c11 {
@@ -572,7 +573,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                   class="no-gutters row"
                 >
                   <div
-                    class="col"
+                    class="align-items-end col"
                   >
                     Contact Details
                   </div>
@@ -780,7 +781,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                   class="no-gutters row"
                 >
                   <div
-                    class="col"
+                    class="align-items-end col"
                   >
                     <div
                       class="d-flex align-items-center"
@@ -1092,7 +1093,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                   class="no-gutters row"
                 >
                   <div
-                    class="col"
+                    class="align-items-end col"
                   >
                     <div
                       class="d-flex align-items-center"
@@ -1381,7 +1382,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                   class="no-gutters row"
                 >
                   <div
-                    class="col"
+                    class="align-items-end col"
                   >
                     Property Address
                   </div>
@@ -1638,7 +1639,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                   class="no-gutters row"
                 >
                   <div
-                    class="col"
+                    class="align-items-end col"
                   >
                     Billing Address
                   </div>
@@ -1895,7 +1896,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                   class="no-gutters row"
                 >
                   <div
-                    class="col"
+                    class="align-items-end col"
                   >
                     Comments
                   </div>

source/frontend/src/features/contacts/contact/create/styles.ts

@@ -1,25 +1,8 @@
 import { Form as FormikForm } from 'formik';
 import styled from 'styled-components';
 
-import { Form as FormBase } from '@/components/common/form';
 import { FlexBox } from '@/components/common/styles';
 
-export const H2 = styled.h2`
-  font-size: 2rem;
-  font-weight: 700;
-  color: ${props => props.theme.css.headerTextColor};
-  text-decoration: none solid rgb(0, 51, 102);
-  line-height: 2.9rem;
-`;
-
-export const H3 = styled.h3`
-  font-size: 1.6rem;
-  font-weight: 700;
-  color: ${props => props.theme.bcTokens.typographyColorPrimary};
-  text-decoration: none solid rgb(33, 37, 41);
-  line-height: 2rem;
-`;
-
 export const CreateFormLayout = styled(FlexBox).attrs({ column: true })`
   width: 100%;
   overflow: auto;
@@ -36,35 +19,13 @@ export const Form = styled(FormikForm)`
   }
 `;
 
-export const FormLabel = styled(FormBase.Label)`
-  font-size: 1.6rem;
-  font-weight: 700;
-  color: ${props => props.theme.bcTokens.typographyColorPrimary};
-  text-decoration: none solid rgb(33, 37, 41);
-  line-height: 2rem;
-`;
-
 export const ErrorMessage = styled(FlexBox)`
   width: auto;
   color: #d8292f;
   font-size: 1.6rem;
   align-items: center;
 `;
 
-export const SectionMessage = styled(FlexBox)<{ appearance: 'information' | 'error' }>`
-  color: ${({ appearance = 'information' }) => (appearance === 'error' ? '#d8292f' : '#494949')};
-  font-size: 1.6rem;
-  text-decoration: none;
-`;
-
-export const SubtleText = styled.span`
-  font-size: 1.6rem;
-  font-weight: 400;
-  color: ${props => props.theme.bcTokens.iconsColorDisabled};
-  text-decoration: none solid rgb(170, 170, 170);
-  line-height: 2rem;
-`;
-
 export const ButtonGroup = styled(FlexBox)`
   width: 100%;
   padding: 1rem 3rem;