✨ refont page callback

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

@@ -5,9 +5,11 @@ import classes from "./classes.module.scss";
 
 interface IProps {
 	className?: string;
+	width?: string | number;
+	color?: string;
 }
 export default class Loader extends React.Component<IProps> {
 	public override render(): JSX.Element {
-		return <ArrowPathIcon className={classes["root"]} />;
+		return <ArrowPathIcon className={classes["root"]} color={this.props.color} width={this.props.width} />;
 	}
 }

src/front/Components/Elements/HelpBox/index.tsx

@@ -26,12 +26,12 @@ export default function HelpBox(props: IProps) {
 						styletype={EButtonstyletype.TEXT}
 						size={EButtonSize.MD}
 						onClick={button.onClick}>
-						Contactez le support
+						{button.text}
 					</Button>
 				</Link>
 			) : (
 				<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD} onClick={button.onClick}>
-					Contactez le support
+					{button.text}
 				</Button>
 			)}
 		</div>

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

@@ -1,29 +1,22 @@
 @import "@Themes/constants.scss";
 
 .root {
+	margin: 80px auto;
+	width: 474px;
+
 	display: flex;
-	align-items: center;
-	justify-content: center;
 	flex-direction: column;
-	height: 100%;
-	max-width: 530px;
-	margin: auto;
+	gap: var(--spacing-xl, 32px);
+
+	.title-container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+	}
 
-	.title {
-		margin: 32px 0;
-		text-align: center;
 	@media (max-width: $screen-s) {
-			font-family: 48px;
-		}
-	}
-
-	.loader {
-		width: 32px;
-		height: 32px;
-	}
-
-	.forget-password {
-		margin-top: 32px;
-		margin-bottom: 8px;
+		width: 100%;
+		margin: auto;
+		padding: var(--spacing-md, 16px);
 	}
 }

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

@@ -7,13 +7,13 @@ import classes from "./classes.module.scss";
 import Module from "@Front/Config/Module";
 import Auth from "@Front/Api/Auth/IdNot";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
-import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import Loader from "@Front/Components/DesignSystem/Loader";
 import UserStore from "@Front/Stores/UserStore";
-import Link from "next/link";
 import JwtService from "@Front/Services/JwtService/JwtService";
 import CookieService from "@Front/Services/CookieService/CookieService";
+import backgroundImage from "@Assets/images/background_refonte.svg";
+import HelpBox from "@Front/Components/Elements/HelpBox";
 
 export default function LoginCallBack() {
 	const router = useRouter();
@@ -60,23 +60,22 @@ export default function LoginCallBack() {
 		[router];
 
 	return (
-		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
+		<DefaultDoubleSidePage title={"Login"} image={backgroundImage}>
 			<div className={classes["root"]}>
-				<Image alt="coffre" src={CoffreIcon} />
-				<Typography typo={ETypo.DISPLAY_LARGE}>
-					<div className={classes["title"]}>Connexion espace professionnel</div>
+				<div className={classes["title-container"]}>
+					<Image alt="coffre" src={CoffreIcon} width={56} />
+					<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
+						Connexion à votre espace professionnel
 					</Typography>
-				<div className={classes["loader"]}>
-					<Loader />
 				</div>
-				<Typography typo={ETypo.TEXT_LG_REGULAR}>
-					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
-				</Typography>
-				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>
-						Contacter l'administrateur
-					</Button>
-				</Link>
+
+				<Loader color={"var(--secondary-default-base, #FF4617)"} width={29} />
+				<div />
+				<HelpBox
+					title="Vous n'arrivez pas à vous connecter ?"
+					description="Notre équipe de support est là pour vous aider."
+					button={{ text: "Contacter l'administrateur", link: "mailto:support@lecoffre.io" }}
+				/>
 			</div>
 		</DefaultDoubleSidePage>
 	);