refacto icon buttons component

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>

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}
+				leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
-				iconposition={"left"}
-				iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
 				variant={EButtonVariant.PRIMARY}
 				styleType={EButtonStyleType.TEXT}
 				onClick={this.handleClick}>

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}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>

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}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>

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}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>

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}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>

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}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
-									iconposition={"left"}
+
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>

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}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
-									iconposition={"left"}
+
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>

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}
+									leftIcon={<ChevronDownIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
-									iconposition={"left"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>

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
+								<Button leftIcon={<ChevronDownIcon />} variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
-									icon={ChevronIcon}
-									iconposition={"right"}
-									iconstyle={{ width: "22px", height: "22px" }}
-									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}>
 									Gestion des rôles
 								</Button>
 							</Link>

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}
+									rightIcon={<PlusIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
-									iconposition={"right"}
-									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
 									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.openModal}>

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>

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>

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>

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}>

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>