✨ DoubleSidePage fixed image

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

@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	background-color: $grey-soft;
+	background-color: var(--grey-soft);
 	padding: 24px;
 	width: 100%;
 	display: flex;

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

@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 24px;
-	background-color: $grey-soft;
+	background-color: var(--grey-soft);
 	width: 100%;
 
 	.content {

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

@@ -22,13 +22,21 @@
 				@media (max-width: $screen-m) {
 					display: none;
 				}
+				background: var(--grey-soft);
+				.image {
+					object-fit: contain;
+				}
 			}
 
 			.side-content {
 				max-width: 530px;
 			}
 
-			.image {
+			&.background-image-container {
+				height: 100%;
+				width: 100%;
+
+				.background-image {
 					height: 100%;
 					width: 100%;
 					object-fit: cover;
@@ -36,3 +44,4 @@
 			}
 		}
 	}
+}

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

@@ -13,15 +13,19 @@ type IProps = {
 	 */
 	scrollTop: number | null;
 	image: StaticImageData;
+	type: "background" | "image";
 };
+
 type IState = {};
 
 export default class DefaultDoubleSidePage extends React.Component<IProps, IState> {
 	public static defaultProps = {
 		scrollTop: 0,
+		type: "background",
 	};
 
 	public override render(): JSX.Element {
+		console.log(this.props.type);
 		return (
 			<div className={classes["root"]}>
 				<Header isUserConnected={false} />
@@ -29,9 +33,16 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
 					<div className={classes["sides"]}>
 						<div className={classes["side-content"]}>{this.props.children}</div>
 					</div>
+					{this.props.type === "image" && (
 						<div className={classNames(classes["sides"], classes["image-container"])}>
 							<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />
 						</div>
+					)}
+					{this.props.type === "background" && (
+						<div className={classNames(classes["sides"], classes["background-image-container"])}>
+							<Image alt={"right side image"} src={this.props.image} className={classes["background-image"]} />
+						</div>
+					)}
 				</div>
 				<Version />
 			</div>

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

@@ -0,0 +1,32 @@
+import BasePage from "../../Base";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import classes from "./classes.module.scss";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import RightImage from "@Front/Assets/images/create-folder/right-image.png";
+
+type IProps = {};
+type IState = {};
+export default class CreateFolder extends BasePage<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+	}
+
+	// TODO: Message if the user has not created any folder yet
+	public override render(): JSX.Element {
+		return (
+			<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
+				<div className={classes["root"]}>
+					<div className={classes["no-folder-selected"]}>
+						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+						<div className={classes["choose-a-folder"]}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+								Veuillez sélectionner un dossier.
+							</Typography>
+						</div>
+					</div>
+				</div>
+			</DefaultDoubleSidePage>
+		);
+	}
+	public override async componentDidMount() {}
+}

src/front/Themes/variables.scss

@@ -9,26 +9,26 @@
 
 	--colormerdum: blue;
 
-	--green-flash: $green-flash;
-	--blue-flash: $blue-flash;
-	--turquoise-flash: $turquoise-flash;
-	--purple-flash: $purple-flash;
-	--purple-hover: $purple-hover;
-	--orange-flash: $orange-flash;
-	--red-flash: $red-flash;
-	--re-hover: $re-hover;
-	--pink-flash: $pink-flash;
-	--pink-hover: $pink-hover;
+	--green-flash: #{$green-flash};
+	--blue-flash: #{$blue-flash};
+	--turquoise-flash: #{$turquoise-flash};
+	--purple-flash: #{$purple-flash};
+	--purple-hover: #{$purple-hover};
+	--orange-flash: #{$orange-flash};
+	--red-flash: #{$red-flash};
+	--re-hover: #{$re-hover};
+	--pink-flash: #{$pink-flash};
+	--pink-hover: #{$pink-hover};
 
-	--green-soft: $green-soft;
-	--blue-soft: $blue-soft;
-	--turquoise-soft: $turquoise-soft;
-	--purple-soft: $purple-soft;
-	--orange-soft: $orange-soft;
-	--red-soft: $red-soft;
-	--pink-soft: $pink-soft;
+	--green-soft: #{$green-soft};
+	--blue-soft: #{$blue-soft};
+	--turquoise-soft: #{$turquoise-soft};
+	--purple-soft: #{$purple-soft};
+	--orange-soft: #{$orange-soft};
+	--red-soft: #{$red-soft};
+	--pink-soft: #{$pink-soft};
 
-	--grey: $grey;
-	--grey-medium: $grey-medium;
-	--grey-soft: $grey-soft;
+	--grey: #{$grey};
+	--grey-medium: #{$grey-medium};
+	--grey-soft: #{$grey-soft};
 }

src/pages/dossier/creer-dossier.tsx

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