[Design Review] Sign & Submit (#524)

Close #449 

## Changes

- Content updates

## Screenshots - Updated May 16, 12:30 ET


![screencapture-localhost-8899-filing-2024-123456789TESTBANK123-submit-2024-05-16-10_26_44](https://github.com/cfpb/sbl-frontend/assets/2592907/840e08a4-1694-421c-aff2-1126efe0f9f6)

src/components/CommonLinks.tsx

@@ -41,7 +41,7 @@ function UpdateInstitutionProfile({
       label={
         isCallToAction
           ? 'Update your financial institution profile'
-          : 'update financial institution profile'
+          : 'update your financial institution profile'
       }
     />
   );

src/pages/Filing/FilingApp/FilingSubmit.helpers.tsx

@@ -11,7 +11,7 @@ import { DisplayField } from '../ViewInstitutionProfile/DisplayField';
 
 const pocDefaultDescription = (
   <>
-    If the information in this section is incorrect{' '}
+    If the information in this section is incorrect,{' '}
     <Links.UpdatePointOfContact />. Otherwise, check the box to confirm that the
     information is accurate and complete.
   </>
@@ -61,9 +61,9 @@ export function PointOfContactConfirm({
 
 const fileInfoDefaultDescription = (
   <>
-    If the information in this section is incorrect <Links.UploadANewFile /> and
-    repeat the validation process. Otherwise, check the box to confirm that the
-    information is accurate and complete.
+    If the information in this section is incorrect, <Links.UploadANewFile />{' '}
+    and repeat the validation process. Otherwise, check the box to confirm that
+    the information is accurate and complete.
   </>
 );
 
@@ -167,7 +167,7 @@ export function SignCertify({
       <WellContainer className='u-mt30'>
         <Checkbox
           id='sign-and-certify'
-          label={`I, ${name}, am an authorized representative of my institution with knowledge of the data submitted certify the accuracy and completeness of the data submitted.`}
+          label={`I, ${name}, am an authorized representative of my financial institution with knowledge of the data and certify the accuracy and completeness of the data reported.`}
           checked={value}
           onChange={onChange}
           disabled

src/pages/Filing/FilingApp/FilingSubmit.tsx

@@ -5,8 +5,7 @@ import {
   Checkbox,
   Grid,
   Link,
-  List,
-  ListItem,
+  Paragraph,
   TextIntroduction,
 } from 'design-system-react';
 import type { ChangeEvent } from 'react';
@@ -126,7 +125,7 @@ export function FilingSubmit(): JSX.Element {
             <InstitutionYearLabel name={institution.name} year={year} />
             <TextIntroduction
               heading='Sign and submit'
-              subheading='Before you sign and submit, carefully review all the information provided in each of the following sections. For each section, check the box if the information is complete and accurate, or follow the instructions to make changes.'
+              subheading='Before you sign and submit, carefully review all the information provided in each of the following sections. For each section, check the box to confirm that the information is accurate and complete, or follow the instructions to make changes.'
               description={
                 <p>
                   An authorized representative of your financial institution
@@ -287,25 +286,21 @@ export function FilingSubmit(): JSX.Element {
           <Grid.Column width={8} className='u-mt0 u-mb60'>
             <Alert
               status='success'
-              message='Congratulations! You have reached the end of our beta filing process.'
+              message='Congratulations! You have reached the end of the beta filing process.'
             >
-              Thank you for your participation. Your input will help us improve
-              our platform. Please take a moment to send us your feedback or
-              upload a new file to continue testing.
-              <List isUnstyled>
-                <ListItem>
-                  <Link
-                    href='mailto:SBLHelp@cfpb.gov?subject=[BETA] Sign and submit: Feedback'
-                    type='list'
-                    className='font-medium'
-                  >
-                    Email our support staff
-                  </Link>
-                </ListItem>
-                <ListItem>
-                  <Links.UploadANewFile label='Upload a new file' />
-                </ListItem>
-              </List>
+              <Paragraph>
+                Thanks for participating. Your input will help us improve our
+                platform. Please take a moment to{' '}
+                <Link
+                  href='mailto:SBLHelp@cfpb.gov?subject=[BETA] Sign and submit: Feedback'
+                  type='list'
+                  className='a-btn__link'
+                >
+                  email our support staff
+                </Link>{' '}
+                with your feedback or <Links.UploadANewFile /> to continue
+                testing.
+              </Paragraph>
             </Alert>
           </Grid.Column>
         </Grid.Row>

src/pages/Filing/ViewInstitutionProfile/AffiliateInformation.tsx

@@ -48,8 +48,8 @@ export function AffiliateInformation({
           value={data.parent_rssd_id}
         />
 
-        <Divider className='u-mt45' />
-        <Heading type='3' className='u-mt45 h5'>
+        <Divider className='u-mt30 u-mb30' />
+        <Heading type='3' className='h5'>
           Top-Holding Parent Entity
         </Heading>
         <DisplayField

src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx

@@ -37,7 +37,7 @@ export function FinancialInstitutionDetails({
   description?: ReactNode;
 }): JSX.Element {
   return (
-    <FormSectionWrapper className='u-mt45'>
+    <FormSectionWrapper className='u-mt60'>
       <SectionIntro heading={heading}>{description}</SectionIntro>
 
       <WellContainer className='u-mt30'>

src/utils/formatDateTime.ts

@@ -1,4 +1,26 @@
 import { DateTime } from 'luxon';
+import { One } from './constants';
+
+/**
+ * These adjustments aim to align our date/time displays with the CFPB editorial style guide.
+ *
+ * Format: Array of arrays which contain [0] the string to replace and [1] the string to replace it with.
+ */
+const adjustments: string[][] = [
+  ['AM', 'a.m.'], // Day/night
+  ['PM', 'p.m.'],
+  ['CDT', 'CT'], // Timezone
+  ['EDT', 'ET'],
+  ['MDT', 'MT'],
+  ['PDT', 'PT'],
+  ['January', 'Jan.'], // Month
+  ['February', 'Feb.'],
+  ['August', 'Aug.'],
+  ['September', 'Sep.'],
+  ['October', 'Oct.'],
+  ['November', 'Nov.'],
+  ['December', 'Dec.'],
+];
 
 function formatDateTime(isoTimeString: string): string {
   // Parse the ISO time string in UTC
@@ -32,7 +54,12 @@ function formatDateTimeShort(isoTimeString: string, format = 'ff'): string {
   const localDateTime = dt.setZone(
     Intl.DateTimeFormat().resolvedOptions().timeZone,
   );
-  return localDateTime.toFormat(format);
+  let timeString = localDateTime.toFormat(format);
+
+  for (const pair of adjustments)
+    timeString = timeString.replace(pair[0], pair[One]);
+
+  return timeString;
 }
 
 export { formatDateTime, formatDateTimeShort };