Updated list headers

bcgov · Dec 13, 2024 · c530a70 · c530a70
1 parent 2183180
commit c530a70
Show file tree

Hide file tree

Showing 19 changed files with 117 additions and 649 deletions.
diff --git a/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap b/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap
diff --git a/source/frontend/src/features/acquisition/list/AcquisitionListView.tsx b/source/frontend/src/features/acquisition/list/AcquisitionListView.tsx
@@ -7,6 +7,7 @@ import { toast } from 'react-toastify';
 
 import { StyledIconButton } from '@/components/common/buttons/IconButton';
 import { StyledAddButton } from '@/components/common/styles';
+import * as CommonStyled from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 import Claims from '@/constants/claims';
 import { useApiAcquisitionFile } from '@/hooks/pims-api/useApiAcquisitionFile';
@@ -95,7 +96,7 @@ export const AcquisitionListView: React.FunctionComponent<
   return (
     <Styled.ListPage>
       <Styled.Scrollable>
-        <Styled.PageHeader>Acquisition Files</Styled.PageHeader>
+        <CommonStyled.H1>Acquistion Files</CommonStyled.H1>
         <Styled.PageToolbar>
           <Row>
             <Col>

diff --git a/source/frontend/src/features/admin/access/ManageAccessRequestsPage.tsx b/source/frontend/src/features/admin/access/ManageAccessRequestsPage.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect } from 'react';
 import { toast } from 'react-toastify';
 import styled from 'styled-components';
 
+import * as CommonStyled from '@/components/common/styles';
 import { Table } from '@/components/Table';
 import { useApiAccessRequests } from '@/hooks/pims-api/useApiAccessRequests';
 import { useSearch } from '@/hooks/useSearch';
@@ -48,7 +49,7 @@ const ManageAccessRequestsPage = () => {
 
   return (
     <StyledContainer>
-      <StyledPageHeader>PIMS User Access Requests</StyledPageHeader>
+      <CommonStyled.H1>PIMS User Access Requests</CommonStyled.H1>
       <AccessRequestFilter
         initialValues={filter}
         applyFilter={accessRequestfilter => setFilter(accessRequestfilter)}

diff --git a/...e/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap b/...e/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap
@@ -231,6 +231,16 @@ exports[`Manage access requests > Snapshot matches 1`] = `
   background: white;
 }
 
+.c2 {
+  color: #474543;
+  font-family: 'BCSans-Bold';
+  font-size: 3.2rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
+  width: 100%;
+  text-align: left;
+  margin-bottom: 2.4rem;
+}
+
 .c0 {
   padding: 1.6rem 3.2rem;
   -webkit-box-flex: 1;
@@ -251,18 +261,14 @@ exports[`Manage access requests > Snapshot matches 1`] = `
   height: 100%;
 }
 
-.c2 {
-  text-align: left;
-}
-
 <div
     class="c0 c1"
   >
-    <h3
+    <h1
       class="c2"
     >
       PIMS User Access Requests
-    </h3>
+    </h1>
     <form
       class="c3 p-3"
     >

diff --git a/source/frontend/src/features/admin/document-template/DocumentTemplateManagementView.tsx b/source/frontend/src/features/admin/document-template/DocumentTemplateManagementView.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { Scrollable as ScrollableBase } from '@/components/common/Scrollable/Scrollable';
 import { Section } from '@/components/common/Section/Section';
+import * as CommonStyled from '@/components/common/styles';
 import DocumentListContainer from '@/features/documents/list/DocumentListContainer';
 import { ApiGen_CodeTypes_DocumentRelationType } from '@/models/api/generated/ApiGen_CodeTypes_DocumentRelationType';
 import { ApiGen_Concepts_FormDocumentType } from '@/models/api/generated/ApiGen_Concepts_FormDocumentType';
@@ -29,7 +30,7 @@ export const DocumentTemplateManagementView: React.FunctionComponent<
       <Scrollable>
         <LoadingBackdrop show={props.isLoading} />
 
-        <StyledPageHeader>PIMS Document Template Management</StyledPageHeader>
+        <CommonStyled.H1>PIMS Document Template Management</CommonStyled.H1>
         <Section>
           <Row>
             <Col xs="auto">Form Type:</Col>

diff --git a/...s/admin/document-template/__snapshots__/DocumentTemplateManagementContainer.test.tsx.snap b/...s/admin/document-template/__snapshots__/DocumentTemplateManagementContainer.test.tsx.snap
@@ -6,7 +6,17 @@ exports[`DocumentTemplateManagementContainer component > matches snapshot 1`] =
     class="Toastify"
   />
   <div />
-  .c1 {
+  .c3 {
+  color: #474543;
+  font-family: 'BCSans-Bold';
+  font-size: 3.2rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
+  width: 100%;
+  text-align: left;
+  margin-bottom: 2.4rem;
+}
+
+.c1 {
   width: 100%;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -23,10 +33,6 @@ exports[`DocumentTemplateManagementContainer component > matches snapshot 1`] =
   border-radius: 0.5rem;
 }
 
-.c3 {
-  text-align: left;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -55,11 +61,11 @@ exports[`DocumentTemplateManagementContainer component > matches snapshot 1`] =
     <div
       class="c1 c2"
     >
-      <h3
+      <h1
         class="c3"
       >
         PIMS Document Template Management
-      </h3>
+      </h1>
       <div
         class="c4 form-section"
       >

diff --git a/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx b/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx
@@ -4,6 +4,7 @@ import { Col, Row } from 'react-bootstrap';
 import { FaPlus } from 'react-icons/fa';
 import { useHistory } from 'react-router';
 
+import * as CommonStyled from '@/components/common/styles';
 import { StyledAddButton } from '@/components/common/styles';
 import { TableSort } from '@/components/Table/TableSort';
 import { Roles } from '@/constants/roles';
@@ -97,7 +98,7 @@ export const FinancialCodeListView: React.FC = () => {
   return (
     <Styled.ListPage>
       <Styled.Scrollable>
-        <Styled.PageHeader>Financial Codes</Styled.PageHeader>
+        <CommonStyled.H1>Financial Codes</CommonStyled.H1>
         <Styled.PageToolbar>
           <Row>
             <Col>

diff --git a/source/frontend/src/features/admin/users/ManageUsersPage.tsx b/source/frontend/src/features/admin/users/ManageUsersPage.tsx
@@ -6,6 +6,7 @@ import { FaFileExcel } from 'react-icons/fa';
 import styled from 'styled-components';
 
 import { StyledIconButton } from '@/components/common/buttons';
+import * as CommonStyled from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 import { Table } from '@/components/Table';
 import { useApiUsers } from '@/hooks/pims-api/useApiUsers';
@@ -75,7 +76,7 @@ export const ManageUsersPage = () => {
 
   return (
     <StyledPage fluid className="users-management-page">
-      <StyledPageHeader>User Management</StyledPageHeader>
+      <CommonStyled.H1>User Management</CommonStyled.H1>
       <Row>
         <Col md={8}>
           <UsersFilterBar values={filter} onChange={setFilter} />

diff --git a/source/frontend/src/features/admin/users/__snapshots__/ManageUsersPage.test.tsx.snap b/source/frontend/src/features/admin/users/__snapshots__/ManageUsersPage.test.tsx.snap
@@ -307,6 +307,16 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
   background: white;
 }
 
+.c2 {
+  color: #474543;
+  font-family: 'BCSans-Bold';
+  font-size: 3.2rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
+  width: 100%;
+  text-align: left;
+  margin-bottom: 2.4rem;
+}
+
 .c3 {
   background-color: #d9eaf7;
   border-radius: 0.5rem;
@@ -346,18 +356,14 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
   padding: 1rem 2rem;
 }
 
-.c2 {
-  text-align: left;
-}
-
 <div
     class="c0 c1 users-management-page container-fluid"
   >
-    <h3
+    <h1
       class="c2"
     >
       User Management
-    </h3>
+    </h1>
     <div
       class="row"
     >

diff --git a/source/frontend/src/features/contacts/list/ContactListPage.tsx b/source/frontend/src/features/contacts/list/ContactListPage.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 import { Scrollable as ScrollableBase } from '@/components/common/Scrollable/Scrollable';
+import * as CommonStyled from '@/components/common/styles';
 import ContactManagerView from '@/components/contact/ContactManagerView/ContactManagerView';
 
 /**
@@ -10,7 +11,7 @@ export const ContactListPage = () => {
   return (
     <StyledListPage>
       <StyledScrollable>
-        <StyledPageHeader>Contacts</StyledPageHeader>
+        <CommonStyled.H1>Contacts</CommonStyled.H1>
         <ContactManagerView showActiveSelector showAddButton />
       </StyledScrollable>
     </StyledListPage>

diff --git a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
@@ -343,6 +343,16 @@ exports[`Contact List View > matches snapshot 1`] = `
   flex-wrap: nowrap;
 }
 
+.c3 {
+  color: #474543;
+  font-family: 'BCSans-Bold';
+  font-size: 3.2rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
+  width: 100%;
+  text-align: left;
+  margin-bottom: 2.4rem;
+}
+
 .c5.form-group {
   display: -webkit-box;
   display: -webkit-flex;
@@ -478,10 +488,6 @@ exports[`Contact List View > matches snapshot 1`] = `
   width: 100%;
 }
 
-.c3 {
-  text-align: left;
-}
-
 @media only screen and (max-width:1199px) {
   .c4 {
     max-width: 50%;
@@ -494,11 +500,11 @@ exports[`Contact List View > matches snapshot 1`] = `
     <div
       class="c1 c2"
     >
-      <h3
+      <h1
         class="c3"
       >
         Contacts
-      </h3>
+      </h1>
       <div>
         <div
           class="row"

diff --git a/source/frontend/src/features/disposition/list/DispositionListView.tsx b/source/frontend/src/features/disposition/list/DispositionListView.tsx
@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import { StyledIconButton } from '@/components/common/buttons';
+import * as CommonStyled from '@/components/common/styles';
 import { StyledAddButton } from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 import { Claims } from '@/constants';
@@ -115,7 +116,7 @@ export const DispositionListView: React.FC<unknown> = () => {
   return (
     <S.ListPage>
       <S.Scrollable>
-        <S.PageHeader>Disposition Files</S.PageHeader>
+        <CommonStyled.H1>Disposition Files</CommonStyled.H1>
         <S.PageToolbar>
           <Row>
             <Col>

diff --git a/...ce/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap b/...ce/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap
@@ -329,6 +329,16 @@ exports[`Disposition List View > matches snapshot 1`] = `
   font-size: 2.4rem;
 }
 
+.c3 {
+  color: #474543;
+  font-family: 'BCSans-Bold';
+  font-size: 3.2rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
+  width: 100%;
+  text-align: left;
+  margin-bottom: 2.4rem;
+}
+
 .c5 {
   background-color: #d9eaf7;
   border-radius: 0.5rem;
@@ -365,10 +375,6 @@ exports[`Disposition List View > matches snapshot 1`] = `
   width: 100%;
 }
 
-.c3 {
-  text-align: left;
-}
-
 .c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -388,11 +394,11 @@ exports[`Disposition List View > matches snapshot 1`] = `
     <div
       class="c1 c2"
     >
-      <h3
+      <h1
         class="c3"
       >
         Disposition Files
-      </h3>
+      </h1>
       <div
         class="c4"
       >

diff --git a/source/frontend/src/features/leases/list/LeaseListView.tsx b/source/frontend/src/features/leases/list/LeaseListView.tsx
@@ -6,6 +6,7 @@ import { useHistory } from 'react-router';
 import { toast } from 'react-toastify';
 
 import { StyledIconButton } from '@/components/common/buttons';
+import * as CommonStyled from '@/components/common/styles';
 import { StyledAddButton } from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 import Claims from '@/constants/claims';
@@ -80,7 +81,7 @@ export const LeaseListView: React.FunctionComponent<React.PropsWithChildren<unkn
   return (
     <Styled.ListPage>
       <Styled.Scrollable>
-        <Styled.PageHeader>Leases &amp; Licences</Styled.PageHeader>
+        <CommonStyled.H1>Leases &amp; Licences</CommonStyled.H1>
         <Styled.PageToolbar>
           <Row>
             <Col>

diff --git a/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap b/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap
@@ -334,6 +334,16 @@ exports[`Lease and License List View > matches snapshot 1`] = `
   height: 1.6rem;
 }
 
+.c3 {
+  color: #474543;
+  font-family: 'BCSans-Bold';
+  font-size: 3.2rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
+  width: 100%;
+  text-align: left;
+  margin-bottom: 2.4rem;
+}
+
 .c5 {
   background-color: #d9eaf7;
   border-radius: 0.5rem;
@@ -385,10 +395,6 @@ exports[`Lease and License List View > matches snapshot 1`] = `
   width: 100%;
 }
 
-.c3 {
-  text-align: left;
-}
-
 .c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -404,11 +410,11 @@ exports[`Lease and License List View > matches snapshot 1`] = `
     <div
       class="c1 c2"
     >
-      <h3
+      <h1
         class="c3"
       >
         Leases & Licences
-      </h3>
+      </h1>
       <div
         class="c4"
       >

diff --git a/source/frontend/src/features/projects/list/ProjectListView.tsx b/source/frontend/src/features/projects/list/ProjectListView.tsx
@@ -3,6 +3,7 @@ import { Col, Row } from 'react-bootstrap';
 import { FaPlus } from 'react-icons/fa';
 import { useHistory } from 'react-router-dom';
 
+import * as CommonStyled from '@/components/common/styles';
 import { StyledAddButton } from '@/components/common/styles';
 import { Claims } from '@/constants/claims';
 import { useApiProjects } from '@/hooks/pims-api/useApiProjects';
@@ -54,7 +55,7 @@ export const ProjectListView: React.FunctionComponent<React.PropsWithChildren<un
   return (
     <Styled.ListPage>
       <Styled.Scrollable>
-        <Styled.PageHeader>Projects</Styled.PageHeader>
+        <CommonStyled.H1>Projects</CommonStyled.H1>
         <Styled.PageToolbar>
           <Row>
             <Col>