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();