From 84e820b90aede172a7dd34c6d911e028d5b0f52a Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Thu, 22 Aug 2024 15:33:38 +0200
Subject: [PATCH] :sparkles: responsive no folder page

---
 .../DesignSystem/Separator/index.tsx          |  5 ++--
 .../classes.module.scss                       |  4 +++
 .../Layouts/Folder/classes.module.scss        | 26 ++++++++++++++-----
 src/front/Components/Layouts/Folder/index.tsx | 11 ++++++--
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/front/Components/DesignSystem/Separator/index.tsx b/src/front/Components/DesignSystem/Separator/index.tsx
index bb9c4389..c3d2b26b 100644
--- a/src/front/Components/DesignSystem/Separator/index.tsx
+++ b/src/front/Components/DesignSystem/Separator/index.tsx
@@ -20,14 +20,15 @@ type IProps = {
 	direction?: ESeperatorDirection;
 	size?: number;
 	thickness?: number;
+	className?: string;
 };
 
 export default function Separator(props: IProps) {
-	const { color = ESeperatorColor.DEFAULT, direction = ESeperatorDirection.HORIZONTAL, size, thickness = 1 } = props;
+	const { color = ESeperatorColor.DEFAULT, direction = ESeperatorDirection.HORIZONTAL, size, thickness = 1, className } = props;
 
 	return (
 		<div
-			className={classNames(classes["root"], classes[color], classes[direction])}
+			className={classNames(classes["root"], classes[color], classes[direction], className)}
 			style={direction === ESeperatorDirection.HORIZONTAL ? { width: size, height: thickness } : { height: size, width: thickness }}
 		/>
 	);
diff --git a/src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss
index da2293c5..0d189a58 100644
--- a/src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss
@@ -32,6 +32,10 @@
 
 			.right-side {
 				min-width: 100%;
+
+				.right-side-content {
+					overflow-y: hidden;
+				}
 			}
 		}
 	}
diff --git a/src/front/Components/Layouts/Folder/classes.module.scss b/src/front/Components/Layouts/Folder/classes.module.scss
index 850483a8..c716d594 100644
--- a/src/front/Components/Layouts/Folder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/classes.module.scss
@@ -3,7 +3,7 @@
 .root {
 	.content {
 		display: flex;
-		width: 648px;
+		max-width: 648px;
 		flex-direction: column;
 		justify-content: center;
 		gap: var(--spacing-2xl, 40px);
@@ -14,8 +14,8 @@
 			gap: var(--spacing-md, 16px);
 			align-self: stretch;
 
-			.logo{
-				fill: "red"
+			.logo {
+				fill: "red";
 			}
 		}
 
@@ -45,11 +45,23 @@
 				gap: var(--spacing-sm, 8px);
 			}
 
-			.separator {
-				background-color: var(--separator-stroke-light);
-				width: 1px;
-				align-self: stretch;
+			@media screen and (max-width: 600px) {
+				flex-direction: column;
 			}
 		}
 	}
+
+	.mobile {
+		display: none;
+		@media screen and (max-width: 600px) {
+			display: flex;
+		}
+	}
+
+	.desktop {
+		display: flex;
+		@media screen and (max-width: 600px) {
+			display: none;
+		}
+	}
 }
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index 099f05db..b5cf37a3 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -13,6 +13,7 @@ import { useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 import useUser from "@Front/Hooks/useUser";
+import Separator, { ESeperatorColor, ESeperatorDirection } from "@Front/Components/DesignSystem/Separator";
 
 export default function Folder() {
 	const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
@@ -37,7 +38,6 @@ export default function Folder() {
 					);
 			});
 	}, [router]);
-
 	return (
 		<DefaultNotaryDashboard title={"Dossier"} mobileBackText={"Liste des dossiers"}>
 			<div className={classes["root"]}>
@@ -87,7 +87,14 @@ export default function Folder() {
 								Accéder aux guides
 							</Button>
 						</div>
-						<div className={classes["separator"]} />
+
+						<Separator
+							className={classes["desktop"]}
+							direction={ESeperatorDirection.VERTICAL}
+							size={128}
+							color={ESeperatorColor.LIGHT}
+						/>
+						<Separator className={classes["mobile"]} direction={ESeperatorDirection.HORIZONTAL} color={ESeperatorColor.LIGHT} />
 
 						<div className={classes["box"]}>
 							<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Vous avez des questions ?</Typography>