From 0c01457484d83ead158c9812e31984751bb6e36a Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 29 Jul 2024 18:15:04 +0200
Subject: [PATCH] :sparkles: Footer working

---
 src/front/Assets/Icons/vertical-separator.svg |  3 +++
 .../DesignSystem/Footer/classes.module.scss   | 24 ++++++++++---------
 .../DesignSystem/Footer/desktop.tsx           | 10 ++++----
 .../Components/DesignSystem/Footer/index.tsx  |  9 ++-----
 .../Components/DesignSystem/Footer/mobile.tsx |  6 +++--
 .../Components/DesignSystem/Footer/tablet.tsx | 15 ++++++------
 .../DefaultDoubleSidePage/classes.module.scss |  1 +
 7 files changed, 37 insertions(+), 31 deletions(-)
 create mode 100644 src/front/Assets/Icons/vertical-separator.svg

diff --git a/src/front/Assets/Icons/vertical-separator.svg b/src/front/Assets/Icons/vertical-separator.svg
new file mode 100644
index 00000000..0f2bf83f
--- /dev/null
+++ b/src/front/Assets/Icons/vertical-separator.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="14" viewBox="0 0 2 14" fill="none">
+<path d="M1 1L0.999999 13" stroke="#47535D" stroke-width="2" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/front/Components/DesignSystem/Footer/classes.module.scss b/src/front/Components/DesignSystem/Footer/classes.module.scss
index 37143abe..4155ff54 100644
--- a/src/front/Components/DesignSystem/Footer/classes.module.scss
+++ b/src/front/Components/DesignSystem/Footer/classes.module.scss
@@ -3,17 +3,24 @@
 .root {
 	border-top: 1px solid var(--footer-border, #d7dce0);
 	background: var(--footer-background, #fff);
-	padding: var(--spacing-1-5) 0;
 
 	.sub-root {
 		display: flex;
 		align-items: center;
 		gap: var(--Radius-lg, 16px);
 		white-space: nowrap;
+	}
 
-		@media (max-width: 1023px) {
-			padding: 0 12px;
-		}
+	.desktop {
+		padding: var(--spacing-1-5, 12px) var(--Radius-xl, 24px);
+	}
+
+	.tablet {
+		padding: var(--spacing-1-5, 12px) var(--Radius-xl, 24px);
+	}
+
+	.mobile {
+		padding: var(--spacing-1-5, 12px) var(--Radius-lg, 16px);
 	}
 
 	&[data-has-left-padding="true"] {
@@ -22,12 +29,7 @@
 		}
 	}
 
-	&[data-is-sticky="true"] {
-		position: sticky;
-		bottom: 0;
-	}
-
-	@media (max-width: 660px) or (min-width: 769px) {
+	@media (max-width: 660px) or (min-width: 1023px) {
 		.tablet {
 			display: none;
 		}
@@ -39,7 +41,7 @@
 		}
 	}
 
-	@media (max-width: 769px) {
+	@media (max-width: 1023px) {
 		.desktop {
 			display: none;
 		}
diff --git a/src/front/Components/DesignSystem/Footer/desktop.tsx b/src/front/Components/DesignSystem/Footer/desktop.tsx
index f3937b1c..9b4e4c58 100644
--- a/src/front/Components/DesignSystem/Footer/desktop.tsx
+++ b/src/front/Components/DesignSystem/Footer/desktop.tsx
@@ -3,6 +3,8 @@ import classes from "./classes.module.scss";
 import Link from "next/link";
 import Module from "@Front/Config/Module";
 import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard";
+import VerticalSeparator from "@Assets/Icons/vertical-separator.svg";
+import Image from "next/image";
 
 type IProps = {
 	className?: string;
@@ -14,11 +16,11 @@ export default function Desktop({ className }: IProps) {
 	return (
 		<div className={[classes["sub-root"], className].join(" ")}>
 			<Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Copyright lecoffre 2024</Link>
-			<span className={classes["separator"]} />
-			<Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Conditions d'utilisation</Link>
-			<span className={classes["separator"]} />
+			<Image src={VerticalSeparator} alt="Separator" />
+			<Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Juridiques</Link>
+			<Image src={VerticalSeparator} alt="Separator" />
 			<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_CONFIDENTIALITE)}>Politique de confidentialité</Link>
-			<span className={classes["separator"]} />
+			<Image src={VerticalSeparator} alt="Separator" />
 			<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Politique des cookies</Link>
 		</div>
 	);
diff --git a/src/front/Components/DesignSystem/Footer/index.tsx b/src/front/Components/DesignSystem/Footer/index.tsx
index aad7305e..084673cb 100644
--- a/src/front/Components/DesignSystem/Footer/index.tsx
+++ b/src/front/Components/DesignSystem/Footer/index.tsx
@@ -7,10 +7,9 @@ import Tablet from "./tablet";
 type IProps = {
 	className?: string;
 	hasLeftPadding?: boolean;
-	isSticky?: boolean;
 };
 
-export default function Footer({ className, hasLeftPadding = false, isSticky = false }: IProps) {
+export default function Footer({ className, hasLeftPadding = false }: IProps) {
 	const footerRef = React.useRef<HTMLDivElement>(null);
 	useEffect(() => {
 		if (!footerRef.current) return;
@@ -18,11 +17,7 @@ export default function Footer({ className, hasLeftPadding = false, isSticky = f
 		document.documentElement.style.setProperty("--footer-height", `${footerHeight}px`);
 	});
 	return (
-		<footer
-			className={[classes["root"], className].join(" ")}
-			data-has-left-padding={hasLeftPadding}
-			data-is-sticky={isSticky}
-			ref={footerRef}>
+		<footer className={[classes["root"], className].join(" ")} data-has-left-padding={hasLeftPadding} ref={footerRef}>
 			<Mobile className={classes["mobile"]} />
 			<Tablet className={classes["tablet"]} />
 			<Desktop className={classes["desktop"]} />
diff --git a/src/front/Components/DesignSystem/Footer/mobile.tsx b/src/front/Components/DesignSystem/Footer/mobile.tsx
index fa5c6c4d..23deed46 100644
--- a/src/front/Components/DesignSystem/Footer/mobile.tsx
+++ b/src/front/Components/DesignSystem/Footer/mobile.tsx
@@ -3,6 +3,8 @@ import classes from "./classes.module.scss";
 import Link from "next/link";
 import Module from "@Front/Config/Module";
 import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard";
+import VerticalSeparator from "@Assets/Icons/vertical-separator.svg";
+import Image from "next/image";
 
 type IProps = {
 	className?: string;
@@ -14,9 +16,9 @@ export default function Mobile({ className }: IProps) {
 	return (
 		<div className={[classes["sub-root"], className].join(" ")}>
 			<Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Lecoffre 2024</Link>
-			<span className={classes["separator"]} />
+			<Image src={VerticalSeparator} alt="Separator" />
 			<Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>Juridiques</Link>
-			<span className={classes["separator"]} />
+			<Image src={VerticalSeparator} alt="Separator" />
 			<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Cookies</Link>
 		</div>
 	);
diff --git a/src/front/Components/DesignSystem/Footer/tablet.tsx b/src/front/Components/DesignSystem/Footer/tablet.tsx
index 212dfda3..19acb111 100644
--- a/src/front/Components/DesignSystem/Footer/tablet.tsx
+++ b/src/front/Components/DesignSystem/Footer/tablet.tsx
@@ -3,7 +3,8 @@ import classes from "./classes.module.scss";
 import Module from "@Front/Config/Module";
 import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard";
 import Link from "next/link";
-
+import VerticalSeparator from "@Assets/Icons/vertical-separator.svg";
+import Image from "next/image";
 type IProps = {
 	className?: string;
 };
@@ -12,13 +13,13 @@ const legalPages = Module.getInstance().get().modules.pages.Legal.pages.LegalInf
 export default function Tablet({ className }: IProps) {
 	return (
 		<div className={[classes["sub-root"], className].join(" ")}>
-			<Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Lecoffre 2024</Link>
-			<span className={classes["separator"]} />
-			<Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Conditions d'utilisation</Link>
-			<span className={classes["separator"]} />
+			<Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Copyright lecoffre 2024</Link>
+			<Image src={VerticalSeparator} alt="Separator" />
+			<Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Juridiques</Link>
+			<Image src={VerticalSeparator} alt="Separator" />
 			<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_CONFIDENTIALITE)}>Politique de confidentialité</Link>
-			<span className={classes["separator"]} />
-			<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Politique des cookies</Link>
+			<Image src={VerticalSeparator} alt="Separator" />
+			<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Gestion des cookies</Link>
 		</div>
 	);
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
index 143f8733..5ec8b4da 100644
--- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
@@ -28,6 +28,7 @@
 
 	.background-image-container {
 		position: fixed;
+		z-index: -1;
 		width: 50vw;
 		top: 83px;
 		right: 0;