✨ Warning message + responsive with office

src/front/Components/Layouts/Users/UserInformations/classes.module.scss

@@ -1,6 +1,18 @@
 @import "@Themes/constants.scss";
 
 .root {
+	.header {
+		display: flex;
+		align-items: flex-end;
+		gap: 24px;
+
+		@media (max-width: $screen-s) {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 16px;
+		}
+	}
+
 	.user-infos {
 		background-color: var(--grey-soft);
 		display: flex;
@@ -34,6 +46,11 @@
 
 		display: flex;
 		gap: 32px;
+
+		@media (max-width: $screen-m) {
+			flex-direction: column;
+		}
+
 		.part {
 			flex: 1;
 			.first-line {
@@ -45,6 +62,16 @@
 				display: flex;
 				gap: 16px;
 				flex-direction: column;
+
+				.votes-block {
+					align-items: center;
+					display: flex;
+					gap: 16px;
+					background-color: var(--orange-soft);
+					border: 1px solid #e7e7e7;
+					border-radius: 5px;
+					padding: 16px;
+				}
 			}
 		}
 		.third-line {

src/front/Components/Layouts/Users/UserInformations/index.tsx

@@ -8,6 +8,8 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import classes from "./classes.module.scss";
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
+import WarningIcon from "@Assets/images/warning.png";
+import Image from "next/image";
 
 type IProps = {};
 export default function UserInformations(props: IProps) {
@@ -24,6 +26,7 @@ export default function UserInformations(props: IProps) {
 				q: {
 					contact: true,
 					office_role: true,
+					office_membership: true,
 				},
 			});
 			if (!user) return;
@@ -38,10 +41,13 @@ export default function UserInformations(props: IProps) {
 	}, [userUid]);
 
 	return (
-		<DefaultUserDashboard mobileBackText={"Liste des collaborateurs"}>
+		<DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}>
 			<div className={classes["root"]}>
-				<div className={classes["folder-header"]}>
+				<div className={classes["header"]}>
 					<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography>
+					<Typography typo={ITypo.H3} color={ITypoColor.GREY}>
+						Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
+					</Typography>
 				</div>
 				<div className={classes["user-infos"]}>
 					<div className={classes["user-infos-row"]}>
@@ -108,6 +114,22 @@ export default function UserInformations(props: IProps) {
 								name="superadmin"
 								toolTip="tooltip"
 							/>
+							<div className={classes["votes-block"]}>
+								<div className={classes["left"]}>
+									<Image src={WarningIcon} alt="warning" width={28} height={28} />
+								</div>
+								<div className={classes["right"]}>
+									<div>
+										<Typography typo={ITypo.P_SB_18}>1/3</Typography>
+									</div>
+									<div>
+										<Typography typo={ITypo.CAPTION_14}>
+											Vous avez voté pour attribuer le titre de Super Admin. Il manque 2 votes pour que le
+											collaborateur se voit attribuer le titre.
+										</Typography>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>