🔨 design review

src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss

@@ -1,8 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	padding: var(--spacing-3) var(--spacing-15);
+	padding: var(--spacing-4) 142px;
-	max-width: 1156px;
 
 	display: flex;
 	flex-direction: column;

src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx

@@ -4,7 +4,7 @@ import Dropdown from "@Front/Components/DesignSystem/Dropdown";
 import { IOption } from "@Front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption";
 import Table from "@Front/Components/DesignSystem/Table";
 import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable";
-import Tag, { ETagColor } from "@Front/Components/DesignSystem/Tag";
+import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
@@ -19,6 +19,13 @@ import classes from "./classes.module.scss";
 
 type IProps = {};
 
+const tradDocumentStatus: Record<EDocumentStatus, string> = {
+	[EDocumentStatus.ASKED]: "DEMANDÉ",
+	[EDocumentStatus.DEPOSITED]: "À VALIDER",
+	[EDocumentStatus.VALIDATED]: "VALIDÉ",
+	[EDocumentStatus.REFUSED]: "REFUSÉ",
+};
+
 const header: readonly IHead[] = [
 	{
 		key: "remindedAt",
@@ -126,6 +133,7 @@ export default function DocumentsReminderHistory(props: IProps) {
 					options={customersOptions}
 					onSelectionChange={onSelectionChange}
 					selectedOption={customerOption ?? customersOptions?.[0]}
+					label="Client"
 				/>
 				<Table className={classes["table"]} header={header} rows={buildRows(reminders)} />
 			</div>
@@ -147,14 +155,14 @@ function buildRows(reminders: DocumentReminder[] | null): IRowProps[] {
 function getTag(status: EDocumentStatus) {
 	switch (status) {
 		case EDocumentStatus.ASKED:
-			return <Tag label={status} color={ETagColor.INFO} />;
+			return <Tag label={tradDocumentStatus[status]} color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} />;
 		case EDocumentStatus.DEPOSITED:
-			return <Tag label={status} color={ETagColor.WARNING} />;
+			return <Tag label={tradDocumentStatus[status]} color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} />;
 		case EDocumentStatus.VALIDATED:
-			return <Tag label={status} color={ETagColor.SUCCESS} />;
+			return <Tag label={tradDocumentStatus[status]} color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} />;
 		case EDocumentStatus.REFUSED:
-			return <Tag label={status} color={ETagColor.ERROR} />;
+			return <Tag label={tradDocumentStatus[status]} color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} />;
 		default:
-			return <Tag label={status} color={ETagColor.INFO} />;
+			return <Tag label={tradDocumentStatus[status]} color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} />;
 	}
 }

src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx

@@ -4,7 +4,7 @@ import { IOption } from "@Front/Components/DesignSystem/Form/SelectFieldOld";
 import Modal from "@Front/Components/DesignSystem/Modal";
 import Separator, { ESeperatorColor } from "@Front/Components/DesignSystem/Separator";
 import { ToasterService } from "@Front/Components/DesignSystem/Toaster";
-import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import Customer from "le-coffre-resources/dist/Customer";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import React, { useCallback, useMemo, useState } from "react";
@@ -79,7 +79,7 @@ export default function ReminderModal(props: IProps) {
 			firstButton={{ children: "Annuler", onClick: onClose }}
 			secondButton={{ children: "Relancer", onClick: onRemind }}>
 			<div className={classes["root"]}>
-				<Typography typo={ETypo.TEXT_MD_LIGHT}>
+				<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.TEXT_SECONDARY}>
 					Sélectionnez le(s) document(s) pour lequel vous souhaitez relancer le client.
 				</Typography>
 				<CheckBox

src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss

@@ -16,6 +16,7 @@ $mobile-breakpoint: 664px;
 		.tabs {
 			width: calc(100% - 210px);
 		}
+		border-bottom: 1px solid var(--color-neutral-500);
 	}
 
 	.content {

src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx

@@ -112,10 +112,7 @@ export default function ClientView(props: IProps) {
 								</Button>
 							</Link>
 						)}
-						<EmailReminder
+						<EmailReminder customer={customer} isAnchored={anchorStatus !== AnchorStatus.NOT_ANCHORED} />
-							customer={customer}
-							isAnchored={anchorStatus !== AnchorStatus.NOT_ANCHORED}
-						/>
 					</div>
 				</div>