From 63b3551e2ec525a3db5afd898760a4f40a2c9d46 Mon Sep 17 00:00:00 2001 From: Max S Date: Tue, 23 Jul 2024 11:16:00 +0200 Subject: [PATCH] background welcome folder --- .../images/background_refonte_reverse.svg | 22 +++++++++++++++++++ .../classes.module.scss | 16 ++++++++++++++ .../DefaultNotaryDashboard/index.tsx | 12 +++++++--- src/front/Components/Layouts/Folder/index.tsx | 19 ++++++++++------ 4 files changed, 59 insertions(+), 10 deletions(-) create mode 100644 src/front/Assets/images/background_refonte_reverse.svg diff --git a/src/front/Assets/images/background_refonte_reverse.svg b/src/front/Assets/images/background_refonte_reverse.svg new file mode 100644 index 00000000..1d862495 --- /dev/null +++ b/src/front/Assets/images/background_refonte_reverse.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss index 9b23977b..c14e500d 100644 --- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss @@ -11,6 +11,7 @@ } .root { + position: relative; .content { display: flex; overflow: hidden; @@ -114,4 +115,19 @@ } } } + + .background-image-container { + position: fixed; + top: 0; + right: 0; + @media (max-width: $screen-l) { + display: none; + } + + .background-image { + width: 100%; + height: 100%; + object-fit: cover; + } + } } diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx index e4730df6..da2d01dc 100644 --- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx @@ -1,20 +1,20 @@ import ChevronIcon from "@Assets/Icons/chevron.svg"; import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; -import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer"; import FolderArchivedListContainer from "@Front/Components/DesignSystem/FolderArchivedListContainer"; +import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer"; import Header from "@Front/Components/DesignSystem/Header"; import Version from "@Front/Components/DesignSystem/Version"; import BackArrow from "@Front/Components/Elements/BackArrow"; import WindowStore from "@Front/Stores/WindowStore"; +import { ChevronLeftIcon } from "@heroicons/react/24/outline"; import classNames from "classnames"; import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus"; import { OfficeFolder } from "le-coffre-resources/dist/Notary"; -import Image from "next/image"; +import Image, { StaticImageData } from "next/image"; import React, { ReactNode } from "react"; import classes from "./classes.module.scss"; -import { ChevronLeftIcon } from "@heroicons/react/24/outline"; type IProps = { title: string; @@ -24,6 +24,7 @@ type IProps = { hasBackArrow: boolean; backArrowUrl?: string; mobileBackText?: string; + image?: StaticImageData; }; type IState = { folders: OfficeFolder[] | null; @@ -96,6 +97,11 @@ export default class DefaultNotaryDashboard extends React.Component + {this.props.image && ( +
+ {"right +
+ )} diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx index 844893de..ff0df471 100644 --- a/src/front/Components/Layouts/Folder/index.tsx +++ b/src/front/Components/Layouts/Folder/index.tsx @@ -1,15 +1,16 @@ +import backgroundImage from "@Assets/images/background_refonte_reverse.svg"; import LogoIcon from "@Assets/logo_small_blue.svg"; -import Button, { EButtonVariant, EButtonstyletype } from "@Front/Components/DesignSystem/Button"; +import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; +import Module from "@Front/Config/Module"; import { DocumentIcon } from "@heroicons/react/24/outline"; import { OfficeFolder } from "le-coffre-resources/dist/Notary"; -import { useCallback, useState } from "react"; import Image from "next/image"; +import Link from "next/link"; +import { useCallback, useState } from "react"; import classes from "./classes.module.scss"; -import Link from "next/link"; -import Module from "@Front/Config/Module"; export default function Folder() { const [_folder, setFolder] = useState(null); @@ -20,7 +21,11 @@ export default function Folder() { }, []); return ( - +
@@ -56,7 +61,7 @@ export default function Folder() {
Besoin d'aide ? Consultez nos guides pour bien démarrer. -
@@ -65,7 +70,7 @@ export default function Folder() {
Vous avez des questions ? Notre équipe de support est là pour vous aider. -