error message on deposited documents

src/front/Components/DesignSystem/DepositDocument/classes.module.scss

@@ -1,4 +1,7 @@
-.root {
+.container {
+
+
+	.root {
 		padding: 24px;
 		background-color: var(--white);
 		border: 1px dashed #e7e7e7;
@@ -86,15 +89,16 @@
 		.text {
 			margin-bottom: 12px;
 		}
-}
+	}
 
-.modal-content {
+	.modal-content {
 		display: flex;
 		flex-direction: column;
 		gap: 16px;
-}
+	}
 
-.error-message {
+	.error-message {
 		color: var(--red-flash);
 		margin-top: 8px;
+	}
 }

src/front/Components/DesignSystem/DepositDocument/index.tsx

@@ -66,7 +66,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 
 	public override render(): JSX.Element {
 		return (
-			<>
+			<div className={classes["container"]}>
 				<div
 					className={classNames(
 						classes["root"],
@@ -158,8 +158,12 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						</div>
 					</Confirm>
 				</div>
-				{<div></div>}
-			</>
+				{this.props.document.document_status === EDocumentStatus.REFUSED && (
+					<Typography typo={ITypo.CAPTION_14} className={classes["error-message"]}>
+						Ce document n’est pas conforme. Veuillez le déposer à nouveau.
+					</Typography>
+				)}
+			</div>
 		);
 	}