From 5d82631ac293d5ad04ccd8022bb294a3497dbf17 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Tue, 18 Jul 2023 13:49:17 +0200
Subject: [PATCH] :sparkles: Warning message + responsive with office

---
 src/front/Assets/images/warning.png           | Bin 0 -> 1266 bytes
 .../UserInformations/classes.module.scss      |  27 ++++++++++++++++++
 .../Layouts/Users/UserInformations/index.tsx  |  26 +++++++++++++++--
 3 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/front/Assets/images/warning.png

diff --git a/src/front/Assets/images/warning.png b/src/front/Assets/images/warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca12222625d34f0e15cd7977b87b68b316ddb589
GIT binary patch
literal 1266
zcmV<O1P%L%P)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1cymPK~#7F<(fNe
z6G0G$|2+ah6eLK9hY-j>0TM_F4FyOLI;e<gC<z4;T_|W#jOY-BX`vvLG&mKH3R6H!
zB7p=2a6plOkZ>pv=HX@L_AWWwclJImeuPhQ&Ud-j@0s15*&Se&Bakt&G&~HfAB87J
zAmu1Mf<B;Q$Tghmho1_)MHw|QC-MtrWK1Rkm8f-N5Mq*cBSAJ)=u@Wq%!tzqcaZ^3
z0s~>*x=BcJ3HGAW@aYL<Nbf3H)`ull0#{gAGeQ<n^X}RRH5MpKTgJ(S?w}LG>hbBh
z1yk467O1Q?I0cDI=q3V1)T-pRm5Sc!8pzVN9Jxsessrf-d}<yibX>Nrz);*1G<Wme
zMoVN%fjulPqOHhOfqft@qNT`0fkB5N24A4}#YN0QR!<~#JYM4I+*|gKIA%0_=O&sg
zNUk|Su6YM8tlbD~JEedA??vGIE8xc`I3Z<T<iE_s57i0Gq}>f21diTUB2D=H9e9=p
z7GJ@E3c2d;xU1H?s8>6OZir*}nxiz-4jq64oXOM$B1;wwt@j?bxQL76Zpk_;4lErO
zwJGc5B2C=FL-oR~SUW`R^<->6w4}Yr$chEtS+?NJR<>Rarlg5`eFJ!NL+>8@F9Z87
z*B^7U<dPMGHW>7r-4d5}zFV6lD{dI$FRGIf@-$4zN?fb!Ttte$lfj1nkb8cENq%Q5
zZu1ef{rWupob22+aMLy9o-~(&i`tiM*a;kaU@q?9HDKgAu<NYqSiU?-K99xo&mR34
z%$h-92MP2k*R55d$$EOwV{%bxmgBMYY}|71h2-x^q`B*MgXkzgj(YTK9XGlrX(+I1
zbM0V}^AF*K5F^~lxXrD!8|Pg3<9ctlV1H!|rVOukfjJMWoX!c1w^i4?&w$Pee0fC)
zW1%b2>!!fjgpW?N!;kmWr?dDZP*zr86|EVLfcAs~{JYzoaZ@Qi4AAP$90l9<Gu8u|
z3GU(P<)E3Pp=W2>U!!~PR3xWMauzOd_|zC2ClSvG;&Emg9CSB^X68XfnFI<mf%A`=
zAC!~<G{SBf@%C2hbJH@4#g{Nc%!+W5m$UgEPnXV^3ap6n&zrn(a>mSx{2+dysU=xh
zXT(v<!&Ba<aZt*eFvV768d-{CJW&cZYVTJWssO-@tVCulj>f-eB{)7WTA<-#3O1y*
z$$8Cb!|f;QkGY8>#IzV+I3IkA4q0_JaWb9wbrA<1;CDyMX-lza(Ah{~-WDU$+|`6^
z#MPCZGz8l}i?C^n5iTOL5U1km>G*+!<+Gqnqy!f@?qruW3AJ>l`P(7HL}Qsr$_nq+
zBK>C){e;9#k^kIO;*ydNRtwHCYG?7)J2#UkP<1$7UR~JpghdF+g+c#s8A(LH7Xr1N
zlL>A>H$rc@>#S}mm)4|{5?MXOJr%kQze7+HqgPsKQBE0@nRKI$hB`iZzOhWC9hL>L
z)GmPu>)_msFogVB)GeWm<5<!h2<0q<SEzEx7AIj5navl5uFFf|V{j=-mtu}qIg6a5
cx(JK-2TS%E67VGX9{>OV07*qoM6N<$g2zKcL;wH)

literal 0
HcmV?d00001

diff --git a/src/front/Components/Layouts/Users/UserInformations/classes.module.scss b/src/front/Components/Layouts/Users/UserInformations/classes.module.scss
index 3b68e9c8..2bac3ec5 100644
--- a/src/front/Components/Layouts/Users/UserInformations/classes.module.scss
+++ b/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 {
diff --git a/src/front/Components/Layouts/Users/UserInformations/index.tsx b/src/front/Components/Layouts/Users/UserInformations/index.tsx
index e029c46c..13e883f4 100644
--- a/src/front/Components/Layouts/Users/UserInformations/index.tsx
+++ b/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>