diff --git a/app/javascript/packages/document-capture/components/_file-input.scss b/app/javascript/packages/document-capture/components/_file-input.scss index 1b40bc4e61e..e1e6e31784e 100644 --- a/app/javascript/packages/document-capture/components/_file-input.scss +++ b/app/javascript/packages/document-capture/components/_file-input.scss @@ -17,6 +17,18 @@ border-width: 3px; } +usa-file-input:not( + .usa-file-input--has-value, + .usa-file-input--value-pending, + .usa-file-input--is-id-capture + ) + .usa-form-group--success + .usa-file-input + .usa-file-input__target { + height: 21rem; + width: 12rem; +} + .usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending) { .usa-file-input__target { border-color: color('primary'); @@ -75,7 +87,17 @@ width: 100%; } } - +.usa-file-input.usa-file-input--single-value:not(.usa-file-input--is-id-capture) { + .usa-file-input__preview { + width: 12rem; + } + .usa-file-input__target { + width: 12rem; + } + .usa-file-input__preview-image { + width: 12rem; + } +} .usa-file-input__input:not([disabled]):focus { outline: 3px solid color('primary'); outline-offset: 6px; diff --git a/app/javascript/packages/document-capture/components/documents-step.tsx b/app/javascript/packages/document-capture/components/documents-step.tsx index a46f033831c..8fbeafbc196 100644 --- a/app/javascript/packages/document-capture/components/documents-step.tsx +++ b/app/javascript/packages/document-capture/components/documents-step.tsx @@ -1,11 +1,10 @@ import { useContext } from 'react'; import { useI18n } from '@18f/identity-react-i18n'; import { FormStepComponentProps, FormStepsButton } from '@18f/identity-form-steps'; -import { PageHeading } from '@18f/identity-components'; import { Cancel } from '@18f/identity-verify-flow'; import HybridDocCaptureWarning from './hybrid-doc-capture-warning'; import TipList from './tip-list'; -import { DeviceContext, SelfieCaptureContext, UploadContext } from '../context'; +import { DeviceContext, UploadContext } from '../context'; import { ImageValue, DefaultSideProps, @@ -41,13 +40,7 @@ export function DocumentsCaptureStep({ export function DocumentCaptureSubheaderOne() { const { t } = useI18n(); - return ( -

-
- {'1. '} - {t('doc_auth.headings.document_capture_subheader_id')} -

- ); + return

{t('doc_auth.headings.document_capture')}

; } export default function DocumentsStep({ @@ -60,10 +53,6 @@ export default function DocumentsStep({ const { t } = useI18n(); const { isMobile } = useContext(DeviceContext); const { flowPath } = useContext(UploadContext); - const { isSelfieCaptureEnabled } = useContext(SelfieCaptureContext); - const pageHeaderText = isSelfieCaptureEnabled - ? t('doc_auth.headings.document_capture_with_selfie') - : t('doc_auth.headings.document_capture'); const defaultSideProps: DefaultSideProps = { registerField, onChange, @@ -73,7 +62,6 @@ export default function DocumentsStep({ return ( <> {flowPath === 'hybrid' && } - {pageHeaderText} ) { // they don't have a preview. This shows the name of the file in the upload // box (using the existing preview) when the file name ends with .yml const isYAMLFile: boolean = value instanceof window.File && value.name.endsWith('.yml'); + const isIdCapture: boolean = !(label === t('doc_auth.headings.document_capture_selfie')); /** * In response to a file input change event, confirms that the file is valid before calling @@ -387,6 +388,7 @@ function FileInput(props: FileInputProps, ref: ForwardedRef) { isDraggingOver && 'usa-file-input--drag', value && !isValuePending && 'usa-file-input--has-value', isValuePending && 'usa-file-input--value-pending', + isIdCapture && 'usa-file-input--is-id-capture', ] .filter(Boolean) .join(' ')} diff --git a/app/javascript/packages/document-capture/components/selfie-step.tsx b/app/javascript/packages/document-capture/components/selfie-step.tsx index 1acffbc28f5..20a930e1d96 100644 --- a/app/javascript/packages/document-capture/components/selfie-step.tsx +++ b/app/javascript/packages/document-capture/components/selfie-step.tsx @@ -5,7 +5,6 @@ import { FormStepsButton, FormStepsContext, } from '@18f/identity-form-steps'; -import { PageHeading } from '@18f/identity-components'; import { Cancel } from '@18f/identity-verify-flow'; import HybridDocCaptureWarning from './hybrid-doc-capture-warning'; import DocumentSideAcuantCapture from './document-side-acuant-capture'; @@ -29,8 +28,7 @@ export function SelfieCaptureStep({ const { t } = useI18n(); return ( <> -
-

2. {t('doc_auth.headings.document_capture_subheader_selfie')}

+

{t('doc_auth.headings.document_capture_subheader_selfie')}

{t('doc_auth.info.selfie_capture_content')}

{}, registerField = () => undefined, }: FormStepComponentProps) { - const { t } = useI18n(); const { isLastStep } = useContext(FormStepsContext); const { flowPath } = useContext(UploadContext); - const pageHeaderText = t('doc_auth.headings.document_capture_with_selfie'); const defaultSideProps: DefaultSideProps = { registerField, @@ -74,7 +70,6 @@ export default function SelfieStep({ return ( <> {flowPath === 'hybrid' && } - {pageHeaderText} { level: 2, }); const selfieHeader = getByRole('heading', { - name: '2. doc_auth.headings.document_capture_subheader_selfie', - level: 2, + name: 'doc_auth.headings.document_capture_subheader_selfie', + level: 1, }); expect(front).to.be.ok(); expect(back).to.be.ok();