From 7d8653ae982c349eb3b9ceb39e746c20cf0e076d Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Mon, 16 Sep 2024 11:40:32 +0200
Subject: [PATCH] :hammer: design review

---
 .../classes.module.scss                       |  3 +--
 .../Folder/DocumentsReminderHistory/index.tsx | 20 +++++++++++++------
 .../EmailReminder/ReminderModal/index.tsx     |  4 ++--
 .../ClientView/classes.module.scss            |  1 +
 .../FolderInformation/ClientView/index.tsx    |  5 +----
 5 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss
index 9b949a1f..38c6566e 100644
--- a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss
+++ b/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);
-	max-width: 1156px;
+	padding: var(--spacing-4) 142px;
 
 	display: flex;
 	flex-direction: column;
diff --git a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx
index cc642b1d..47d7177d 100644
--- a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx
+++ b/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} />;
 	}
 }
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx
index 4da1f326..58ed5d47 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx
+++ b/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
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss
index 531ab7bc..c8c51b44 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss
+++ b/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 {
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
index 22b7effa..cddbb40e 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
@@ -112,10 +112,7 @@ export default function ClientView(props: IProps) {
 								</Button>
 							</Link>
 						)}
-						<EmailReminder
-							customer={customer}
-							isAnchored={anchorStatus !== AnchorStatus.NOT_ANCHORED}
-						/>
+						<EmailReminder customer={customer} isAnchored={anchorStatus !== AnchorStatus.NOT_ANCHORED} />
 					</div>
 				</div>