LG-10362: New Image Capture Page Language

[charleyf]

🎫 Ticket

https://cm-jira.usa.gov/browse/LG-10362

🛠 Summary of changes

This PR updates three pieces of text on the image capture page:

1. The page header at the top
2. The sentence immediately below the page header
3. The text inside the tap-targets

📜 Testing Plan

The testing plan is basically: Go look at the document upload page, check that the new text appears. [ Edit: Also check that the text/formatting in the tap-target looks good on mobile and desktop because we changed the font size. ]

• Log in/create an account in your local instance using English as the language.
• Type this into your address bar to start the verify process: http://localhost:3000/verify/
• Click through a few pages, then choose to upload the photos from your computer (since it's faster to do this).
• When you get to the page with the upload targets for the front/back of the ID
  • Verify that the English page header matches the design and text in ticket (linked above)
  • Verify that the text directly under the header matches the design and text in ticket (linked above).
  • Verify that the English text inside the front upload target matches the design and text in ticket (linked above).
  • Verify that the English text inside the back upload target matches the design and text in ticket (linked above).
• Switch your language to Spanish by changing the URL.
  • When looking at the document upload page in English your URL bar will look like this: http://localhost:3000/en/verify/document_capture
  • Change to Spanish by swapping the en for es like this: http://localhost:3000/es/verify/document_capture
  • Verify that the Spanish page header matches the design and text in ticket (linked above)
  • Verify that the text directly under the header matches the text in ticket (linked above).
  • Verify that the Spanish text inside the front upload target matches the text in ticket (linked above).
  • Verify that the Spanish text inside the back upload target matches the text in ticket (linked above).
• Switch your language to French by changing the URL.
  • Change to French: http://localhost:3000/fr/verify/document_capture
  • Verify that the French page header matches the design and text in ticket (linked above)
  • Verify that the text directly under the header matches the text in ticket (linked above).
  • Verify that the French text inside the front upload target matches the text in ticket (linked above).
  • Verify that the French text inside the back upload target matches the text in ticket (linked above).

👀 Screenshots

If relevant, include a screenshot or screen capture of the changes.

English:

Spanish:

French:

[kellular]

Could you include screenshots of what this page looks like on mobile too? I can't tell from the file what text size the "Front/Back of your..." copy is, but it looks a bit large on the desktop views

[charleyf]

@kellular Putting the screenshots here so we can use the threading to discuss. I did also want to mention that this PR changes from all uppercase like "FRONT" to mixed case as I'm seeing in the designs.

iOS - Chrome

iOS - Safari

[kellular]

Thank you! Yep, the tap target copy should be sentence case like you have it here.

Is the desktop screen size using an h1 for the tap target copy?

[charleyf]

On the desktop in Chrome

<!-- The page heading -->
<!-- The font size is set to 1.75rem which ends up being computed to a font size of 28px for my browser -->
<h1 class="page-heading">Add photos of your ID</h1>

<!-- The text in the tap target -->
<!-- The font size is set to 1.625rem which ends up being computed to a font size of 26px for my browser -->
<strong class="usa-file-input__banner-text">Front of your driver’s license or state ID</strong>

[charleyf]

It's easy to resize this text, happy to give you a live demo of various sizes. Here's some screenshots with different font sizes I tried.

Tap-Target Text 1.25rem

Tap-Target Text 1.5rem

Tap-Target Text As Is 1.625rem

[kellular]

thank you for all the screenshots! Could we make the tap target text an h2 for both desktop and mobile? I think that's 1.375rem and 1.25rem respectively

[charleyf]

Made that change (commit link). The size of that text is now directly inherited from the h2 sizing. Here's what it looks like

Desktop

Mobile

[kellular]

Looks great! And just confirming - the tap target on desktop screen sizes will still include the "Drag file here or choose from folder" text right?

[charleyf]

Yep! That happened because I was using dev-tools on my desktop to view this and forgot to refresh the page. Here's what it looks like on my desktop right now

[kellular]

great, thanks for confirming! This LGTM