Merge branch 'dev' into staging

src/front/Components/DesignSystem/Button/classes.module.scss

@@ -14,6 +14,7 @@
 	user-select: none;
 	cursor: pointer;
 	font-family: var(--font-text-family);
+	border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0));
 
 	svg {
 		width: 18px;
@@ -26,36 +27,72 @@
 
 	&[variant="primary"] {
 		color: var(--color-primary-500);
-		border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0));
 		background: var(--button-contained-primary-default-background, #005bcb);
+		border-color: var(--button-contained-primary-default-border);
+
+		svg {
+			stroke: var(--button-contained-primary-default-contrast);
+		}
 
 		&:hover {
-			border: 1px solid var(--button-contained-primary-hovered-border, rgba(0, 0, 0, 0));
+			border-color: var(--button-contained-primary-hovered-border);
 			background: var(--button-contained-primary-hovered-background, #0040a4);
+
+			svg {
+				stroke: var(--button-contained-primary-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
-			border: 1px solid var(--button-contained-primary-pressed-border, rgba(0, 0, 0, 0));
+			border-color: var(--button-contained-primary-pressed-border);
 			background: var(--button-contained-primary-pressed-background, #013391);
+
+			svg {
+				stroke: var(--button-contained-primary-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			border-color: var(--button-outlined-primary-default-border);
+
+			svg {
+				stroke: var(--button-outlined-primary-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-primary-50);
+				border-color: var(--button-outlined-primary-hovered-border);
+
+				svg {
+					stroke: var(--button-outlined-primary-hovered-contrast);
+				}
 			}
 
 			&:focus,
 			&:active {
 				background-color: var(--color-primary-100);
 				color: var(--color-primary-700);
-				border-color: var(--color-primary-700);
+				border-color: var(--button-outlined-primary-pressed-border);
+
+				svg {
+					stroke: var(--button-outlined-primary-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-primary-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
+				border-color: var(--button-outlined-primary-hovered-border);
+
+				svg {
+					stroke: var(--button-text-primary-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -63,6 +100,10 @@
 				background-color: transparent;
 				color: var(--color-primary-800);
 				border-color: var(--color-primary-800);
+
+				svg {
+					stroke: var(--button-text-primary-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -72,20 +113,40 @@
 		background: var(--color-secondary-500);
 		border-color: var(--color-secondary-500);
 
+		svg {
+			stroke: var(--button-contained-secondary-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-secondary-700);
 			border-color: var(--color-secondary-700);
+
+			svg {
+				stroke: var(--button-contained-secondary-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-secondary-800);
 			border-color: var(--color-secondary-800);
+
+			svg {
+				stroke: var(--button-contained-secondary-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-secondary-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-secondary-50);
+
+				svg {
+					stroke: var(--button-outlined-secondary-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -93,12 +154,24 @@
 				background-color: var(--color-secondary-100);
 				color: var(--color-secondary-700);
 				border-color: var(--color-secondary-700);
+
+				svg {
+					stroke: var(--button-outlined-secondary-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-secondary-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
+
+				svg {
+					stroke: var(--button-text-secondary-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -106,6 +179,10 @@
 				background-color: transparent;
 				color: var(--color-secondary-800);
 				border-color: var(--color-secondary-800);
+
+				svg {
+					stroke: var(--button-text-secondary-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -115,20 +192,40 @@
 		background: var(--color-neutral-500);
 		border-color: var(--color-neutral-500);
 
+		svg {
+			stroke: var(--button-contained-neutral-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-neutral-700);
 			border-color: var(--color-neutral-700);
+
+			svg {
+				stroke: var(--button-contained-neutral-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-neutral-800);
 			border-color: var(--color-neutral-800);
+
+			svg {
+				stroke: var(--button-contained-neutral-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-neutral-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-neutral-50);
+
+				svg {
+					stroke: var(--button-outlined-neutral-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -136,12 +233,24 @@
 				background-color: var(--color-neutral-100);
 				color: var(--color-neutral-700);
 				border-color: var(--color-neutral-700);
+
+				svg {
+					stroke: var(--button-outlined-neutral-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-neutral-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
+
+				svg {
+					stroke: var(--button-text-neutral-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -149,6 +258,10 @@
 				background-color: transparent;
 				color: var(--color-neutral-800);
 				border-color: var(--color-neutral-800);
+
+				svg {
+					stroke: var(--button-text-neutral-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -158,21 +271,41 @@
 		background: var(--color-error-600);
 		border-color: var(--color-error-600);
 
+		svg {
+			stroke: var(--button-contained-error-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-error-800);
 			border-color: var(--color-error-800);
+
+			svg {
+				stroke: var(--button-contained-error-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-error-900);
 			border-color: var(--color-error-900);
+
+			svg {
+				stroke: var(--button-contained-error-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-error-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-error-50);
 				border-color: var(--color-secondary-700);
+
+				svg {
+					stroke: var(--button-outlined-error-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -180,14 +313,26 @@
 				background-color: var(--color-error-100);
 				color: var(--color-secondary-700);
 				border-color: var(--color-secondary-700);
+
+				svg {
+					stroke: var(--button-outlined-error-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-error-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
 				color: var(--color-error-800);
 				border-color: var(--color-error-800);
+
+				svg {
+					stroke: var(--button-text-error-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -195,6 +340,10 @@
 				background-color: transparent;
 				color: var(--color-error-900);
 				border-color: var(--color-error-900);
+
+				svg {
+					stroke: var(--button-text-error-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -204,22 +353,42 @@
 		background: var(--color-warning-600);
 		border-color: var(--color-warning-600);
 
+		svg {
+			stroke: var(--button-contained-warning-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-warning-800);
 			border-color: var(--color-warning-800);
+
+			svg {
+				stroke: var(--button-contained-warning-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-warning-900);
 			border-color: var(--color-warning-900);
+
+			svg {
+				stroke: var(--button-contained-warning-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-warning-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-warning-50);
 				border-color: var(--color-warning-700);
 				color: var(--color-warning-700);
+
+				svg {
+					stroke: var(--button-outlined-warning-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -227,14 +396,26 @@
 				background-color: var(--color-warning-100);
 				color: var(--color-warning-700);
 				border-color: var(--color-warning-700);
+
+				svg {
+					stroke: var(--button-outlined-warning-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-warning-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
 				color: var(--color-warning-800);
 				border-color: var(--color-warning-800);
+
+				svg {
+					stroke: var(--button-text-warning-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -242,6 +423,10 @@
 				background-color: transparent;
 				color: var(--color-warning-900);
 				border-color: var(--color-warning-900);
+
+				svg {
+					stroke: var(--button-text-warning-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -251,22 +436,42 @@
 		background: var(--color-success-600);
 		border-color: var(--color-success-600);
 
+		svg {
+			stroke: var(--button-contained-success-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-success-800);
 			border-color: var(--color-success-800);
+
+			svg {
+				stroke: var(--button-contained-success-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-success-900);
 			border-color: var(--color-success-900);
+
+			svg {
+				stroke: var(--button-contained-success-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-success-default-contrast);
+			}
+
 			&:hover {
 				background-color: var(--color-success-50);
 				border-color: var(--color-success-700);
 				color: var(--color-success-700);
+
+				svg {
+					stroke: var(--button-outlined-success-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -274,14 +479,26 @@
 				background-color: var(--color-success-100);
 				color: var(--color-success-700);
 				border-color: var(--color-success-700);
+
+				svg {
+					stroke: var(--button-outlined-success-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-success-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
 				color: var(--color-success-800);
 				border-color: var(--color-success-800);
+
+				svg {
+					stroke: var(--button-text-success-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -289,6 +506,10 @@
 				background-color: transparent;
 				color: var(--color-success-900);
 				border-color: var(--color-success-900);
+
+				svg {
+					stroke: var(--button-text-success-pressed-contrast);
+				}
 			}
 		}
 	}
@@ -298,22 +519,41 @@
 		background: var(--color-info-700);
 		border-color: var(--color-info-700);
 
+		svg {
+			stroke: var(--button-contained-info-default-contrast);
+		}
+
 		&:hover {
 			background: var(--color-info-900);
 			border-color: var(--color-info-900);
+
+			svg {
+				stroke: var(--button-contained-info-hovered-contrast);
+			}
 		}
 
 		&:focus,
 		&:active {
 			background: var(--color-info-950);
 			border-color: var(--color-info-950);
+
+			svg {
+				stroke: var(--button-contained-info-pressed-contrast);
+			}
 		}
 
 		&[styleType="outlined"] {
+			svg {
+				stroke: var(--button-outlined-info-default-contrast);
+			}
 			&:hover {
 				background-color: var(--color-info-50);
 				border-color: var(--color-info-700);
 				color: var(--color-info-700);
+
+				svg {
+					stroke: var(--button-outlined-info-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -321,14 +561,26 @@
 				background-color: var(--color-info-100);
 				color: var(--color-info-700);
 				border-color: var(--color-info-700);
+
+				svg {
+					stroke: var(--button-outlined-info-pressed-contrast);
+				}
 			}
 		}
 
 		&[styleType="text"] {
+			svg {
+				stroke: var(--button-text-info-default-contrast);
+			}
+
 			&:hover {
 				background-color: transparent;
 				color: var(--color-info-900);
 				border-color: var(--color-info-900);
+
+				svg {
+					stroke: var(--button-text-info-hovered-contrast);
+				}
 			}
 
 			&:focus,
@@ -336,6 +588,10 @@
 				background-color: transparent;
 				color: var(--color-info-950);
 				border-color: var(--color-info-950);
+
+				svg {
+					stroke: var(--button-text-info-pressed-contrast);
+				}
 			}
 		}
 	}

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

@@ -1,8 +1,7 @@
-import Image from "next/image";
+import classNames from "classnames";
-import React, { CSSProperties } from "react";
+import React from "react";
 
 import classes from "./classes.module.scss";
-import classNames from "classnames";
 
 export enum EButtonVariant {
 	PRIMARY = "primary",
@@ -33,12 +32,11 @@ type IProps = {
 	size?: EButtonSize;
 	styleType?: EButtonStyleType;
 	fullwidth?: boolean;
-	icon?: string;
+	leftIcon?: React.ReactNode;
-	iconstyle?: CSSProperties;
+	rightIcon?: React.ReactNode;
 	disabled?: boolean;
 	isLoading?: boolean;
 	type?: "button" | "submit";
-	iconposition?: "left" | "right";
 	className?: string;
 };
 
@@ -51,12 +49,11 @@ export default function Button(props: IProps) {
 		type = "button",
 		isLoading = false,
 		fullwidth = false,
-		iconposition = "right",
 		onClick,
 		children,
-		icon,
-		iconstyle,
 		className = "",
+		leftIcon,
+		rightIcon,
 	} = props;
 
 	const fullwidthattr = fullwidth.toString();
@@ -64,15 +61,14 @@ export default function Button(props: IProps) {
 
 	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styleType };
 	delete attributes.fullwidth;
-	delete attributes.icon;
+	delete attributes.leftIcon;
-	delete attributes.iconstyle;
+	delete attributes.rightIcon;
-	delete attributes.iconposition;
 
 	return (
 		<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
-			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
+			{leftIcon}
 			{children}
-			{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
+			{rightIcon}
 		</button>
 	);
 }

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

@@ -13,8 +13,8 @@ import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resou
 import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import classNames from "classnames";
-import Confirm from "../Modal/Confirm";
+import Confirm from "../OldModal/Confirm";
-import Alert from "../Modal/Alert";
+import Alert from "../OldModal/Alert";
 import GreenCheckIcon from "@Assets/Icons/green-check.svg";
 import Loader from "../Loader";
 import TextAreaField from "../Form/TextareaField";

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

@@ -13,10 +13,10 @@ import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import classNames from "classnames";
 
 import Button, { EButtonStyleType, EButtonVariant } from "../Button";
-import Confirm from "../Modal/Confirm";
+import Confirm from "../OldModal/Confirm";
 import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
 import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
-import Alert from "../Modal/Alert";
+import Alert from "../OldModal/Alert";
 
 type IProps = {
 	onChange?: (files: File[]) => void;

src/front/Components/DesignSystem/IconButton/classes.module.scss

@@ -0,0 +1,98 @@
+@import "@Themes/constants.scss";
+
+.root {
+	cursor: pointer;
+	border-radius: var(--button-icon-button-radius, 8px);
+
+	svg {
+		width: 24px;
+		min-width: 24px;
+		stroke: var(--button-icon-button-default-default);
+	}
+
+	&:hover {
+		svg {
+			stroke: var(--button-icon-button-default-hovered);
+		}
+	}
+
+	&.neutral {
+		background: var(--button-icon-button-neutral-default);
+
+		svg {
+			stroke: var(--button-icon-button-default-default);
+		}
+
+		&:hover {
+			background: var(--button-icon-button-neutral-hovered);
+
+			svg {
+				stroke: var(--button-icon-button-default-hovered);
+			}
+		}
+	}
+
+	&.primary {
+		background: var(--button-icon-button-primary-default);
+
+		svg {
+			stroke: var(--button-icon-button-primary-contrast);
+		}
+
+		&:hover {
+			background: var(--button-icon-button-primary-hovered);
+		}
+	}
+
+	&.error {
+		background: var(--button-icon-button-error-default);
+
+		svg {
+			stroke: var(--button-icon-button-error-contrast);
+		}
+
+		&:hover {
+			background: var(--button-icon-button-error-hovered);
+		}
+	}
+	&.success {
+		background: var(--button-icon-button-success-default);
+
+		svg {
+			stroke: var(--button-icon-button-success-contrast);
+		}
+
+		&:hover {
+			background: var(--button-icon-button-success-hovered);
+		}
+	}
+
+	&.warning {
+		background: var(--button-icon-button-warning-default);
+
+		svg {
+			stroke: var(--button-icon-button-warning-contrast);
+		}
+
+		&:hover {
+			background: var(--button-icon-button-warning-hovered);
+		}
+	}
+
+	&.info {
+		background: var(--button-icon-button-info-default);
+
+		svg {
+			stroke: var(--button-icon-button-info-contrast);
+		}
+
+		&:hover {
+			background: var(--button-icon-button-info-hovered);
+		}
+	}
+
+	&.disabled {
+		cursor: default;
+		opacity: var(--opacity-disabled, 0.3);
+	}
+}

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

@@ -0,0 +1,32 @@
+import classNames from "classnames";
+import React from "react";
+
+import classes from "./classes.module.scss";
+
+export enum EIconButtonVariant {
+	DEFAULT = "default",
+	NEUTRAL = "neutral",
+	PRIMARY = "primary",
+	ERROR = "error",
+	SUCCESS = "success",
+	WARNING = "warning",
+	INFO = "info",
+}
+
+type IProps = {
+	icon: React.ReactNode;
+	onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+	variant?: EIconButtonVariant;
+	disabled?: boolean;
+	className?: string;
+};
+
+export default function IconButton(props: IProps) {
+	const { icon, onClick, className, variant = EIconButtonVariant.DEFAULT, disabled = false } = props;
+
+	return (
+		<span onClick={onClick} className={classNames(classes["root"], className, classes[variant], disabled && classes["disabled"])}>
+			{icon}
+		</span>
+	);
+}

src/front/Components/DesignSystem/Modal/classes.module.scss

@@ -1,125 +1,60 @@
-@import "@Themes/constants.scss";
-
-@keyframes smooth-appear {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
-@keyframes smooth-disappear {
-	from {
-		opacity: 1;
-	}
-
-	to {
-		opacity: 0;
-	}
-}
-
 .root {
 	position: fixed;
-	z-index: 6;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	top: 0;
 	left: 0;
-	width: 100vw;
+	width: 100%;
-	height: 100vh;
+	height: 100%;
-	display: flex;
+	z-index: 3;
-	align-items: center;
-	justify-content: center;
-	--animation-delay: 1ms;
-	animation: smooth-appear var(--animation-delay) $custom-easing;
 
-	&[data-will-close="true"] {
+	.content {
-		animation: smooth-disappear var(--animation-delay) $custom-easing;
+		position: fixed;
-		opacity: 0;
+		max-width: 600px;
+		max-height: 85vh;
+		border-radius: var(--modal-radius, 0px);
+		background: var(--modal-background, #fff);
+		box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
+
+		overflow-y: auto;
+
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
+			gap: var(--spacing-md, 16px);
+		}
+
+		.children {
+			padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
+		}
+
+		.footer {
+			display: flex;
+			padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
+			justify-content: center;
+			gap: var(--spacing-md, 16px);
+		}
+
+		&.fullwidth {
+			min-width: 85vw;
+		}
+
+		&.fullscreen {
+			min-width: 85vw;
+			padding: 0;
+		}
 	}
 
-	.background {
+	.backdrop {
 		position: fixed;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background-color: $modal-background;
+		background-color: rgba(0, 0, 0, 0.5);
-	}
+		overflow: hidden;
-
-	.container {
-		position: relative;
-		width: 610px;
-		max-height: 90%;
-		background: var(--color-generic-white);
-		box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
-		overflow: auto;
-		padding: 32px;
-
-		@media (max-width: $screen-s) {
-			width: 90%;
-			max-width: 493px;
-		}
-
-		.cross {
-			display: flex;
-			flex-direction: row-reverse;
-
-			.close-icon {
-				height: 24px;
-				width: 24px;
-				cursor: pointer;
-			}
-		}
-	}
-
-	.transparant-background {
-		background-color: transparent;
-		box-shadow: none;
-	}
-
-	&[data-side-background="true"] {
-		.container {
-			max-width: 711px;
-
-			.sub-container {
-				padding: 0;
-				display: flex;
-
-				p {
-					max-width: 711px;
-				}
-
-				@media (max-width: $screen-s) {
-					display: block;
-				}
-
-				.banner {
-					@media (max-width: $screen-s) {
-						overflow: hidden;
-					}
-				}
-			}
-		}
-
-		.side-image {
-			height: 100%;
-
-			@media (max-width: $screen-s) {
-				display: none;
-			}
-		}
-
-		.top-image {
-			@media (min-width: $screen-s) {
-				display: none;
-			}
-
-			@media (max-width: $screen-s) {
-				width: 100%;
-				max-height: 82px;
-				min-height: 82px;
-			}
-		}
 	}
 }

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

@@ -1,111 +1,79 @@
-import CrossIcon from "@Assets/Icons/cross.svg";
+import classNames from "classnames";
-import Image from "next/image";
-import React from "react";
-
-import Typography, { ETypo } from "../Typography";
 import classes from "./classes.module.scss";
-import Footer from "./Elements/Footer";
+import Button, { EButtonStyleType, EButtonVariant } from "../Button";
-import Header from "./Elements/Header";
+import React from "react";
-import Loader from "./Elements/Loader";
+import Typography, { ETypo } from "../Typography";
 
-export type IProps = {
+import { XMarkIcon } from "@heroicons/react/24/outline";
-	closeBtn?: boolean;
+import IconButton, { EIconButtonVariant } from "../IconButton";
-	header?: string | JSX.Element;
+
-	footer?: JSX.Element | null;
+type IProps = {
-	textLoader?: string | JSX.Element;
+	className?: string;
 	isOpen: boolean;
-	onClose: () => void;
+	onClose?: () => void;
-	hasTransparentBackground?: boolean;
-	hasContainerClosable?: boolean;
-	withSideBackground?: boolean;
 	children?: React.ReactNode;
-	animationDelay?: number;
+	title?: string;
-};
+	firstButton?: {
-
+		text: string;
-type IState = {
+		onClick?: () => void;
-	willClose: boolean;
+		rightIcon?: React.ReactNode;
-	isOpen: boolean;
+		leftIcon?: React.ReactNode;
-};
-
-export default class Modal extends React.Component<IProps, IState> {
-	static defaultProps = {
-		animationDelay: 250,
 	};
-	public rootRefElement = React.createRef<HTMLDivElement>();
+	secondButton?: {
-	constructor(props: IProps) {
+		text: string;
-		super(props);
+		onClick?: () => void;
-		this.close = this.close.bind(this);
+		rightIcon?: React.ReactNode;
+		leftIcon?: React.ReactNode;
+	};
+	fullwidth?: boolean;
+	fullscreen?: boolean;
+};
 
-		this.state = {
+export default function Modal(props: IProps) {
-			willClose: false,
+	const { isOpen, onClose, children, className, title, firstButton, secondButton, fullwidth, fullscreen } = props;
-			isOpen: this.props.isOpen,
+
-		};
+	if (!isOpen) return null;
-	}
+	return (
+		<div className={classes["root"]}>
+			<div className={classes["backdrop"]} onClick={onClose} />
 
-	public override render(): JSX.Element | null {
-		if (!this.state.isOpen) return null;
-		return (
 			<div
-				ref={this.rootRefElement}
+				className={classNames(
-				className={classes["root"]}
+					classes["content"],
-				data-side-background={this.props.withSideBackground}
+					className,
-				data-will-close={this.state.willClose.toString()}>
+					fullwidth && classes["fullwidth"],
-				<div className={classes["background"]} onClick={this.close} />
+					fullscreen && classes["fullscreen"],
-				<div className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}>
+				)}>
-					{this.props.closeBtn && (
+				<div className={classes["header"]}>
-						<div className={classes["cross"]}>
+					{title && <Typography typo={ETypo.TITLE_H4}> {title}</Typography>}
-							<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
+					<IconButton variant={EIconButtonVariant.NEUTRAL} onClick={onClose} icon={<XMarkIcon/>}/>
-						</div>
+				</div>
-					)}
-					<div className={classes["sub-container"]}>
-						{this.props.header && <Header content={this.props.header} />}
 
-						<Typography typo={ETypo.TEXT_MD_REGULAR}>
+				<div className={classNames(classes["children"], className)}>{children}</div>
-							<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
+
-						</Typography>
+				<div className={classes["footer"]}>
-						{this.props.children && this.props.footer && <Footer content={this.props.footer} />}
+					{firstButton && (
-					</div>
+						<Button
+							variant={EButtonVariant.PRIMARY}
+							styleType={EButtonStyleType.OUTLINED}
+							leftIcon={firstButton.leftIcon}
+							rightIcon={firstButton.rightIcon}
+							onClick={firstButton.onClick}>
+							{firstButton.text}
+						</Button>
+					)}
+					{secondButton && (
+						<Button
+							variant={EButtonVariant.PRIMARY}
+							styleType={EButtonStyleType.CONTAINED}
+							leftIcon={secondButton.leftIcon}
+							rightIcon={secondButton.rightIcon}
+							onClick={secondButton.onClick}>
+							{secondButton.text}
+						</Button>
+					)}
 				</div>
 			</div>
-		);
+		</div>
-	}
+	);
-
-	public override componentDidUpdate(prevProps: IProps): void {
-		if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) {
-			this.setState({ willClose: true });
-			window.setTimeout(() => {
-				this.setState({
-					isOpen: false,
-					willClose: false,
-				});
-			}, this.props.animationDelay);
-			document.body.style.overflow = "auto";
-		}
-		if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) {
-			this.setState({ isOpen: true });
-			document.body.style.overflow = "hidden";
-		}
-		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
-	}
-
-	public override componentDidMount(): void {
-		document.addEventListener("keydown", this.handleKeyDown);
-	}
-
-	public override componentWillUnmount(): void {
-		document.body.style.overflow = "auto";
-		document.removeEventListener("keydown", this.handleKeyDown);
-	}
-
-	protected close() {
-		if (this.props.hasContainerClosable === false) return;
-		if (this.state.willClose) return;
-		this.props.onClose();
-	}
-
-	private handleKeyDown = (e: KeyboardEvent): void => {
-		if (e.key === "Escape" || e.key === "Esc") {
-			this.props.onClose();
-		}
-	};
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import Modal, { IProps as IPropsModal } from "..";
+import OldModal, { IProps as IPropsModal } from "..";
 import Button, { EButtonVariant } from "../../Button";
 import classes from "./classes.module.scss";
 
@@ -13,7 +13,7 @@ type IState = {
 export default class Alert extends React.Component<IProps, IState> {
 	static defaultProps = {
 		closeText: "Ok",
-		...Modal.defaultProps,
+		...OldModal.defaultProps,
 	};
 
 	constructor(props: IProps) {
@@ -26,14 +26,14 @@ export default class Alert extends React.Component<IProps, IState> {
 
 	public override render(): JSX.Element | null {
 		return (
-			<Modal
+			<OldModal
 				closeBtn={this.props.closeBtn}
 				isOpen={this.state.isOpen}
 				onClose={this.onClose}
 				header={this.props.header}
 				footer={this.footer()}>
 				{this.props.children}
-			</Modal>
+			</OldModal>
 		);
 	}
 

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

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import React from "react";
 
-import Modal, { IProps as IPropsModal } from "..";
+import OldModal, { IProps as IPropsModal } from "..";
 import Button, { EButtonStyleType, EButtonVariant } from "../../Button";
 import classes from "./classes.module.scss";
 
@@ -24,19 +24,19 @@ export default class Confirm extends React.Component<IProps, IState> {
 		confirmText: "Confirm",
 		canConfirm: true,
 		showButtons: true,
-		...Modal.defaultProps,
+		...OldModal.defaultProps,
 	};
 
 	public override render(): JSX.Element | null {
 		return (
-			<Modal
+			<OldModal
 				closeBtn={this.props.closeBtn}
 				header={this.props.header}
 				footer={this.footer()}
 				animationDelay={this.props.animationDelay}
 				{...this.props}>
 				{this.props.children}
-			</Modal>
+			</OldModal>
 		);
 	}
 

src/front/Components/DesignSystem/OldModal/classes.module.scss

@@ -0,0 +1,125 @@
+@import "@Themes/constants.scss";
+
+@keyframes smooth-appear {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes smooth-disappear {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+.root {
+	position: fixed;
+	z-index: 6;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	--animation-delay: 1ms;
+	animation: smooth-appear var(--animation-delay) $custom-easing;
+
+	&[data-will-close="true"] {
+		animation: smooth-disappear var(--animation-delay) $custom-easing;
+		opacity: 0;
+	}
+
+	.background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: $modal-background;
+	}
+
+	.container {
+		position: relative;
+		width: 610px;
+		max-height: 90%;
+		background: var(--color-generic-white);
+		box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
+		overflow: auto;
+		padding: 32px;
+
+		@media (max-width: $screen-s) {
+			width: 90%;
+			max-width: 493px;
+		}
+
+		.cross {
+			display: flex;
+			flex-direction: row-reverse;
+
+			.close-icon {
+				height: 24px;
+				width: 24px;
+				cursor: pointer;
+			}
+		}
+	}
+
+	.transparant-background {
+		background-color: transparent;
+		box-shadow: none;
+	}
+
+	&[data-side-background="true"] {
+		.container {
+			max-width: 711px;
+
+			.sub-container {
+				padding: 0;
+				display: flex;
+
+				p {
+					max-width: 711px;
+				}
+
+				@media (max-width: $screen-s) {
+					display: block;
+				}
+
+				.banner {
+					@media (max-width: $screen-s) {
+						overflow: hidden;
+					}
+				}
+			}
+		}
+
+		.side-image {
+			height: 100%;
+
+			@media (max-width: $screen-s) {
+				display: none;
+			}
+		}
+
+		.top-image {
+			@media (min-width: $screen-s) {
+				display: none;
+			}
+
+			@media (max-width: $screen-s) {
+				width: 100%;
+				max-height: 82px;
+				min-height: 82px;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,111 @@
+import CrossIcon from "@Assets/Icons/cross.svg";
+import Image from "next/image";
+import React from "react";
+
+import Typography, { ETypo } from "../Typography";
+import classes from "./classes.module.scss";
+import Footer from "./Elements/Footer";
+import Header from "./Elements/Header";
+import Loader from "./Elements/Loader";
+
+export type IProps = {
+	closeBtn?: boolean;
+	header?: string | JSX.Element;
+	footer?: JSX.Element | null;
+	textLoader?: string | JSX.Element;
+	isOpen: boolean;
+	onClose: () => void;
+	hasTransparentBackground?: boolean;
+	hasContainerClosable?: boolean;
+	withSideBackground?: boolean;
+	children?: React.ReactNode;
+	animationDelay?: number;
+};
+
+type IState = {
+	willClose: boolean;
+	isOpen: boolean;
+};
+
+export default class OldModal extends React.Component<IProps, IState> {
+	static defaultProps = {
+		animationDelay: 250,
+	};
+	public rootRefElement = React.createRef<HTMLDivElement>();
+	constructor(props: IProps) {
+		super(props);
+		this.close = this.close.bind(this);
+
+		this.state = {
+			willClose: false,
+			isOpen: this.props.isOpen,
+		};
+	}
+
+	public override render(): JSX.Element | null {
+		if (!this.state.isOpen) return null;
+		return (
+			<div
+				ref={this.rootRefElement}
+				className={classes["root"]}
+				data-side-background={this.props.withSideBackground}
+				data-will-close={this.state.willClose.toString()}>
+				<div className={classes["background"]} onClick={this.close} />
+				<div className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}>
+					{this.props.closeBtn && (
+						<div className={classes["cross"]}>
+							<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
+						</div>
+					)}
+					<div className={classes["sub-container"]}>
+						{this.props.header && <Header content={this.props.header} />}
+
+						<Typography typo={ETypo.TEXT_MD_REGULAR}>
+							<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
+						</Typography>
+						{this.props.children && this.props.footer && <Footer content={this.props.footer} />}
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	public override componentDidUpdate(prevProps: IProps): void {
+		if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) {
+			this.setState({ willClose: true });
+			window.setTimeout(() => {
+				this.setState({
+					isOpen: false,
+					willClose: false,
+				});
+			}, this.props.animationDelay);
+			document.body.style.overflow = "auto";
+		}
+		if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) {
+			this.setState({ isOpen: true });
+			document.body.style.overflow = "hidden";
+		}
+		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
+	}
+
+	public override componentDidMount(): void {
+		document.addEventListener("keydown", this.handleKeyDown);
+	}
+
+	public override componentWillUnmount(): void {
+		document.body.style.overflow = "auto";
+		document.removeEventListener("keydown", this.handleKeyDown);
+	}
+
+	protected close() {
+		if (this.props.hasContainerClosable === false) return;
+		if (this.state.willClose) return;
+		this.props.onClose();
+	}
+
+	private handleKeyDown = (e: KeyboardEvent): void => {
+		if (e.key === "Escape" || e.key === "Esc") {
+			this.props.onClose();
+		}
+	};
+}

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

@@ -11,7 +11,7 @@ import Link from "next/link";
 import React from "react";
 
 import Button, { EButtonStyleType, EButtonVariant } from "../Button";
-import Confirm from "../Modal/Confirm";
+import Confirm from "../OldModal/Confirm";
 import QuantityProgressBar from "../QuantityProgressBar";
 import classes from "./classes.module.scss";
 import DocumentList from "./DocumentList";

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

@@ -2,7 +2,7 @@
 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";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import Base from "@Front/Components/Layouts/Base";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";

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

@@ -4,7 +4,7 @@ import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
 import Users from "@Front/Api/LeCoffreApi/Admin/Users/Users";
 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 Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Switch from "@Front/Components/DesignSystem/Switch";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";

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

@@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
 import Module from "@Front/Config/Module";

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

@@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
 import Module from "@Front/Config/Module";

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

@@ -5,7 +5,7 @@ import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTy
 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";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";

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

@@ -4,13 +4,18 @@ import Newsletter from "@Front/Components/DesignSystem/Newsletter";
 import Table from "@Front/Components/DesignSystem/Table";
 import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
 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 DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import { ArrowLongLeftIcon, ArrowLongRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useCallback, useMemo, useState } from "react";
 
+import classes from "./classes.module.scss";
+import useOpenable from "@Front/Hooks/useOpenable";
+import Modal from "@Front/Components/DesignSystem/Modal";
+import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
+
 export default function DesignSystem() {
+	const { isOpen, open, close } = useOpenable();
 	const userDb = useMemo(
 		() => [
 			{
@@ -57,15 +62,25 @@ export default function DesignSystem() {
 		<DefaultTemplate title={"DesignSystem"}>
 			<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
 			<Newsletter isOpen />
-			<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
-			<Tabs<(typeof userDb)[number]> tabs={userDbArray} 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}>Modal</Typography>
+					<Button onClick={open}>Open Modal</Button>
+					<Modal
+						isOpen={isOpen}
+						onClose={close}
+						title={"Modal"}
+						firstButton={{ text: "Annuler", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
+						secondButton={{ text: "Confirmer", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}>
+						<Typography typo={ETypo.TEXT_LG_REGULAR}>Modal Content</Typography>
+					</Modal>
+
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
+					<Tabs<(typeof userDb)[number]> tabs={userDbArray} onSelect={onSelect} />
+					<Typography typo={ETypo.TEXT_MD_REGULAR}>
+						{selectedTab.id} - {selectedTab.username}
+					</Typography>
+
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
 					<div className={classes["rows"]}>
 						<CircleProgress percentage={0} />
@@ -134,67 +149,147 @@ export default function DesignSystem() {
 
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.PRIMARY}>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 							Primary
 						</Button>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styleType={EButtonStyleType.OUTLINED}>
+							Primary
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styleType={EButtonStyleType.TEXT}>
 							Primary
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SECONDARY}>
-						<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
 							Secondary
 						</Button>
-						<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styleType={EButtonStyleType.OUTLINED}>
+							Secondary
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styleType={EButtonStyleType.TEXT}>
 							Secondary
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.NEUTRAL}>Neutral</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.NEUTRAL}>
-						<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
 							Neutral
 						</Button>
-						<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styleType={EButtonStyleType.OUTLINED}>
+							Neutral
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styleType={EButtonStyleType.TEXT}>
 							Neutral
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.ERROR}>Error</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.ERROR}>
-						<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
 							Error
 						</Button>
-						<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styleType={EButtonStyleType.OUTLINED}>
+							Error
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styleType={EButtonStyleType.TEXT}>
 							Error
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.WARNING}>Warning</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.WARNING}>
-						<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
 							Warning
 						</Button>
-						<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styleType={EButtonStyleType.OUTLINED}>
+							Warning
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styleType={EButtonStyleType.TEXT}>
 							Warning
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SUCCESS}>
-						<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
+							Success
-							SUCCESS
 						</Button>
-						<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
+						<Button
-							SUCCESS
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styleType={EButtonStyleType.OUTLINED}>
+							Success
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styleType={EButtonStyleType.TEXT}>
+							Success
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button variant={EButtonVariant.INFO}>INFO</Button>
+						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.INFO}>
-						<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
+							Info
-							INFO
 						</Button>
-						<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
+						<Button
-							INFO
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styleType={EButtonStyleType.OUTLINED}>
+							Info
 						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styleType={EButtonStyleType.TEXT}>
+							Info
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.DEFAULT} />
+						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.NEUTRAL} />
+						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.PRIMARY} />
+						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.ERROR} />
+						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.SUCCESS} />
+						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.WARNING} />
+						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} />
+						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} disabled />
 					</div>
 				</div>
 			</div>

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

@@ -1,4 +1,4 @@
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import classes from "./classes.module.scss";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";

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

@@ -4,7 +4,7 @@ import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAncho
 import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";

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

@@ -2,7 +2,7 @@ import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
 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";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";

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

@@ -3,7 +3,7 @@ import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
 import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
 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 Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";

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

@@ -11,7 +11,7 @@ import classes from "./classes.module.scss";
 import LandingImage from "./landing-connect.jpeg";
 import { FrontendVariables } from "@Front/Config/VariablesFront";
 import Link from "next/link";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 
 export default function Login() {
 	const router = useRouter();

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

@@ -5,7 +5,7 @@ import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { ValidationError } from "class-validator";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 type IProps = {
 	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
 	validationErrors: ValidationError[];

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

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 import LandingImage from "./landing-connect.jpeg";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import StepEmail from "./StepEmail";
 import StepTotp from "./StepTotp";
 import Auth from "@Front/Api/Auth/Customer/Auth";

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

@@ -7,7 +7,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
 import { useRouter } from "next/router";
 import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib";
 import DepositRib from "@Front/Components/DesignSystem/DepositRib";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Loader from "@Front/Components/DesignSystem/Loader";
 
 export default function Rib() {

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

@@ -2,7 +2,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
 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";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultRolesDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
 import Module from "@Front/Config/Module";

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

@@ -2,7 +2,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
 import Button from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import Form from "@Front/Components/DesignSystem/Form";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultRoleDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
 import { OfficeRole, Rule, RulesGroup } from "le-coffre-resources/dist/Admin";

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

@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
 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 Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
 import { EType } from "le-coffre-resources/dist/Admin/Subscription";
 import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";

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

@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
 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 Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
 // import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
 // import { EType } from "le-coffre-resources/dist/Admin/Subscription";

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

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { useCallback, useEffect, useState } from "react";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
 import MessageBox from "@Front/Components/Elements/MessageBox";
 import Link from "next/link";

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

@@ -4,7 +4,7 @@ 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, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Switch from "@Front/Components/DesignSystem/Switch";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultUserDashboard from "@Front/Components/LayoutTemplates/DefaultUserDashboard";

src/front/Themes/variables.scss

@@ -565,7 +565,7 @@
 	--modal-spacing: var(--spacing-md);
 	--navigation-radius: var(--radius-none);
 	--notification-radius: var(--radius-minimal);
-	--opacity-disabled: 1.875rem;
+	--opacity-disabled: 0.3;
 	--radius-none: 0px;
 	--radius-minimal: var(--radius-md);
 	--radius-rounded: var(--radius-lg);