From 848edfa12c29cdf9e9d073209d9a0491813e8da2 Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Fri, 19 Jul 2024 10:25:01 +0200
Subject: [PATCH] refacto icon buttons component

---
 src/front/Components/DesignSystem/UserFolder/index.tsx   | 2 +-
 src/front/Components/Elements/BackArrow/index.tsx        | 6 ++----
 .../DefaultCollaboratorDashboard/index.tsx               | 5 ++---
 .../LayoutTemplates/DefaultDeedTypeDashboard/index.tsx   | 5 ++---
 .../DefaultDocumentTypesDashboard/index.tsx              | 5 ++---
 .../LayoutTemplates/DefaultNotaryDashboard/index.tsx     | 5 ++---
 .../LayoutTemplates/DefaultOfficeDashboard/index.tsx     | 6 +++---
 .../LayoutTemplates/DefaultRoleDashboard/index.tsx       | 6 +++---
 .../LayoutTemplates/DefaultUserDashboard/index.tsx       | 5 ++---
 .../Collaborators/CollaboratorInformations/index.tsx     | 9 ++-------
 .../Components/Layouts/Folder/AskDocuments/index.tsx     | 6 ++----
 .../Folder/FolderInformation/ClientSection/index.tsx     | 4 ++--
 .../Layouts/Folder/FolderInformation/index.tsx           | 2 +-
 .../Layouts/FolderArchived/FolderInformation/index.tsx   | 5 ++++-
 src/front/Components/Layouts/Login/index.tsx             | 2 +-
 .../Layouts/Subscription/SubscriptionInvite/index.tsx    | 2 +-
 16 files changed, 32 insertions(+), 43 deletions(-)

diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx
index d1371e4a..56ac5055 100644
--- a/src/front/Components/DesignSystem/UserFolder/index.tsx
+++ b/src/front/Components/DesignSystem/UserFolder/index.tsx
@@ -138,7 +138,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 							{!this.props.isArchived && this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
 								<div className={classes["button-container"]}>
 									<Link href={redirectPath}>
-										<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
+										<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} rightIcon={<PlusIcon />}>
 											Demander des documents
 										</Button>
 									</Link>
diff --git a/src/front/Components/Elements/BackArrow/index.tsx b/src/front/Components/Elements/BackArrow/index.tsx
index d075a098..a5e892ec 100644
--- a/src/front/Components/Elements/BackArrow/index.tsx
+++ b/src/front/Components/Elements/BackArrow/index.tsx
@@ -1,4 +1,4 @@
-import ChevronIcon from "@Assets/Icons/chevron.svg";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
@@ -21,9 +21,7 @@ class BackArrowClass extends React.Component<IPropsClass, IState> {
 	public override render(): JSX.Element {
 		return (
 			<Button
-				icon={ChevronIcon}
-				iconposition={"left"}
-				iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+				leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
 				variant={EButtonVariant.PRIMARY}
 				styleType={EButtonStyleType.TEXT}
 				onClick={this.handleClick}>
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx
index 26cbc385..eb2952f2 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx
@@ -1,4 +1,5 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/Users/Users";
 import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
@@ -69,9 +70,7 @@ export default class DefaultCollaboratorDashboard extends React.Component<IProps
 						{this.props.mobileBackText && (
 							<div className={classes["back-arrow-mobile"]}>
 								<Button
-									icon={ChevronIcon}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx
index d7ebc0e8..216e5317 100644
--- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx
@@ -12,6 +12,7 @@ import React, { ReactNode } from "react";
 
 import classes from "./classes.module.scss";
 import DeedListContainer from "./DeedTypeListContainer";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
 type IProps = {
 	title: string;
@@ -68,9 +69,7 @@ export default class DefaultDeedTypesDashboard extends React.Component<IProps, I
 						{this.props.mobileBackText && (
 							<div className={classes["back-arrow-mobile"]}>
 								<Button
-									icon={ChevronIcon}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx
index c5b976a5..36a74f84 100644
--- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx
@@ -13,6 +13,7 @@ import React, { ReactNode } from "react";
 
 import classes from "./classes.module.scss";
 import DocumentTypeListContainer from "./DocumentTypeListContainer";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
 type IProps = {
 	title: string;
@@ -69,9 +70,7 @@ export default class DefaultDocumentTypesDashboard extends React.Component<IProp
 						{this.props.mobileBackText && (
 							<div className={classes["back-arrow-mobile"]}>
 								<Button
-									icon={ChevronIcon}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
index c8a0fee7..c04c86a3 100644
--- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
@@ -14,6 +14,7 @@ import Image from "next/image";
 import React, { ReactNode } from "react";
 
 import classes from "./classes.module.scss";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
 type IProps = {
 	title: string;
@@ -85,9 +86,7 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 						{this.props.mobileBackText && (
 							<div className={classes["back-arrow-mobile"]}>
 								<Button
-									icon={ChevronIcon}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx
index 3344e843..2b53bab4 100644
--- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx
@@ -12,6 +12,7 @@ import React, { ReactNode } from "react";
 
 import classes from "./classes.module.scss";
 import OfficeListContainer from "./OfficeListContainer";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
 type IProps = {
 	title: string;
@@ -66,9 +67,8 @@ export default class DefaultOfficeDashboard extends React.Component<IProps, ISta
 						{this.props.mobileBackText && (
 							<div className={classes["back-arrow-mobile"]}>
 								<Button
-									icon={ChevronIcon}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
+
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx
index 55183c54..8fc741f6 100644
--- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx
@@ -12,6 +12,7 @@ import React, { ReactNode } from "react";
 
 import classes from "./classes.module.scss";
 import RoleListContainer from "./RoleListContainer";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
 type IProps = {
 	title: string;
@@ -66,9 +67,8 @@ export default class DefaultRoleDashboard extends React.Component<IProps, IState
 						{this.props.mobileBackText && (
 							<div className={classes["back-arrow-mobile"]}>
 								<Button
-									icon={ChevronIcon}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
+
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx
index bf3f4509..5d0b9bdc 100644
--- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx
@@ -1,4 +1,5 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
 import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
@@ -66,9 +67,7 @@ export default class DefaultUserDashboard extends React.Component<IProps, IState
 						{this.props.mobileBackText && (
 							<div className={classes["back-arrow-mobile"]}>
 								<Button
-									icon={ChevronIcon}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
index d626b94a..ae9ea131 100644
--- a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
+++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
@@ -1,4 +1,4 @@
-import ChevronIcon from "@Assets/Icons/chevron.svg";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
 import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
 import Users from "@Front/Api/LeCoffreApi/Admin/Users/Users";
@@ -193,12 +193,7 @@ export default function CollaboratorInformations(props: IProps) {
 						<Typography typo={ETypo.TEXT_LG_SEMIBOLD}>Modifier le rôle</Typography>
 						<div className={classes["gestion-role"]}>
 							<Link href={Module.getInstance().get().modules.pages.Roles.props.path}>
-								<Button
-									icon={ChevronIcon}
-									iconposition={"right"}
-									iconstyle={{ width: "22px", height: "22px" }}
-									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}>
+								<Button leftIcon={<ChevronDownIcon />} variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
 									Gestion des rôles
 								</Button>
 							</Link>
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
index 1261b148..b477af69 100644
--- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
@@ -1,4 +1,4 @@
-import PlusIcon from "@Assets/Icons/plus.svg";
+import { PlusIcon } from "@heroicons/react/24/outline";
 import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
@@ -75,9 +75,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 							</div>
 							<div className={classes["add-document-container"]}>
 								<Button
-									icon={PlusIcon}
-									iconposition={"right"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+									rightIcon={<PlusIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.openModal}>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
index a70ab2d2..f9727d63 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
@@ -41,7 +41,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 						<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
 						{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
 							<Link href={navigatePath}>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} rightIcon={<PlusIcon />}>
 									Ajouter un client
 								</Button>
 							</Link>
@@ -56,7 +56,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 						</div>
 						{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
 							<Link href={navigatePath}>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} rightIcon={<PlusIcon />}>
 									Ajouter un client
 								</Button>
 							</Link>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
index d681a3a1..26ff7502 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
@@ -96,7 +96,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 											<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
 										</div>
 										<Link href={redirectPathEditCollaborators}>
-											<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
+											<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} rightIcon={<ChevronIcon/>}>
 												Modifier les collaborateurs
 											</Button>
 										</Link>
diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
index 216d4f0f..34cf5284 100644
--- a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
@@ -66,7 +66,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 											<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
 										</div>
 										<Link href={redirectPathEditCollaborators}>
-											<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
+											<Button
+												variant={EButtonVariant.PRIMARY}
+												styleType={EButtonStyleType.TEXT}
+												rightIcon={<ChevronIcon />}>
 												Modifier les collaborateurs
 											</Button>
 										</Link>
diff --git a/src/front/Components/Layouts/Login/index.tsx b/src/front/Components/Layouts/Login/index.tsx
index a9083683..dfc30001 100644
--- a/src/front/Components/Layouts/Login/index.tsx
+++ b/src/front/Components/Layouts/Login/index.tsx
@@ -58,7 +58,7 @@ export default function Login() {
 				<Typography typo={ETypo.DISPLAY_LARGE}>
 					<div className={classes["title"]}>Connexion espace professionnel</div>
 				</Typography>
-				<Button onClick={redirectUserOnConnection} icon={idNoteLogo} iconposition={"left"}>
+				<Button onClick={redirectUserOnConnection} leftIcon={<Image alt="id-not-logo" src={idNoteLogo} />} >
 					S'identifier avec ID.not
 				</Button>
 				<Typography typo={ETypo.TEXT_LG_REGULAR}>
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
index a780136d..a8187883 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
@@ -112,7 +112,7 @@ export default function SubscriptionInvite() {
 									onClick={addLine}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
-									icon={PlusIcon}>
+									rightIcon={<PlusIcon />}>
 									Ajouter une adresse email
 								</Button>
 							</div>