fix(update-user-profile): design and content review (#634)

Update the content and style of Update your user profile with [the latest design requests](#578). ## Changes - update copy of associated financial institutions section - remove now unnecessary class that was restricting the page content to 625px instead of 670px ## How to test this PR 1. Does Update your user profile match figma? ## Screenshots <img width="552" alt="Screenshot 2024-06-03 at 8 40 25 AM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/25283194-9677-44b3-a168-ef997d733ac7"> --------- Co-authored-by: shindigira <[email protected]>
cfpb · Jun 3, 2024 · a206415 · a206415
1 parent 577af6e
commit a206415
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/src/pages/Filing/ViewUserProfile/AssociatedInstitutions.tsx b/src/pages/Filing/ViewUserProfile/AssociatedInstitutions.tsx
@@ -24,7 +24,7 @@ export default function AssociatedInstitutions({
       <SectionIntro heading='Associated financial institutions'>
         If the financial institution you are authorized to file for is not
         listed or if you are authorized to file for additional financial
-        institutions, submit a request to{' '}
+        institutions,{' '}
         <Link href='mailto:[email protected]?subject=[BETA] View your user profile: Add additional authorized financial institutions'>
           email our support staff
         </Link>

diff --git a/src/pages/Filing/ViewUserProfile/index.tsx b/src/pages/Filing/ViewUserProfile/index.tsx
@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import { fetchAssociatedInstitutions, fetchUserProfile } from 'api/requests';
-import { Link, ListLink } from 'components/Link';
+import { Link } from 'components/Link';
 import { LoadingContent } from 'components/Loading';
-import { Grid, List, TextIntroduction } from 'design-system-react';
+import { Grid, Paragraph, TextIntroduction } from 'design-system-react';
 import { useError500 } from 'pages/Error/Error500';
 import useSblAuth from '../../../api/useSblAuth';
 import CrumbTrail from '../../../components/CrumbTrail';
@@ -61,17 +61,19 @@ export default function ViewUserProfile(): JSX.Element | null {
             <TextIntroduction
               heading='View your user profile'
               subheading='This profile reflects the information we have on file for you, including your first and last name, email address, and associated financial institutions.'
-              description='To request an update to your name or associated financial institutions, click on the following link.'
-              // TODO: replace this generic SBL Help link with a specific Salesforce form link, see:
-              // https://github.com/cfpb/sbl-frontend/issues/109
-              callToAction={
-                <List isLinks>
-                  <ListLink href='mailto:[email protected]?subject=[BETA] View your user profile: Update my user profile'>
-                    Email our support staff
-                  </ListLink>
-                </List>
+              description={
+                // TODO: replace this generic SBL Help link with a specific Salesforce form link, see:
+                // https://github.com/cfpb/sbl-frontend/issues/109
+                <Paragraph>
+                  To request an update to your name or associated financial
+                  institutions,{' '}
+                  <Link href='mailto:[email protected]?subject=[BETA] View your user profile: Update my user profile'>
+                    email our support staff
+                  </Link>
+                  . Please allow 24-48 hours for a response during normal
+                  business hours.
+                </Paragraph>
               }
-              className='max-w-[39.063rem]'
             />
             <UserInformation data={UserProfile} />
             <AssociatedInstitutions data={associatedInstitutions} />