✨ refont page select folder client side

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

@@ -75,4 +75,8 @@
 			display: block;
 		}
 	}
+
+	&[data-fullwidth="true"] {
+		width: 100%;
+	}
 }

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

@@ -14,9 +14,10 @@ export type ISearchBlockListProps = {
 		text: string;
 		link: string;
 	};
+	fullwidth?: boolean;
 };
 export default function SearchBlockList(props: ISearchBlockListProps) {
-	const { blocks, onSelectedBlock, bottomButton } = props;
+	const { blocks, onSelectedBlock, bottomButton, fullwidth = false } = props;
 
 	const [selectedBlock, setSelectedBlock] = useState<IBlock | null>(null);
 	const router = useRouter();
@@ -69,7 +70,7 @@ export default function SearchBlockList(props: ISearchBlockListProps) {
 	}, [blocks]);
 
 	return (
-		<div className={classes["root"]}>
+		<div className={classes["root"]} data-fullwidth={fullwidth}>
 			<div className={classes["searchbar"]} ref={searchBarRef}>
 				<SearchBar placeholder="Chercher" onChange={handleSearchChange} />
 				{bottomButton && (

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

@@ -62,13 +62,13 @@ export default function Folder() {
 						<Image src={LogoIcon} alt="logo" />
 
 						{activeUser && activeUser.contact && (
-							<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
+							<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
 								Bonjour {activeUser.contact.first_name}, bienvenue sur LeCoffre.io
 							</Typography>
 						)}
 						{!activeUser ||
 							(!activeUser.contact && (
-								<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
+								<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
 									Bonjour, bienvenue sur LeCoffre.io
 								</Typography>
 							))}

src/front/Components/Layouts/SelectFolder/classes.module.scss

@@ -1,17 +1,22 @@
+@import "@Themes/constants.scss";
+
 .root {
-	position: relative;
+	margin: 80px auto;
-	.select-folder-container {
+	width: 472px;
-		max-width: 530px;
-		padding: 80px 72px;
 
 	display: flex;
 	flex-direction: column;
-		justify-content: center;
+	gap: var(--spacing-xl, 32px);
-		gap: 48px;
+
-		margin: auto;
+	@media (max-width: $screen-s) {
-		background-color: white;
+		width: 100%;
-		.title {
+		margin: 0;
-			text-align: center;
+		padding: var(--spacing-md, 16px);
 	}
+
+	.title-container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm, 8px);
 	}
 }

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

@@ -1,26 +1,28 @@
+import backgroundImage from "@Assets/images/background_refonte.svg";
+import LogoIcon from "@Assets/logo_small_blue.svg";
 import Folders from "@Front/Api/LeCoffreApi/Customer/Folders/Folders";
-import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
+import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import JwtService from "@Front/Services/JwtService/JwtService";
 import { OfficeFolder } from "le-coffre-resources/dist/Customer";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
-import LandingImage from "../Login/landing-connect.jpeg";
 import classes from "./classes.module.scss";
-import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
 
 export default function SelectFolder() {
 	const [folders, setFolders] = useState<OfficeFolder[]>([]);
 	const router = useRouter();
 
 	useEffect(() => {
-		async function getFolders() {
 		const jwt = JwtService.getInstance().decodeCustomerJwt();
 		if (!jwt) return;
 
-			const folders = await Folders.getInstance().get({
+		Folders.getInstance()
+			.get({
 				q: {
 					where: {
 						customers: {
@@ -40,11 +42,8 @@ export default function SelectFolder() {
 						customers: true,
 					},
 				},
-			});
+			})
-			setFolders(folders);
+			.then((folders) => setFolders(folders));
-		}
-
-		getFolders();
 	}, []);
 
 	const handleSelectBlock = useCallback(
@@ -55,26 +54,35 @@ export default function SelectFolder() {
 	);
 
 	return (
-		<DefaultDoubleSidePage title="Sélectionner un dossier" image={LandingImage}>
+		<DefaultDoubleSidePage title="Sélectionner un dossier" image={backgroundImage}>
 			<div className={classes["root"]}>
-				<div className={classes["select-folder-container"]}>
+				<div className={classes["title-container"]}>
-					<div className={classes["title"]}>
+					<Image src={LogoIcon} alt="logo" width={56} />
-						<Typography typo={ETypo.DISPLAY_LARGE}>Vos dossiers</Typography>
+					<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
-					</div>
+						Vos dossiers en cours
-					<div className={classes["folders-container"]}>
+					</Typography>
-						<BlockList
+
-							onSelectedBlock={handleSelectBlock}
+					<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_PRIMARY}>
-							blocks={folders.map((folder) => {
+						Veuillez sélectionner le dossier pour lequel vous souhaitez déposer ou consulter des documents.
-								return {
+					</Typography>
-									id: folder.uid!,
-									primaryText: folder.name!,
-									selected: false,
-								};
-							})}
-						/>
-					</div>
 				</div>
+
+				<Typography typo={ETypo.TITLE_H6} color={ETypoColor.TEXT_ACCENT}>
+					Liste des dossiers disponibles :
+				</Typography>
+
+				<SearchBlockList blocks={getBlocks(folders)} onSelectedBlock={handleSelectBlock} fullwidth />
 			</div>
 		</DefaultDoubleSidePage>
 	);
 }
+
+function getBlocks(folders: OfficeFolder[]): IBlock[] {
+	return folders.map((folder) => {
+		return {
+			id: folder.uid!,
+			primaryText: folder.name!,
+			secondaryText: folder.folder_number!,
+		};
+	});
+}