[Task] [Complete your user profile] DSR and Figma Alignment

[shindigira]

Closes #85
Closes #120

Important note to Developer Reviewers

• DSR has been updated so you will need to reinstall the DSR package

Pending Approvals

• Deploy to AWS DEV environment (Navigate to /profile-form)
• Design team approval
• Development team review

Additional Changes Needed (01/11/2024) -- [comment update]](#146 (comment))

• Error Head Links - Used ListLink styling to make the links heavier weighted
• Denied email notification - Updated the content text again

Additional Changes Needed (01/10/2024) -- comment update

• Header Bar - Remove “User name” and “Log out” links.
• TextInput/Checkbox - Removed extra gray border when a red border is used during an error (tailwind override styles problem)
• Update Text - Based on [Task] [Complete your user profile] DSR and Figma Alignment #146 (review)
• Moved Select Institutions error to within the well.
• Pending DSR update to fix the AlertFieldLevel styling issues

Additional Changes Needed (01/09/2024) -- Figma update

• Content change (In well) - If you are authorized to file for an institution that is not listed above, please contact our support staff.

• Content change (Section heading) - Select the institution you are authorized to file for
• Design change - Change sections to H2 (includes Provide your identifying information and Select the financial institution you are authorized to file for. Top margin for these H2 sections: 60px [3.75rem].
• Design
- Checkbox label should use the inline label component: https://cfpb.github.io/design-system-react/?path=/docs/components-verified-labels--overview#inline-label. It appears that both checkboxes and radio buttons in the DSR are pulling in a-label-heading which is larger. The bank name should be styled Medium and the rest of the items be Regular weight.
• Additional spacing changes - [Task] [Complete your user profile] DSR and Figma Alignment #146 (comment)

Main Changes

• Utilizes DSR's TextInput in InputEntry
• Utilizes DSR's AlertFieldLevel in InputErrorMessage
• Utilizes DSR's AlertFieldLevel in NoDatabaseResultError
• Utilizes DSR's TextIntroduction in Step1FormHeader

Dev Changes

• Added a logout command usable from the brower's console due to after logging in with a non-domain email the app hard-forwards the user to the SBL Help link with no way of stopping this.
• Resolved TypeScript errors in AssociatedFinancialInsitutions.
• Centralized sblHelp and gleif links in a common spot.

Screenshot

Checkbox styling update

[shindigira]

@natalia-fitzgerald At your convenience, please review and point out where the User Profile does not meet the design standard. Danke!

[shindigira]

@natalia-fitzgerald At your convenience, please review and point out where the User Profile does not meet the design standard. Danke!

Actually, noticed a few new changes in the Figma. I will make a few more changes before requesting your review.

[shindigira]

@meissadia @billhimmelsbach Ready for another developer review before pushing to AWS and having Natalia review it.

[billhimmelsbach]

Looking good, one quick comment and a question for @natalia-fitzgerald.

@natalia-fitzgerald, could we get one more quick look through the content on Figma for this page? I see some small discrepancies in the content between Figma and this PR, but I want to make sure I'm looking at the right thing on Figma before I tell Sigmund to update it.

[billhimmelsbach]

Hey @shindigira! Worked with @natalia-fitzgerald a bit this morning to make sure the content copy is right, so could you update the content text to the latest version in Figma?

[shindigira]

@billhimmelsbach
I updated the content text. Please re-review.

[shindigira]

@natalia-fitzgerald Thanks for the feedback. I updated all changes based on your last comment except for the AlertFieldLevel style issues which will require this DSR PR to be integrated.

As soon as this gets in, we can update the AWS deployment for you to review again.

Also, the TextInput component was already dev verified. Just needs you to verify it officially here.

[natalia-fitzgerald]

@shindigira
Two more changes:

• These links should be styled as list links/get the heavier weight (because they are on their own line instead of inline with the body text):
  

• Can we check the checkbox expected behavior here against the DS? Is the blue line supposed to show through in the error state? I think we need to work to verify the Alert component in the DSR.
  
  40cf8971cdd6)

• Ok, I'll review the Text input component later today. I didn't realize that was pending design review/approval.

[natalia-fitzgerald]

@shindigira
One last change on the content for the denied email notification. Please use this content.

If you are still having trouble, visit Login.gov/account and confirm that your financial institution email has been added to your account. If your financial institution email is not listed, follow the steps to add it to your account.

With this the content changes should be completed.

[shindigira]

@natalia-fitzgerald I've updated this PR based on your feedback.

• I also found the reason for the "gray border under the red border" problem you've found in the TextInput as it turns out tailwind had interferring styles. Here is the TextInput fixed:

• The AlertFieldLevel style issues should be fixed in wip fix: [AlertFieldLevel] margin 0.5em, icon vertical centering issue, TextInput changes, Checkbox changes design-system-react#278. Please check out the DSR update previewed here.

• The Checkbox styling is proper. You are seeing the red border during an error on the Checkbox component which was never before in the DSR so that is why you are noticing the red/blue interference during hover.

[billhimmelsbach]

Looking good! @shindigira and I talked about two future PRs to get to another design review by Natalia.