Merge branch 'dev' of github.com:smart-chain-fr/leCoffre-front into dev

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

@@ -4,7 +4,7 @@ import React, { CSSProperties } from "react";
 import classes from "./classes.module.scss";
 import classNames from "classnames";
 
-export enum EButtonColor {
+export enum EButtonVariant {
 	PRIMARY = "primary",
 	SECONDARY = "secondary",
 	NEUTRAL = "neutral",
@@ -29,7 +29,7 @@ export enum EButtonStyleType {
 type IProps = {
 	onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 	children?: React.ReactNode;
-	variant?: EButtonColor;
+	variant?: EButtonVariant;
 	size?: EButtonSize;
 	styleType?: EButtonStyleType;
 	fullwidth?: boolean;
@@ -44,7 +44,7 @@ type IProps = {
 
 export default function Button(props: IProps) {
 	let {
-		variant = EButtonColor.PRIMARY,
+		variant = EButtonVariant.PRIMARY,
 		size = EButtonSize.LG,
 		styleType = EButtonStyleType.CONTAINED,
 		disabled = false,

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

@@ -5,7 +5,7 @@ import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
 import Image from "next/image";
 import React from "react";
 
-import Button, { EButtonStyleType, EButtonColor } from "../Button";
+import Button, { EButtonStyleType, EButtonVariant } from "../Button";
 import Tooltip from "../ToolTip";
 import Typography, { ETypo, ETypoColor } from "../Typography";
 import classes from "./classes.module.scss";
@@ -191,7 +191,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
 						<div className={classes["bottom-container"]}>
 							<Button
-								variant={EButtonColor.PRIMARY}
+								variant={EButtonVariant.PRIMARY}
 								styleType={EButtonStyleType.TEXT}
 								className={classes["add-button"]}
 								onClick={this.addDocument}>
@@ -295,7 +295,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						Document non conforme
 						{history.refused_reason && history.refused_reason.length > 0 && (
 							<Button
-								variant={EButtonColor.PRIMARY}
+								variant={EButtonVariant.PRIMARY}
 								styleType={EButtonStyleType.TEXT}
 								className={classes["refused-button"]}
 								onClick={() => this.showRefusedReason(history.refused_reason ?? "")}>

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

@@ -12,7 +12,7 @@ import { Document } from "le-coffre-resources/dist/Customer";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import classNames from "classnames";
 
-import Button, { EButtonStyleType, EButtonColor } from "../Button";
+import Button, { EButtonStyleType, EButtonVariant } from "../Button";
 import Confirm from "../Modal/Confirm";
 import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
 import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
@@ -155,7 +155,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 								)}
 								<div className={classes["bottom-container"]}>
 									<Button
-										variant={EButtonColor.PRIMARY}
+										variant={EButtonVariant.PRIMARY}
 										styleType={EButtonStyleType.TEXT}
 										className={classes["add-button"]}
 										onClick={this.addDocument}>

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

@@ -6,7 +6,7 @@ import CrossIcon from "@Assets/Icons/cross.svg";
 import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
 import Image from "next/image";
 
-import Button, { EButtonStyleType, EButtonColor } from "../Button";
+import Button, { EButtonStyleType, EButtonVariant } from "../Button";
 import Typography, { ETypo, ETypoColor } from "../Typography";
 
 type IProps = {
@@ -161,7 +161,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
 
 					<div className={classes["bottom-container"]}>
 						<Button
-							variant={EButtonColor.PRIMARY}
+							variant={EButtonVariant.PRIMARY}
 							styleType={EButtonStyleType.TEXT}
 							className={classes["add-button"]}
 							onClick={() => this.fileInput!.click()}>

src/front/Components/DesignSystem/Modal/Alert/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Modal, { IProps as IPropsModal } from "..";
-import Button, { EButtonColor } from "../../Button";
+import Button, { EButtonVariant } from "../../Button";
 import classes from "./classes.module.scss";
 
 type IProps = IPropsModal & {
@@ -40,7 +40,7 @@ export default class Alert extends React.Component<IProps, IState> {
 	private footer(): JSX.Element {
 		return (
 			<div className={classes["button-container"]}>
-				<Button variant={EButtonColor.SECONDARY} onClick={this.onClose}>
+				<Button variant={EButtonVariant.SECONDARY} onClick={this.onClose}>
 					{this.props.closeText}
 				</Button>
 			</div>

src/front/Components/DesignSystem/Modal/Confirm/index.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import React from "react";
 
 import Modal, { IProps as IPropsModal } from "..";
-import Button, { EButtonStyleType, EButtonColor } from "../../Button";
+import Button, { EButtonStyleType, EButtonVariant } from "../../Button";
 import classes from "./classes.module.scss";
 
 type IProps = IPropsModal & {
@@ -47,14 +47,14 @@ export default class Confirm extends React.Component<IProps, IState> {
 				{this.props.showCancelButton &&
 					(this.props.cancelPath ? (
 						<Link href={this.props.cancelPath} className={classes["sub-container"]}>
-							<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.props.onClose}>
+							<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.props.onClose}>
 								{this.props.cancelText}
 							</Button>
 						</Link>
 					) : (
 						<div className={classes["sub-container"]}>
 							<Button
-								variant={EButtonColor.PRIMARY}
+								variant={EButtonVariant.PRIMARY}
 								styleType={EButtonStyleType.OUTLINED}
 								onClick={this.props.onClose}
 								className={classes["sub-container"]}>
@@ -63,7 +63,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 						</div>
 					))}
 				<div className={classes["sub-container"]}>
-					<Button variant={EButtonColor.PRIMARY} onClick={this.props.onAccept} disabled={!this.props.canConfirm} fullwidth>
+					<Button variant={EButtonVariant.PRIMARY} onClick={this.props.onAccept} disabled={!this.props.canConfirm} fullwidth>
 						{this.props.confirmText}
 					</Button>
 				</div>

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

@@ -1,7 +1,7 @@
 import React from "react";
 import classes from "./classes.module.scss";
 import TextField from "../Form/TextField";
-import Button, { EButtonColor } from "../Button";
+import Button, { EButtonVariant } from "../Button";
 import Typography, { ETypo, ETypoColor } from "../Typography";
 import Mailchimp from "@Front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp";
 import Form from "../Form";
@@ -96,7 +96,7 @@ export default class Newsletter extends React.Component<IProps, IState> {
 								<Form onSubmit={this.handleSubmit} className={classes["form"]}>
 									<TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} />
 									<div className={classes["buttons-container"]}>
-										<Button fullwidth type="submit" variant={EButtonColor.PRIMARY}>
+										<Button fullwidth type="submit" variant={EButtonVariant.PRIMARY}>
 											Envoyer
 										</Button>
 									</div>

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

@@ -9,6 +9,7 @@ type IProps = {
 	className?: string;
 	title?: string;
 	type?: "div" | "span";
+	onClick?: () => void;
 };
 
 export enum ETypo {
@@ -143,7 +144,7 @@ export enum ETypoColor {
 }
 
 export default function Typography(props: IProps) {
-	const { typo, color, className, title, children, type = "div" } = props;
+	const { typo, color, className, title, children, type = "div", onClick } = props;
 
 	const style = color ? ({ "--data-color": `var(${color})` } as React.CSSProperties) : undefined;
 
@@ -156,7 +157,7 @@ export default function Typography(props: IProps) {
 	}
 
 	return (
-		<div className={classNames(classes["root"], classes[typo], className)} style={style} title={title}>
+		<div className={classNames(classes["root"], classes[typo], className)} style={style} title={title} onClick={onClick}>
 			{children}
 		</div>
 	);

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

@@ -10,7 +10,7 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
-import Button, { EButtonStyleType, EButtonColor } from "../Button";
+import Button, { EButtonStyleType, EButtonVariant } from "../Button";
 import Confirm from "../Modal/Confirm";
 import QuantityProgressBar from "../QuantityProgressBar";
 import classes from "./classes.module.scss";
@@ -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={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
+										<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
 											Demander des documents
 										</Button>
 									</Link>

src/front/Components/Elements/BackArrow/index.tsx

@@ -1,5 +1,5 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
 
@@ -24,7 +24,7 @@ class BackArrowClass extends React.Component<IPropsClass, IState> {
 				icon={ChevronIcon}
 				iconposition={"left"}
 				iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-				variant={EButtonColor.PRIMARY}
+				variant={EButtonVariant.PRIMARY}
 				styleType={EButtonStyleType.TEXT}
 				onClick={this.handleClick}>
 				Retour

src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss

@@ -0,0 +1,16 @@
+.root {
+	padding: 8px 16px;
+	font-size: 16px;
+	letter-spacing: 0.08px;
+
+	border-bottom: 1px solid var(--color-neutral-500);
+	cursor: pointer;
+
+	&[data-is-selected="true"] {
+		border-bottom: 2px solid var(--color-neutral-950, #24282e);
+	}
+
+	&:hover {
+		border-bottom: 2px solid var(--color-neutral-950, #24282e);
+	}
+}

src/front/Components/Elements/Tabs/HorizontalTab/index.tsx

@@ -0,0 +1,34 @@
+import { useCallback } from "react";
+import classes from "./classes.module.scss";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import useHoverable from "@Front/Hooks/useHoverable";
+import { ITabValue } from "..";
+export type ITab = {
+	label: React.ReactNode;
+};
+
+export type IProps<T> = {
+	onSelect: (value: ITabValue<T>) => void;
+	value: ITabValue<T>;
+	isSelected: boolean;
+} & ITab;
+
+export default function HorizontalTabs<T>(props: IProps<T>) {
+	const onClick = useCallback(() => props.onSelect(props.value), [props]);
+
+	const { isHovered, handleMouseEnter, handleMouseLeave } = useHoverable();
+	return (
+		<div
+			className={classes["root"]}
+			onClick={onClick}
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
+			data-is-selected={props.isSelected}>
+			<Typography
+				typo={ETypo.TEXT_MD_SEMIBOLD}
+				color={isHovered || props.isSelected ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_700}>
+				{props.label}
+			</Typography>
+		</div>
+	);
+}

src/front/Components/Elements/Tabs/VerticalTabs/classes.module.scss

@@ -0,0 +1,6 @@
+.root {
+	padding: 8px 16px;
+	font-size: 16px;
+	letter-spacing: 0.08px;
+	cursor: pointer;
+}

src/front/Components/Elements/Tabs/VerticalTabs/index.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import classes from "./classes.module.scss";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import { ITabValue } from "..";
+export type ITab = {
+	label: React.ReactNode;
+};
+
+export type IProps<T> = {
+	onSelect: (value: ITabValue<T>) => void;
+	value: ITabValue<T>;
+	isSelected: boolean;
+} & ITab;
+
+export default function VerticalTabs<T>(props: IProps<T>) {
+	const onClick = useCallback(() => props.onSelect(props.value), [props]);
+	return (
+		<div className={classes["root"]} onClick={onClick}>
+			<Typography typo={ETypo.TEXT_LG_REGULAR} color={props.isSelected ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_700}>
+				{props.label}
+			</Typography>
+		</div>
+	);
+}

src/front/Components/Elements/Tabs/classes.module.scss

@@ -0,0 +1,49 @@
+.root {
+	.hidden-tester {
+		display: flex;
+		overflow: hidden;
+		background: red;
+		height: 0px;
+	}
+	.horizontal-container {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+		.horizontal-tab {
+			display: flex;
+			justify-content: space-evenly;
+			overflow: hidden;
+		}
+	}
+
+	.show-more-container {
+		position: relative;
+		border-bottom: 1px solid var(--color-neutral-500);
+		.show-more {
+			padding: 8px 16px;
+			display: flex;
+			color: white;
+			font-size: 16px;
+			justify-content: center;
+			align-items: center;
+			color: white;
+			cursor: pointer;
+		}
+
+		.vertical-container {
+			position: absolute;
+			display: flex;
+			flex-direction: column;
+			top: 50px;
+			padding: var(--spacing-05, 4px) var(--spacing-2, 16px);
+			background: var(--color-generic-white, #fff);
+
+			border: 1px solid var(--menu-border, #d7dce0);
+			border-radius: var(--menu-radius, 0px);
+			box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
+			&[data-visible="false"] {
+				display: none;
+			}
+		}
+	}
+}

src/front/Components/Elements/Tabs/index.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import classes from "./classes.module.scss";
+import HorizontalTab, { ITab } from "./HorizontalTab";
+import VerticalTabs from "./VerticalTabs";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import { useDebounce, useWindowSize } from "@uidotdev/usehooks";
+import useOpenable from "@Front/Hooks/useOpenable";
+
+export type ITabValue<T> = T & {
+	id: unknown;
+};
+
+type ITabInternal<T> = ITab & {
+	key?: string;
+	value: ITabValue<T>;
+};
+
+type IProps<T> = {
+	tabs: ITabInternal<T>[];
+	onSelect: (value: T) => void;
+};
+
+export default function Tabs<T>(props: IProps<T>) {
+	const { onSelect } = props;
+	const rootRef = useRef<HTMLDivElement>(null);
+	const [visibleElements, setVisibleElements] = useState<ITabInternal<T>[]>([]);
+	const [overflowedElements, setOverflowedElements] = useState<ITabInternal<T>[]>([]);
+
+	const [selectedTab, setSelectedTab] = useState<ITabValue<T>>(props.tabs[0]!.value);
+
+	const { close, isOpen, toggle } = useOpenable();
+
+	const windowSize = useWindowSize();
+	const windowSizeDebounced = useDebounce(windowSize, 100);
+
+	const calculateVisibleElements = useCallback(() => {
+		const container = rootRef.current;
+		if (!container) return;
+
+		const containerWidth = container.offsetWidth;
+		let totalWidth = 115;
+		let visibleCount = 0;
+
+		const children = Array.from(container.children) as HTMLDivElement[];
+		for (let i = 0; i < children.length; i++) {
+			totalWidth += children[i]!.offsetWidth;
+			if (totalWidth > containerWidth) {
+				break;
+			}
+			visibleCount++;
+		}
+
+		setVisibleElements(props.tabs.slice(0, visibleCount));
+		setOverflowedElements(props.tabs.slice(visibleCount));
+	}, [props.tabs]);
+
+	useEffect(() => {
+		calculateVisibleElements();
+	}, [calculateVisibleElements, windowSizeDebounced]);
+
+	const handleSelect = useCallback(
+		(value: ITabValue<T>) => {
+			setSelectedTab(value);
+			onSelect(value);
+			close();
+		},
+		[close, onSelect],
+	);
+
+	return (
+		<div className={classes["root"]}>
+			<div className={classes["hidden-tester"]} ref={rootRef}>
+				{props.tabs.map((element, index) => (
+					<HorizontalTab<T>
+						label={element.label}
+						key={element.key ?? index}
+						value={element.value}
+						onSelect={handleSelect}
+						isSelected={element.value.id === selectedTab.id}
+					/>
+				))}
+			</div>
+			<div className={classes["horizontal-container"]}>
+				<div className={classes["horizontal-tab"]}>
+					{visibleElements.map((element, index) => (
+						<HorizontalTab<T>
+							label={element.label}
+							key={element.key ?? index}
+							value={element.value}
+							onSelect={handleSelect}
+							isSelected={element.value.id === selectedTab.id}
+						/>
+					))}
+				</div>
+				{overflowedElements.length > 0 && (
+					<div className={classes["show-more-container"]}>
+						<div className={classes["show-more"]} onClick={toggle}>
+							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
+								{overflowedElements.length}&nbsp;de&nbsp;plus...
+							</Typography>
+						</div>
+						<div className={classes["vertical-container"]} data-visible={isOpen}>
+							{overflowedElements.length > 0 &&
+								overflowedElements.map((element, index) => (
+									<VerticalTabs<T>
+										label={element.label}
+										key={element.key ?? index}
+										value={element.value}
+										onSelect={handleSelect}
+										isSelected={selectedTab === element.value}
+									/>
+								))}
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/Users/Users";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -72,7 +72,7 @@ export default class DefaultCollaboratorDashboard extends React.Component<IProps
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}

src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import DeedTypes, { IGetDeedTypesParams } from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -71,7 +71,7 @@ export default class DefaultDeedTypesDashboard extends React.Component<IProps, I
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}

src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -72,7 +72,7 @@ export default class DefaultDocumentTypesDashboard extends React.Component<IProp
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}

src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
 import FolderArchivedListContainer from "@Front/Components/DesignSystem/FolderArchivedListContainer";
 import Header from "@Front/Components/DesignSystem/Header";
@@ -88,7 +88,7 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}

src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -69,7 +69,7 @@ export default class DefaultOfficeDashboard extends React.Component<IProps, ISta
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}

src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import OfficeRoles, { IGetRolesParams } from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -69,7 +69,7 @@ export default class DefaultRoleDashboard extends React.Component<IProps, IState
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}

src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -69,7 +69,7 @@ export default class DefaultUserDashboard extends React.Component<IProps, IState
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}

src/front/Components/Layouts/ClientDashboard/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
@@ -224,7 +224,7 @@ export default function ClientDashboard(props: IProps) {
 						Vous souhaitez envoyer d'autres documents à votre notaire ?
 					</Typography>
 					<Button
-						variant={EButtonColor.PRIMARY}
+						variant={EButtonVariant.PRIMARY}
 						styleType={EButtonStyleType.OUTLINED}
 						className={classes["button"]}
 						onClick={onOpenModalAddDocument}>

src/front/Components/Layouts/ClientDashboard/index2.tsx

@@ -1,5 +1,5 @@
 //import Customers from "@Front/Api/LeCoffreApi/Customer/Customers/Customers";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@@ -46,7 +46,7 @@ export default class ClientDashboard extends Base<IProps, IState> {
 							Vous souhaitez envoyer d'autres documents à votre notaire ?
 						</Typography>
 						<Button
-							variant={EButtonColor.PRIMARY}
+							variant={EButtonVariant.PRIMARY}
 							styleType={EButtonStyleType.OUTLINED}
 							className={classes["button"]}
 							onClick={this.onOpenModalAddDocument}>

src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx

@@ -2,7 +2,7 @@ import ChevronIcon from "@Assets/Icons/chevron.svg";
 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";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Switch from "@Front/Components/DesignSystem/Switch";
@@ -197,7 +197,7 @@ export default function CollaboratorInformations(props: IProps) {
 									icon={ChevronIcon}
 									iconposition={"right"}
 									iconstyle={{ width: "22px", height: "22px" }}
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}>
 									Gestion des rôles
 								</Button>

src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx

@@ -1,5 +1,5 @@
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -101,7 +101,7 @@ export default function DeedTypesCreate(props: IProps) {
 						validationError={validationError.find((error) => error.property === "description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
 							Annuler
 						</Button>
 						<Button type="submit">Créer le type d'acte</Button>

src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx

@@ -1,5 +1,5 @@
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -119,7 +119,7 @@ export default function DeedTypesEdit() {
 						validationError={validationError.find((error) => error.property === "description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
 							Annuler
 						</Button>
 						<Button type="submit">Enregistrer</Button>

src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx

@@ -2,7 +2,7 @@ import ChevronIcon from "@Assets/Icons/chevron.svg";
 import PenICon from "@Assets/Icons/pen.svg";
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
 import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTypes";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@@ -123,7 +123,7 @@ export default function DeedTypesInformations(props: IProps) {
 				<div className={classes["header"]}>
 					<Typography typo={ETypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 					<Link href={Module.getInstance().get().modules.pages.DocumentTypes.props.path}>
-						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
 							Modifier la liste des documents
 							<Image src={ChevronIcon} alt="Chevron" />
 						</Button>
@@ -174,7 +174,7 @@ export default function DeedTypesInformations(props: IProps) {
 					</Form>
 				</div>
 				<div className={classes["delete-container"]}>
-					<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={openDeleteModal}>
+					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={openDeleteModal}>
 						Supprimer
 					</Button>
 				</div>

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

@@ -1,4 +1,4 @@
-import Button, { EButtonSize, EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonSize, EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
 import Newsletter from "@Front/Components/DesignSystem/Newsletter";
 import Table from "@Front/Components/DesignSystem/Table";
@@ -7,13 +7,58 @@ import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 
 import classes from "./classes.module.scss";
+import Tabs from "@Front/Components/Elements/Tabs";
+import { useCallback, useState } from "react";
 
 export default function DesignSystem() {
+	const userDb = [
+		{
+			username: "Maxime",
+			id: 1,
+		},
+		{
+			username: "Vincent",
+			id: 2,
+		},
+		{
+			username: "Massi",
+			id: 3,
+		},
+		{
+			username: "Maxime",
+			id: 4,
+		},
+		{
+			username: "Arnaud",
+			id: 5,
+		},
+	];
+
+	const [selectedTab, setSelectedTab] = useState<(typeof userDb)[number]>(userDb[0]!);
+
+	const onSelect = useCallback((value: (typeof userDb)[number]) => {
+		setSelectedTab(value);
+	}, []);
+
 	return (
 		<DefaultTemplate title={"DesignSystem"}>
-			<Newsletter isOpen />
-			<div className={classes["root"]}>
 			<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
+			<Newsletter isOpen />
+			<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
+			<Tabs<(typeof userDb)[number]>
+				tabs={userDb.map((user) => ({
+					label: user.username,
+					key: user.id.toString(),
+					value: user,
+				}))}
+				onSelect={onSelect}
+			/>
+			<div className={classes["tab-content"]}>
+				<Typography typo={ETypo.TEXT_MD_REGULAR}>
+					{selectedTab.id} - {selectedTab.username}
+				</Typography>
+			</div>
+			<div className={classes["root"]}>
 				<div className={classes["components"]}>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
 					<div className={classes["rows"]}>
@@ -61,7 +106,7 @@ export default function DesignSystem() {
 								name: "Doe",
 								firstname: "John",
 								button: (
-									<Button size={EButtonSize.SM} variant={EButtonColor.PRIMARY}>
+									<Button size={EButtonSize.SM} variant={EButtonVariant.PRIMARY}>
 										Send email
 									</Button>
 								),
@@ -83,65 +128,65 @@ export default function DesignSystem() {
 
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonColor.PRIMARY}>PRIMARY</Button>
+						<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
-						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
-							PRIMARY
+							Primary
 						</Button>
-						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
-							PRIMARY
+							Primary
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonColor.SECONDARY}>SECONDARY</Button>
+						<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
-						<Button variant={EButtonColor.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
-							SECONDARY
+							Secondary
 						</Button>
-						<Button variant={EButtonColor.SECONDARY} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
-							SECONDARY
+							Secondary
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonColor.NEUTRAL}>NEUTRAL</Button>
+						<Button variant={EButtonVariant.NEUTRAL}>Neutral</Button>
-						<Button variant={EButtonColor.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
-							NEUTRAL
+							Neutral
 						</Button>
-						<Button variant={EButtonColor.NEUTRAL} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
-							NEUTRAL
+							Neutral
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonColor.ERROR}>ERROR</Button>
+						<Button variant={EButtonVariant.ERROR}>Error</Button>
-						<Button variant={EButtonColor.ERROR} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
-							ERROR
+							Error
 						</Button>
-						<Button variant={EButtonColor.ERROR} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
-							ERROR
+							Error
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonColor.WARNING}>WARNING</Button>
+						<Button variant={EButtonVariant.WARNING}>Warning</Button>
-						<Button variant={EButtonColor.WARNING} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
-							WARNING
+							Warning
 						</Button>
-						<Button variant={EButtonColor.WARNING} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
-							WARNING
+							Warning
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonColor.SUCCESS}>SUCCESS</Button>
+						<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
-						<Button variant={EButtonColor.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
 							SUCCESS
 						</Button>
-						<Button variant={EButtonColor.SUCCESS} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
 							SUCCESS
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonColor.INFO}>INFO</Button>
+						<Button variant={EButtonVariant.INFO}>INFO</Button>
-						<Button variant={EButtonColor.INFO} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
 							INFO
 						</Button>
-						<Button variant={EButtonColor.INFO} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
 							INFO
 						</Button>
 					</div>

src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx

@@ -1,5 +1,5 @@
 import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -71,7 +71,7 @@ export default function DocumentTypesCreate(props: IProps) {
 						validationError={validationError.find((error) => error.property === "public_description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 							Annuler
 						</Button>
 						<Button type="submit">Créer le document</Button>

src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx

@@ -1,5 +1,5 @@
 import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -91,7 +91,7 @@ export default function DocumentTypesEdit() {
 						validationError={validationError.find((error) => error.property === "public_description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 							Annuler
 						</Button>
 						<Button type="submit">Enregistrer</Button>

src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx

@@ -11,7 +11,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 
 export default function DocumentTypesInformations() {
 	const router = useRouter();
@@ -38,7 +38,7 @@ export default function DocumentTypesInformations() {
 				<div className={classes["header"]}>
 					<Typography typo={ETypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 					<Link href={Module.getInstance().get().modules.pages.DeedTypes.props.path}>
-						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
 							Retour au paramétrage des types d'actes
 							<Image src={ChevronIcon} alt="Chevron" />
 						</Button>

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

@@ -1,6 +1,6 @@
 import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
@@ -99,7 +99,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 										/>
 										<div className={classes["button-container"]}>
 											<Link href={backwardPath} className={classes["cancel-button"]}>
-												<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+												<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 													Annuler
 												</Button>
 											</Link>
@@ -134,7 +134,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 										/>
 										<div className={classes["button-container"]}>
 											<Link href={backwardPath} className={classes["cancel-button"]}>
-												<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+												<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 													Annuler
 												</Button>
 											</Link>

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

@@ -1,7 +1,7 @@
 import PlusIcon from "@Assets/Icons/plus.svg";
 import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
@@ -78,7 +78,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 									icon={PlusIcon}
 									iconposition={"right"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									onClick={this.openModal}>
 									Ajouter un document
@@ -86,7 +86,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 							</div>
 							<div className={classes["buttons-container"]}>
 								<a href={backUrl}>
-									<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.cancel}>
+									<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.cancel}>
 										Annuler
 									</Button>
 								</a>

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

@@ -1,4 +1,4 @@
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
@@ -63,7 +63,7 @@ class CreateCustomerNoteClass extends BasePage<IPropsClass, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={this.backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 									Annuler
 								</Button>
 							</Link>

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

@@ -1,5 +1,5 @@
 import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@@ -130,13 +130,13 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 						<div className={classes["button-container"]}>
 							{!this.doesInputsHaveValues() ? (
 								<Link href={this.backwardPath} className={classes["cancel-button"]}>
-									<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+									<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 										Annuler
 									</Button>
 								</Link>
 							) : (
 								<Button
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.OUTLINED}
 									onClick={this.openLeavingModal}
 									className={classes["cancel-button"]}>

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

@@ -1,4 +1,4 @@
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
@@ -53,7 +53,7 @@ class UpdateCustomerNoteClass extends BasePage<IPropsClass, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={this.state.backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 									Annuler
 								</Button>
 							</Link>

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

@@ -1,6 +1,6 @@
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import Users, { IGetUsersParams } from "@Front/Api/LeCoffreApi/Notary/Users/Users";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
@@ -105,7 +105,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 
 							<div className={classes["button-container"]}>
 								<Link href={backwardPath} className={classes["cancel-button"]}>
-									<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+									<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 										Annuler
 									</Button>
 								</Link>

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

@@ -1,5 +1,5 @@
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
@@ -54,7 +54,7 @@ class UpdateFolderDescriptionClass extends BasePage<IPropsClass, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={this.backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 									Annuler
 								</Button>
 							</Link>

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

@@ -1,5 +1,5 @@
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -77,7 +77,7 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 									Annuler
 								</Button>
 							</Link>

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

@@ -1,7 +1,7 @@
 import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
 import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
 import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FilePreview from "@Front/Components/DesignSystem/FilePreview";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
@@ -118,7 +118,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 								{this.state.document?.document_status === EDocumentStatus.DEPOSITED && (
 									<>
 										<Button
-											variant={EButtonColor.PRIMARY}
+											variant={EButtonVariant.PRIMARY}
 											styleType={EButtonStyleType.OUTLINED}
 											onClick={this.openRefuseModal}>
 											Refuser

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

@@ -1,5 +1,5 @@
 import LogoIcon from "@Assets/logo_small_blue.svg";
-import Button, { EButtonColor, EButtonStyleType } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant, EButtonStyleType } from "@Front/Components/DesignSystem/Button";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import { DocumentIcon } from "@heroicons/react/24/outline";
@@ -48,7 +48,7 @@ export default function Folder() {
 							</Typography>
 						</div>
 						<Link href={Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path}>
-							<Button variant={EButtonColor.INFO}>Créer votre premier dossier</Button>
+							<Button variant={EButtonVariant.INFO}>Créer votre premier dossier</Button>
 						</Link>
 					</div>
 
@@ -56,7 +56,7 @@ export default function Folder() {
 						<div className={classes["box"]}>
 							<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Besoin d'aide ?</Typography>
 							<Typography typo={ETypo.TEXT_MD_REGULAR}>Consultez nos guides pour bien démarrer.</Typography>
-							<Button variant={EButtonColor.WARNING} styleType={EButtonStyleType.TEXT}>
+							<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
 								Accéder aux guides
 							</Button>
 						</div>
@@ -65,7 +65,7 @@ export default function Folder() {
 						<div className={classes["box"]}>
 							<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Vous avez des questions ?</Typography>
 							<Typography typo={ETypo.TEXT_MD_REGULAR}>Notre équipe de support est là pour vous aider.</Typography>
-							<Button variant={EButtonColor.WARNING} styleType={EButtonStyleType.TEXT}>
+							<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
 								Contactez le support
 							</Button>
 						</div>

src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
@@ -66,7 +66,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 											<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
 										</div>
 										<Link href={redirectPathEditCollaborators}>
-											<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
+											<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
 												Modifier les collaborateurs
 											</Button>
 										</Link>
@@ -116,14 +116,14 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 
 								<div className={classes["button-container"]}>
 									<Button
-										variant={EButtonColor.PRIMARY}
+										variant={EButtonVariant.PRIMARY}
 										styleType={EButtonStyleType.OUTLINED}
 										onClick={this.restoreFolder}>
 										Restaurer le dossier
 									</Button>
 									{this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && (
 										<Button
-											variant={EButtonColor.PRIMARY}
+											variant={EButtonVariant.PRIMARY}
 											onClick={() => this.downloadAnchoringProof(this.props.selectedFolder?.uid)}
 											disabled={this.state.loadingAnchoring}>
 											Télécharger la preuve d'ancrage

src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx

@@ -1,4 +1,4 @@
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -62,7 +62,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 									Annuler
 								</Button>
 							</Link>

src/front/Components/Layouts/Login/index.tsx

@@ -1,6 +1,6 @@
 import CoffreIcon from "@Assets/Icons/coffre.svg";
 import idNoteLogo from "@Assets/Icons/id-note-logo.svg";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Image from "next/image";
@@ -65,7 +65,7 @@ export default function Login() {
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT}>
+					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
 						Contacter l'administrateur
 					</Button>
 				</Link>

src/front/Components/Layouts/LoginCallback/index.tsx

@@ -8,7 +8,7 @@ import Module from "@Front/Config/Module";
 import Auth from "@Front/Api/Auth/IdNot";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Loader from "@Front/Components/DesignSystem/Loader";
 import UserStore from "@Front/Stores/UserStore";
 import Link from "next/link";
@@ -73,7 +73,7 @@ export default function LoginCallBack() {
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT}>
+					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
 						Contacter l'administrateur
 					</Button>
 				</Link>

src/front/Components/Layouts/LoginCallbackCustomer/index.tsx

@@ -6,7 +6,7 @@ import React, { useEffect } from "react";
 import classes from "./classes.module.scss";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Loader from "@Front/Components/DesignSystem/Loader";
 import Customers, { ICustomerTokens } from "@Front/Api/Auth/Id360/Customers/Customers";
 import CustomerStore from "@Front/Stores/CustomerStore";
@@ -59,7 +59,7 @@ export default function LoginCallBackCustomer() {
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT}>
+					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
 						Contacter l'administrateur
 					</Button>
 				</Link>

src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button, { EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { ValidationError } from "class-validator";
 type IProps = {
 	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
@@ -34,7 +34,7 @@ export default function PasswordForgotten(props: IProps) {
 					validationError={validationErrors.find((error) => error.property === "confirm_password")}
 					password
 				/>
-				<Button type="submit" variant={EButtonColor.PRIMARY} className={classes["submit_button"]}>
+				<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
 					Valider
 				</Button>
 			</Form>

src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx

@@ -4,7 +4,7 @@ import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 //import Image from "next/image";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button, { EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 //import franceConnectLogo from "../france-connect.svg";
 // import { useRouter } from "next/router";
 // import Customers from "@Front/Api/Auth/Id360/Customers/Customers";
@@ -49,7 +49,7 @@ export default function StepEmail(props: IProps) {
 					name="email"
 					validationError={validationErrors.find((error) => error.property === "email")}
 				/>
-				<Button type="submit" variant={EButtonColor.PRIMARY} className={classes["submit_button"]}>
+				<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
 					Suivant
 				</Button>
 			</Form>

src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button, { EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { ValidationError } from "class-validator";
 type IProps = {
 	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
@@ -34,7 +34,7 @@ export default function StepNewPassword(props: IProps) {
 					validationError={validationErrors.find((error) => error.property === "confirm_password")}
 					password
 				/>
-				<Button type="submit" variant={EButtonColor.PRIMARY} className={classes["submit_button"]}>
+				<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
 					Valider
 				</Button>
 			</Form>

src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button, { EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { ValidationError } from "class-validator";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 type IProps = {
@@ -46,7 +46,7 @@ export default function StepPassword(props: IProps) {
 						Mot de passe oublié ?
 					</Typography>
 				</div>
-				<Button type="submit" variant={EButtonColor.PRIMARY} className={classes["submit_button"]}>
+				<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
 					Valider
 				</Button>
 			</Form>

src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { ValidationError } from "class-validator";
 type IProps = {
 	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
@@ -48,14 +48,14 @@ export default function StepTotp(props: IProps) {
 					name="totpCode"
 					validationError={validationErrors.find((error) => error.property === "totpCode")}
 				/>
-				<Button type="submit" variant={EButtonColor.PRIMARY} className={classes["submit_button"]}>
+				<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
 					Suivant
 				</Button>
 			</Form>
 			<div className={classes["ask-another-code"]}>
 				<Typography typo={ETypo.TEXT_MD_REGULAR}>Vous n'avez rien reçu ?</Typography>
 				<Button
-					variant={EButtonColor.PRIMARY}
+					variant={EButtonVariant.PRIMARY}
 					styleType={EButtonStyleType.TEXT}
 					disabled={disableNewCodeButton}
 					data-disabled={disableNewCodeButton.toString()}

src/front/Components/Layouts/LoginHome/index.tsx

@@ -3,7 +3,7 @@ import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoub
 
 import classes from "./classes.module.scss";
 import LandingImage from "../Login/landing-connect.jpeg";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Link from "next/link";
 import Module from "@Front/Config/Module";
 
@@ -38,7 +38,7 @@ export default function LoginHome() {
 						<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 					</Typography>
 					<Link href="mailto:support@lecoffre.io">
-						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
 							Contacter l'administrateur
 						</Button>
 					</Link>

src/front/Components/Layouts/Rib/index.tsx

@@ -3,7 +3,7 @@ import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Ty
 import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import FilePreview from "@Front/Components/DesignSystem/FilePreview";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { useRouter } from "next/router";
 import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib";
 import DepositRib from "@Front/Components/DesignSystem/DepositRib";
@@ -130,10 +130,10 @@ export default function Rib() {
 						</div>
 						<div className={classes["footer"]}>
 							<div className={classes["buttons-container"]}>
-								<Button onClick={openDeleteModal} variant={EButtonColor.SECONDARY}>
+								<Button onClick={openDeleteModal} variant={EButtonVariant.SECONDARY}>
 									Supprimer
 								</Button>
-								<Button onClick={openRibModal} variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								<Button onClick={openRibModal} variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 									Modifier
 								</Button>
 								<Button onClick={downloadFile}>Télécharger</Button>

src/front/Components/Layouts/Roles/RolesCreate/index.tsx

@@ -1,5 +1,5 @@
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@@ -100,7 +100,7 @@ export default function RolesCreate(props: IProps) {
 							validationError={validationError.find((error) => error.property === "name")}
 						/>
 						<div className={classes["buttons-container"]}>
-							<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
+							<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
 								Annuler
 							</Button>
 							<Button type="submit">Créer le rôle</Button>

src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx

@@ -6,7 +6,7 @@ import SubscribeCheckoutTicket, { EPaymentFrequencyFront as EPaymentFrequency }
 import { EForfeitType, forfeitsPrices } from "../../SubscriptionFacturation";
 import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
@@ -135,7 +135,7 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
 					</Typography>
 				</div>
 				<div className={classes["voir-recap"]}>
-					<Button fullwidth variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={open}>
+					<Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={open}>
 						Voir le récapitulatif plus en détail
 					</Button>
 				</div>

src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx

@@ -7,7 +7,7 @@ import SubscribeCheckoutTicket, { EPaymentFrequencyFront as EPaymentFrequency }
 import { EForfeitType, collaboratorPrice, forfeitsPrices } from "../../SubscriptionFacturation";
 import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
@@ -130,7 +130,7 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
 					</Typography>
 				</div>
 				<div className={classes["voir-recap"]}>
-					<Button fullwidth variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={open}>
+					<Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={open}>
 						Voir le récapitulatif plus en détail
 					</Button>
 				</div>

src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import Form from "@Front/Components/DesignSystem/Form";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import React, { useCallback, useEffect, useState } from "react";
 import User, { Subscription } from "le-coffre-resources/dist/Admin";
 import JwtService, { IUserJwtPayload } from "@Front/Services/JwtService/JwtService";
@@ -113,11 +113,11 @@ export default function SubscriptionManageCollaborators() {
 							{selectedCollaborators.length} collaborateurs sélectionnés
 						</Typography>
 						<div className={classes["buttons-container"]}>
-							<Button type="submit" variant={EButtonColor.PRIMARY} fullwidth>
+							<Button type="submit" variant={EButtonVariant.PRIMARY} fullwidth>
 								Enregistrer
 							</Button>
 							<Button
-								variant={EButtonColor.PRIMARY}
+								variant={EButtonVariant.PRIMARY}
 								styleType={EButtonStyleType.OUTLINED}
 								fullwidth
 								onClick={cancelAll}

src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx

@@ -1,7 +1,7 @@
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { useCallback, useEffect, useState } from "react";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
@@ -153,7 +153,7 @@ export default function SubscriptionFacturation() {
 									<Button
 										onClick={manageSubscription}
 										fullwidth
-										variant={EButtonColor.PRIMARY}
+										variant={EButtonVariant.PRIMARY}
 										styleType={EButtonStyleType.OUTLINED}>
 										Rétrograder mon abonnement
 									</Button>
@@ -165,7 +165,7 @@ export default function SubscriptionFacturation() {
 											href={
 												Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path
 											}> */}
-										<Button onClick={openConfirmationRemoveSeats} fullwidth variant={EButtonColor.PRIMARY}>
+										<Button onClick={openConfirmationRemoveSeats} fullwidth variant={EButtonVariant.PRIMARY}>
 											Changer de plan
 										</Button>
 										{/* </Link> */}
@@ -173,7 +173,7 @@ export default function SubscriptionFacturation() {
 											href={
 												Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path
 											}>
-											<Button fullwidth variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+											<Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 												Gérer mes attributions
 											</Button>
 										</Link>
@@ -223,7 +223,7 @@ export default function SubscriptionFacturation() {
 							</div>
 							<div className={classes["button-container"]}>
 								{subscription.type === "UNLIMITED" && (
-									<Button fullwidth variant={EButtonColor.PRIMARY} disabled>
+									<Button fullwidth variant={EButtonVariant.PRIMARY} disabled>
 										Abonnement Max Activé
 									</Button>
 								)}
@@ -233,7 +233,7 @@ export default function SubscriptionFacturation() {
 									<Button
 										onClick={manageSubscription}
 										fullwidth
-										variant={EButtonColor.PRIMARY}
+										variant={EButtonVariant.PRIMARY}
 										styleType={EButtonStyleType.OUTLINED}>
 										Améliorer mon abonnement
 									</Button>
@@ -243,7 +243,7 @@ export default function SubscriptionFacturation() {
 						</div>
 					</div>
 					<div className={classes["actions-container"]}>
-						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={cancelOrReactivateSubscription}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={cancelOrReactivateSubscription}>
 							{!cancelAt && (
 								<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
 									Arrêter l'abonnement

src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import { useRouter } from "next/router";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button, { EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
 import { useCallback, useState } from "react";
@@ -110,7 +110,7 @@ export default function SubscriptionInvite() {
 							<div className={classes["add-line-container"]}>
 								<Button
 									onClick={addLine}
-									variant={EButtonColor.PRIMARY}
+									variant={EButtonVariant.PRIMARY}
 									styleType={EButtonStyleType.TEXT}
 									icon={PlusIcon}>
 									Ajouter une adresse email

src/front/Components/Layouts/Users/UserInformations/index.tsx

@@ -3,7 +3,7 @@ import WarningIcon from "@Assets/images/warning.png";
 import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
 import LiveVotes from "@Front/Api/LeCoffreApi/SuperAdmin/LiveVotes/LiveVotes";
 import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
-import Button, { EButtonColor } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Switch from "@Front/Components/DesignSystem/Switch";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
@@ -296,7 +296,7 @@ export default function UserInformations(props: IProps) {
 											</div>
 											{userHasVoted() && (
 												<div className={classes["remove-my-vote"]}>
-													<Button variant={EButtonColor.SECONDARY} onClick={deleteMyVote}>
+													<Button variant={EButtonVariant.SECONDARY} onClick={deleteMyVote}>
 														Retirer mon vote
 													</Button>
 												</div>