🎨 fix bugs

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

@@ -38,6 +38,8 @@ export default function Button(props: IProps) {
 
 	const attributes = { ...props, variant, disabled, type, isloading, fullwidth };
 	delete attributes.icon;
+	delete attributes.iconStyle;
+	delete attributes.iconPosition;
 	return (
 		<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
 			{icon && iconPosition === "left" && <Image src={icon} style={iconStyle} alt={"button icon"} />}

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

@@ -12,9 +12,12 @@
 		display: grid;
 		grid-template-columns: 1fr 1fr 1fr 1fr;
 		gap: 32px;
+		width: 100%;
+
 		@media (max-width: $screen-l) {
 			grid-template-columns: 1fr 1fr;
 		}
+
 		@media (max-width: $screen-s) {
 			grid-template-columns: 1fr;
 		}
@@ -23,7 +26,17 @@
 			grid-template-columns: 1fr;
 		}
 	}
+
 	.edit-icon {
 		margin-left: 48px;
 	}
+
+	@media (max-width: $screen-s) {
+		flex-wrap: wrap;
+
+		.edit-icon {
+			margin-left: 0px;
+			margin-top: 24px;
+		}
+	}
 }

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

@@ -19,7 +19,7 @@ export default function FolderBoxInformation(props: IProps) {
 			<div className={classes["content"]}>
 				{isDescription ? (
 					<div className={classes["text-container"]}>
-						<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
+						<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
 						<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
 					</div>
 				) : (

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

@@ -22,7 +22,9 @@ export default class FolderContainer extends React.Component<IProps, IState> {
 		return (
 			<div className={classes["root"]} onClick={this.onSelectedFolder}>
 				<div className={classes["left-side"]}>
-					<Typography typo={ITypo.P_16}>{"Dossier ".concat(this.props.folder.folder_number)}</Typography>
+					<Typography typo={ITypo.P_16}>
+						{this.props.folder.folder_number.concat(" - ").concat(this.props.folder.name)}
+					</Typography>
 					{this.countPendingDocuments() > 0 && (
 						<div className={classes["warning"]}>
 							<WarningBadge />

src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss

@@ -2,6 +2,7 @@
 
 .root {
 	position: relative;
+
 	textarea {
 		resize: none;
 		height: auto;
@@ -12,6 +13,7 @@
 		font-size: 18px;
 		line-height: 22px;
 	}
+
 	.input {
 		z-index: 1;
 		display: flex;
@@ -29,6 +31,7 @@
 				transition: transform 0.3s ease-in-out;
 			}
 		}
+
 		&:not([value=""]) {
 			~.fake-placeholder {
 				transform: translateY(-35px);
@@ -43,12 +46,33 @@
 					transition: transform 0.3s ease-in-out;
 				}
 			}
+
 			&:not([value=""]) {
 				~.fake-placeholder {
 					transform: translateY(-35px);
 					transition: transform;
 				}
 			}
+
+			&::-webkit-inner-spin-button,
+			&::-webkit-outer-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+			}
+
+			/* For Chrome, Safari, and Opera */
+			&::-webkit-inner-spin-button,
+			&::-webkit-outer-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+				-moz-appearance: textfield;
+			}
+
+			/* For IE 10+ */
+			&::-ms-inner-spin-button,
+			&::-ms-outer-spin-button {
+				display: none;
+			}
 		}
 
 		&:not([value=""]) {

src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/index.tsx

@@ -7,7 +7,7 @@ type IProps = {
 };
 export default class ProgressBar extends React.Component<IProps> {
 	public override render(): JSX.Element {
-		const quantity = this.props.percentage.toFixed(2).toString().concat("%");
+		const quantity = this.props.percentage.toFixed(0).toString().concat("%");
 		return (
 			<div className={classes["root"]}>
 				<div className={classes["progress"]} style={{ width: quantity }}>

src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss

@@ -13,15 +13,43 @@
 		display: grid;
 		grid-template-columns: 1fr 1fr 1fr 1fr;
 
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+
 		@media (max-width: $screen-ls) {
 			grid-template-columns: 1fr 1fr;
 			gap: 32px;
 		}
+
+		@media (max-width: $screen-s) {
+			grid-template-columns: 1fr;
+			gap: 32px;
+		}
+
+		.container {
+			>:first-child {
+				margin-bottom: 12px;
+			}
+		}
 	}
 
 	.icons {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
+		gap: 64px;
+
+		@media (max-width: $screen-l) {
+			gap: 32px;
+		}
+
+		@media (max-width: $screen-s) {
 			gap: 24px;
+			margin-top: 24px;
+		}
+	}
+
+	@media (max-width: $screen-s) {
+		flex-wrap: wrap;
 	}
 }

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

@@ -4,4 +4,5 @@
 	position: fixed;
 	bottom: 16px;
 	right: 24px;
+	opacity: 0.3;
 }

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss

@@ -8,12 +8,12 @@
 	.content {
 		display: flex;
 		align-items: center;
-		height: 100vh;
+		height: calc(100vh - 83px);
 		width: 100%;
 
 		.sides {
 			width: 100%;
-			height: 100vh;
+			height: 100%;
 			display: flex;
 			align-items: center;
 			justify-content: center;

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

@@ -1,5 +1,5 @@
 import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
-import BasePage from "../Base";
+import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";

src/front/Components/Layouts/Folder/FolderInformation/ClientSection/classes.module.scss

@@ -3,18 +3,23 @@
 .root {
 	width: 100%;
 	padding-bottom: 32px;
+
 	.no-client {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		flex-direction: column;
 		padding: 72px;
+
 		.title {
 			margin-bottom: 16px;
+			text-align: center;
 		}
 	}
+
 	.client {
 		display: grid;
 		gap: 32px;
+		margin-bottom: 32px;
 	}
 }

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

@@ -1,7 +1,7 @@
 import React from "react";
 import classes from "./classes.module.scss";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import PlusIcon from "@Assets/Icons/plus.svg";
 import UserFolder from "@Front/Components/DesignSystem/UserFolder";
@@ -17,11 +17,20 @@ export default class ClientSection extends React.Component<IProps, IState> {
 		return (
 			<div className={classes["root"]}>
 				{this.doesFolderHaveCustomer() ? (
+					<>
 						<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
+						<Link href={"/dossier/".concat(this.props.folder.uid).concat("/ajouter-client")}>
+							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+								Ajouter un client
+							</Button>
+						</Link>
+					</>
 				) : (
 					<div className={classes["no-client"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.P_18}>Aucun client n’est associé au dossier.</Typography>
+							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+								Aucun client n’est associé au dossier.
+							</Typography>
 						</div>
 						<Link href={"/dossier/".concat(this.props.folder.uid).concat("/ajouter-client")}>
 							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>

src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss

@@ -33,7 +33,15 @@
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
+
+				@media (max-width: $screen-m) {
 					flex-wrap: wrap;
+
+					.title {
+						margin-bottom: 24px;
+					}
+				}
+			}
 		}
 	}
 
@@ -49,24 +57,28 @@
 	.button-container {
 		width: 100%;
 		text-align: center;
+
 		:first-child {
 			margin-right: 12px;
 		}
+
 		>* {
 			margin: auto;
 		}
+
 		@media (max-width: $screen-m) {
 			:first-child {
 				margin-right: 0;
 				margin-bottom: 12px;
 			}
+
 			>* {
 				width: 100%;
 			}
 		}
 	}
+
 	.modal-title {
 		margin-bottom: 24px;
 	}
 }
-}

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

@@ -1,5 +1,5 @@
 import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
-import BasePage from "../Base";
+import BasePage from "../../Base";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import classes from "./classes.module.scss";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
@@ -40,7 +40,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 						<div className={classes["folder-informations"]}>
 							<div className={classes["folder-header"]}>
 								<div className={classes["header"]}>
+									<div className={classes["title"]}>
 										<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+									</div>
 									<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
 										Modifier les collaborateurs
 									</Button>
@@ -50,7 +52,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
 								</div>
 								<div className={classes["progress-bar"]}>
-									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
+									<QuantityProgressBar title="Complétion du dossier client" total={100} currentNumber={0} />
 								</div>
 								{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
 							</div>

src/pages/dossier/[uid]/ajouter-client.tsx

@@ -1,4 +1,4 @@
-import AddClientToFolder from "@Front/Components/Layouts/AddClientToFolder";
+import AddClientToFolder from "@Front/Components/Layouts/Folder/AddClientToFolder";
 
 export default function Route() {
 	return <AddClientToFolder />;

src/pages/dossier/[uid]/index.tsx

@@ -1,4 +1,4 @@
-import FolderInformation from "@Front/Components/Layouts/FolderInformation";
+import FolderInformation from "@Front/Components/Layouts/Folder/FolderInformation";
 
 export default function Route() {
 	return <FolderInformation />;