diff --git a/src/id-verification/IdVerification.messages.js b/src/id-verification/IdVerification.messages.js index 41e703e..6401ef2 100644 --- a/src/id-verification/IdVerification.messages.js +++ b/src/id-verification/IdVerification.messages.js @@ -6,6 +6,11 @@ const messages = defineMessages({ defaultMessage: 'Next', description: 'Next button.', }, + 'id.verification.example.card.alt': { + id: 'id.verification.example.card.alt', + defaultMessage: 'Example of a valid identification card with a full name and photo.', + description: 'Alt text for an example identification card.' + }, 'id.verification.requirements.title': { id: 'id.verification.requirements.title', defaultMessage: 'Photo Verification Requirements', @@ -33,7 +38,7 @@ const messages = defineMessages({ }, 'id.verification.requirements.card.id.text': { id: 'id.verification.requirements.card.id.text', - defaultMessage: 'You need a valid ID that contains your full name and photo.', + defaultMessage: 'You need a valid identification card that contains your full name and photo.', description: 'Text that explains that the user needs a photo ID.', }, 'id.verification.privacy.title': { @@ -433,7 +438,7 @@ const messages = defineMessages({ }, 'id.verification.id.tips.description': { id: 'id.verification.id.tips.description', - defaultMessage: 'Next, we\'ll need you to take a photo of a valid ID that includes your name. Please have your ID ready.', + defaultMessage: 'Next, we\'ll need you to take a photo of a valid identification card that includes your full name and photo. Please have your ID ready.', description: 'Description for the ID Tips page.', }, 'id.verification.id.tips.list.well.lit': { diff --git a/src/id-verification/_id-verification.scss b/src/id-verification/_id-verification.scss index d2f858b..da07cf0 100644 --- a/src/id-verification/_id-verification.scss +++ b/src/id-verification/_id-verification.scss @@ -1,5 +1,8 @@ .page__id-verification { .verification-panel { + img { + max-width: 100%; + } .card.accent { border-top: solid 4px theme-color('warning'); } @@ -8,7 +11,6 @@ max-width: 20rem; img { display: block; - max-width: 100%; max-height: 10rem; } } diff --git a/src/id-verification/assets/example-card.png b/src/id-verification/assets/example-card.png new file mode 100644 index 0000000..ba64175 Binary files /dev/null and b/src/id-verification/assets/example-card.png differ diff --git a/src/id-verification/panels/IdContextPanel.jsx b/src/id-verification/panels/IdContextPanel.jsx index 44025bb..610017a 100644 --- a/src/id-verification/panels/IdContextPanel.jsx +++ b/src/id-verification/panels/IdContextPanel.jsx @@ -6,6 +6,7 @@ import { useNextPanelSlug } from '../routing-utilities'; import BasePanel from './BasePanel'; import CameraHelp from '../CameraHelp'; import messages from '../IdVerification.messages'; +import exampleCard from '../assets/example-card.png'; function IdContextPanel(props) { const panelSlug = 'id-context'; @@ -24,7 +25,7 @@ function IdContextPanel(props) {

{props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}

-