PSP-10034: Fixing Font sizes, spaces and icons and icons alignment (#…

…4660) * PSP-10034 fix * Changing style.ts * Snapshots update * Changing icons positions and missing icons updates * snapshots update --------- Co-authored-by: Alejandro Sanchez <[email protected]>
bcgov · Feb 18, 2025 · e141176 · e141176
1 parent 1bb5f6c
commit e141176
Show file tree

Hide file tree

Showing 124 changed files with 2,857 additions and 2,817 deletions.
diff --git a/source/frontend/src/components/common/Section/Section.tsx b/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 className="align-items-end">{header}</Col>
+            <Col className="align-content-end">{header}</Col>
             {isCollapsable && (
               <Col xs="auto" className="pl-2 d-flex align-items-end">
                 {isCollapsed && (
@@ -80,7 +80,6 @@ export const StyledSectionHeader = styled.h2<{ isStyledHeader?: boolean }>`
   color: ${props => props.theme.css.headerTextColor};
   border-bottom: 0.2rem ${props => props.theme.css.headerBorderColor} solid;
   margin-bottom: 2.4rem;
-  font-size: 2.6rem;
 `;
 
 const StyledFormSection = styled.div<{ noPadding?: boolean }>`

diff --git a/source/frontend/src/components/common/form/FormTitleBar.tsx b/source/frontend/src/components/common/form/FormTitleBar.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { FaWindowClose } from 'react-icons/fa';
 import styled from 'styled-components';
 
+import { CloseIcon, Underline } from '@/components/common/styles';
 import * as BaseStyles from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 
@@ -44,21 +44,16 @@ export const FormTitleBar: React.FC<IFormTitleBarProps> = ({
   );
 };
 
-const Underline = styled.div`
-  width: 100%;
-  border-bottom: solid 0.5rem ${props => props.theme.bcTokens.surfaceColorBackgroundDarkBlue};
-`;
-
-const CloseIcon = styled(FaWindowClose)`
-  color: ${props => props.theme.bcTokens.typographyColorSecondary};
-  font-size: 30px;
-  cursor: pointer;
-`;
-
 // override default H1 styling for the title bar
 const TitleBarH1 = styled(BaseStyles.H1)`
   && {
     border-bottom: none;
     margin-bottom: 0.2rem;
   }
+
+  svg {
+    width: 2.8rem;
+    height: 2.8rem;
+    margin-right: 0;
+  }
 `;
diff --git a/source/frontend/src/components/common/styles.ts b/source/frontend/src/components/common/styles.ts
@@ -77,7 +77,7 @@ export const FlexBox = styled.div<IFlexBoxProps>`
 export const H1 = styled.h1`
   color: ${props => props.theme.bcTokens.typographyColorSecondary};
   font-family: 'BCSans-Bold';
-  font-size: 3.2rem;
+  font-size: 2.8rem;
   border-bottom: solid 0.5rem ${props => props.theme.css.headerBorderColor};
   width: 100%;
   text-align: left;
@@ -87,7 +87,7 @@ export const H1 = styled.h1`
 export const H2 = styled.h2`
   color: ${props => props.theme.css.headerTextColor};
   font-family: 'BCSans-Bold';
-  font-size: 2.6rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem ${props => props.theme.css.headerBorderColor};
   width: 100%;
   text-align: left;
@@ -143,9 +143,7 @@ export const StyledSectionParagraph = styled.p`
   text-decoration: none;
 `;
 
-export const TrayHeader = styled.div`
-  font-size: 2rem;
-  font-weight: bold;
+export const TrayHeader = styled(H1)`
   padding: 1rem;
   background-color: ${props => props.theme.bcTokens.surfaceColorPrimaryButtonDefault};
   color: white;

diff --git a/source/frontend/src/components/layout/SideNavBar/SideTrayLayout.tsx b/source/frontend/src/components/layout/SideNavBar/SideTrayLayout.tsx
@@ -24,7 +24,7 @@ export const SideTrayLayout: React.FC<React.PropsWithChildren<ISideTrayLayoutPro
         <Col>
           <Styled.TrayHeader className="mr-auto">
             <>
-              <span className="mr-2">{icon}</span>
+              <div className="mr-2 mb-1">{icon}</div>
               {title}
             </>
           </Styled.TrayHeader>

diff --git a/source/frontend/src/components/layout/SideNavBar/styles.ts b/source/frontend/src/components/layout/SideNavBar/styles.ts
@@ -5,6 +5,8 @@ import styled from 'styled-components';
 import { H1 } from '@/components/common/styles';
 
 export const TrayHeader = styled(H1)`
+  display: flex;
+  align-items: end;
   border-bottom: 0;
   margin-bottom: 0.2rem;
 `;

diff --git a/...ponents/maps/leaflet/Control/AdvancedFilter/__snapshots__/FilterContentForm.test.tsx.snap b/...ponents/maps/leaflet/Control/AdvancedFilter/__snapshots__/FilterContentForm.test.tsx.snap
@@ -229,7 +229,6 @@ exports[`FilterContentForm component > renders as expected 1`] = `
   color: var(--theme-blue-100);
   border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2.4rem;
-  font-size: 2.6rem;
 }
 
 .c3 {
@@ -336,7 +335,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
           class="no-gutters row"
         >
           <div
-            class="align-items-end col"
+            class="align-content-end col"
           >
             Show Ownership
           </div>
@@ -621,7 +620,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
           class="no-gutters row"
         >
           <div
-            class="align-items-end col"
+            class="align-content-end col"
           >
             Project
           </div>
@@ -733,7 +732,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
           class="no-gutters row"
         >
           <div
-            class="align-items-end col"
+            class="align-content-end col"
           >
             Tenure
           </div>
@@ -1123,7 +1122,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
           class="no-gutters row"
         >
           <div
-            class="align-items-end col"
+            class="align-content-end col"
           >
             Lease / Licence
           </div>
@@ -1695,7 +1694,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
           class="no-gutters row"
         >
           <div
-            class="align-items-end col"
+            class="align-content-end col"
           >
             Anomaly
           </div>

diff --git a/source/frontend/src/features/acquisition/list/AcquisitionListView.tsx b/source/frontend/src/features/acquisition/list/AcquisitionListView.tsx
@@ -155,4 +155,8 @@ const FlexDiv = styled.div`
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.25rem;
+
+  svg {
+    vertical-align: baseline;
+  }
 `;
diff --git a/.../frontend/src/features/admin/access-request/__snapshots__/AccessRequestPage.test.tsx.snap b/.../frontend/src/features/admin/access-request/__snapshots__/AccessRequestPage.test.tsx.snap
@@ -227,7 +227,7 @@ exports[`AccessRequestPage > renders correctly 1`] = `
 .c1 {
   color: #474543;
   font-family: 'BCSans-Bold';
-  font-size: 3.2rem;
+  font-size: 2.8rem;
   border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;

diff --git a/source/frontend/src/features/admin/access/ManageAccessRequestsPage.tsx b/source/frontend/src/features/admin/access/ManageAccessRequestsPage.tsx
@@ -51,7 +51,13 @@ const ManageAccessRequestsPage = () => {
   return (
     <StyledContainer>
       <CommonStyled.H1>
-        <AdminIcon title="Admin Tools icon" width="2.6rem" height="2.6rem" fill="currentColor" />
+        <AdminIcon
+          title="Admin Tools icon"
+          width="2.6rem"
+          height="2.6rem"
+          fill="currentColor"
+          style={{ verticalAlign: 'baseline' }}
+        />
         <span className="ml-2">PIMS User Access Requests</span>
       </CommonStyled.H1>
       <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
@@ -238,7 +238,7 @@ exports[`Manage access requests > Snapshot matches 1`] = `
 .c2 {
   color: #474543;
   font-family: 'BCSans-Bold';
-  font-size: 3.2rem;
+  font-size: 2.8rem;
   border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
@@ -274,6 +274,7 @@ exports[`Manage access requests > Snapshot matches 1`] = `
       <svg
         fill="currentColor"
         height="2.6rem"
+        style="vertical-align: baseline;"
         title="Admin Tools icon"
         viewBox="0 0 24 24"
         width="2.6rem"

diff --git a/source/frontend/src/features/admin/document-template/DocumentTemplateManagementView.tsx b/source/frontend/src/features/admin/document-template/DocumentTemplateManagementView.tsx
@@ -30,7 +30,13 @@ export const DocumentTemplateManagementView: React.FunctionComponent<
       <PaddedScrollable>
         <LoadingBackdrop show={props.isLoading} />
         <CommonStyled.H1>
-          <AdminIcon title="Admin Tools icon" width="2.6rem" height="2.6rem" fill="currentColor" />
+          <AdminIcon
+            title="Admin Tools icon"
+            width="2.6rem"
+            height="2.6rem"
+            fill="currentColor"
+            style={{ verticalAlign: 'baseline' }}
+          />
           <span className="ml-2">PIMS Document Template Management</span>
         </CommonStyled.H1>
         <Section>

diff --git a/...s/admin/document-template/__snapshots__/DocumentTemplateManagementContainer.test.tsx.snap b/...s/admin/document-template/__snapshots__/DocumentTemplateManagementContainer.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`DocumentTemplateManagementContainer component > matches snapshot 1`] =
 .c3 {
   color: #474543;
   font-family: 'BCSans-Bold';
-  font-size: 3.2rem;
+  font-size: 2.8rem;
   border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
@@ -67,6 +67,7 @@ exports[`DocumentTemplateManagementContainer component > matches snapshot 1`] =
         <svg
           fill="currentColor"
           height="2.6rem"
+          style="vertical-align: baseline;"
           title="Admin Tools icon"
           viewBox="0 0 24 24"
           width="2.6rem"

diff --git a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserPage.test.tsx.snap b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserPage.test.tsx.snap
@@ -227,7 +227,7 @@ exports[`Edit user page > EditUserPage renders 1`] = `
 .c1 {
   color: #474543;
   font-family: 'BCSans-Bold';
-  font-size: 3.2rem;
+  font-size: 2.8rem;
   border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;

diff --git a/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx b/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx
@@ -145,4 +145,8 @@ const FlexDiv = styled.div`
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.25rem;
+
+  svg {
+    vertical-align: baseline;
+  }
 `;
diff --git a/source/frontend/src/features/admin/users/ManageUsersPage.tsx b/source/frontend/src/features/admin/users/ManageUsersPage.tsx
@@ -78,7 +78,13 @@ export const ManageUsersPage = () => {
   return (
     <StyledPage fluid className="users-management-page">
       <CommonStyled.H1>
-        <AdminIcon title="Admin Tools icon" width="2.6rem" height="2.6rem" fill="currentColor" />
+        <AdminIcon
+          title="Admin Tools icon"
+          width="2.6rem"
+          height="2.6rem"
+          fill="currentColor"
+          style={{ verticalAlign: 'baseline' }}
+        />
         <span className="ml-2">User Management</span>
       </CommonStyled.H1>
       <Row>

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
@@ -335,7 +335,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
 .c2 {
   color: #474543;
   font-family: 'BCSans-Bold';
-  font-size: 3.2rem;
+  font-size: 2.8rem;
   border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
@@ -403,6 +403,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
       <svg
         fill="currentColor"
         height="2.6rem"
+        style="vertical-align: baseline;"
         title="Admin Tools icon"
         viewBox="0 0 24 24"
         width="2.6rem"

diff --git a/source/frontend/src/features/contacts/contact/create/CreateContactContainer.tsx b/source/frontend/src/features/contacts/contact/create/CreateContactContainer.tsx
@@ -1,9 +1,9 @@
 import { getIn } from 'formik';
 import React from 'react';
-import { MdContactMail } from 'react-icons/md';
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
+import ContactIcon from '@/assets/images/contact-icon.svg?react';
 import { FormTitleBar } from '@/components/common/form/FormTitleBar';
 import { ContactTypeSelector, HalfWidthLayout } from '@/features/contacts';
 import { ContactTypes } from '@/features/contacts/interfaces';
@@ -32,7 +32,7 @@ export const CreateContactContainer: React.FunctionComponent<
       <FormTitleBar
         showCloseButton
         title="Add Contact"
-        icon={<MdContactMail className="mr-2 mb-2" size={28} />}
+        icon={<ContactIcon className="mr-2 mb-2" fill="currentColor" />}
         onClose={onClose}
       />
       <StyledFormWrapper>

diff --git a/...s/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap b/...s/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap
@@ -270,7 +270,6 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
   color: var(--theme-blue-100);
   border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2.4rem;
-  font-size: 2.6rem;
 }
 
 .c3 {
@@ -343,7 +342,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="align-items-end col"
+                class="align-content-end col"
               >
                 Contact Details
               </div>
@@ -451,7 +450,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="align-items-end col"
+                class="align-content-end col"
               >
                 <div
                   class="d-flex align-items-center"
@@ -763,7 +762,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="align-items-end col"
+                class="align-content-end col"
               >
                 Mailing Address
               </div>
@@ -1020,7 +1019,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="align-items-end col"
+                class="align-content-end col"
               >
                 Property Address
               </div>
@@ -1277,7 +1276,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="align-items-end col"
+                class="align-content-end col"
               >
                 Billing Address
               </div>
@@ -1534,7 +1533,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
               class="no-gutters row"
             >
               <div
-                class="align-items-end col"
+                class="align-content-end col"
               >
                 Comments
               </div>