From ceb3cb666f30bed0e02e0e79d11cd0ad06216c6b Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Fri, 8 Sep 2023 11:26:37 +0200
Subject: [PATCH 1/7] refactor login header style in .login__header and
 keepRatio first child in .login__container

---
 src/components/accueil/NewHome.tsx | 18 +++---------------
 src/styles/login.scss              | 24 +++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/accueil/NewHome.tsx b/src/components/accueil/NewHome.tsx
index 0bfa829ea..a68f3fd46 100644
--- a/src/components/accueil/NewHome.tsx
+++ b/src/components/accueil/NewHome.tsx
@@ -26,24 +26,12 @@ export const NewHome = () => {
   return (
     <div className="bg-gradiant" style={{ display: 'flex', flexDirection: 'column' }}>
       <>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
-            gap: '10px',
-            background: 'white',
-            width: '95%',
-            height: '50px',
-            maxWidth: '1200px',
-            borderRadius: '10px',
-            marginBottom: '2rem',
-          }}
-        >
+        <div className="login__header">
           <Logo style={{ width: '25%', height: 'auto', margin: '0 10px', alignSelf: 'center' }} />
           <h1 style={{ placeSelf: 'center' }}>Vous êtes...</h1>
         </div>
-        <KeepRatio ratio={0.45} width="95%" maxWidth="1200px" minHeight="400px" className="login__container">
-          <div className="text-center" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '2rem', placeItems: 'center' }}>
+        <KeepRatio ratio={0.45} width="95%" maxWidth="1200px" height="fit-content" minHeight="400px" className="login__container">
+          <div className="flex-responsive text-center">
             {/* Block Teacher */}
             <div style={{ display: 'flex', flexDirection: 'column', height: '300px' }}>
               <h2>Professeur des écoles</h2>
diff --git a/src/styles/login.scss b/src/styles/login.scss
index 911e10128..80708090d 100644
--- a/src/styles/login.scss
+++ b/src/styles/login.scss
@@ -1,12 +1,34 @@
 @import 'variables';
 
+.login__header{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  background: white;
+  width: 95%;
+  height: 50px;
+  max-width: 1200px;
+  border-radius: 10px;
+  margin-bottom: 2rem;
+}
+
 .login__container {
   background-color: white;
   border-radius: 10px;
-  overflow: hidden;
   display: flex;
+  min-height: 100%;
+  
+  .text-center{
+    display: flex; 
+    justify-content: space-around;
+    align-items: center; 
+    gap: 4rem; 
+    padding: 2rem 0;
+  }
 }
 
+
+
 .login__panel {
   display: inline-flex;
   width: 50%;

From 0ac2cb1e0bd936a8eac920173a01d5694956c46f Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Fri, 8 Sep 2023 11:27:49 +0200
Subject: [PATCH 2/7] add height props to {children} first parent in keepRatio
 component

---
 src/components/KeepRatio.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/KeepRatio.tsx b/src/components/KeepRatio.tsx
index 30a14042c..236440930 100644
--- a/src/components/KeepRatio.tsx
+++ b/src/components/KeepRatio.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 interface KeepRatioProps {
   ratio: number;
   width?: string | number;
+  height?: string | number;
   maxWidth?: string | number;
   minHeight?: string | number;
   className?: string;
@@ -10,6 +11,7 @@ interface KeepRatioProps {
 
 export const KeepRatio = ({
   width = '100%',
+  height = '100%',
   maxWidth = '100%',
   minHeight = 0,
   ratio,
@@ -20,7 +22,7 @@ export const KeepRatio = ({
     <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
       <div style={{ width, maxWidth }}>
         <div style={{ width: '100%', paddingBottom: `${ratio * 100}%`, minHeight, position: 'relative' }}>
-          <div className={className} style={{ position: 'absolute', top: '0', left: '0', width: '100%', height: '100%' }}>
+          <div className={className} style={{ position: 'absolute', top: '0', left: '0', width: '100%', height }}>
             {children}
           </div>
         </div>

From 55d0f7fb35f525df4e87a1de3427445e81507834 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Fri, 8 Sep 2023 11:28:42 +0200
Subject: [PATCH 3/7] add .flex-responsive for change flex-direction behaviour
 depands on media queries

---
 src/styles/base.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/styles/base.scss b/src/styles/base.scss
index 61bb1f492..53e923813 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -135,6 +135,10 @@ main {
   padding-bottom: $verticalSpacing;
 }
 
+.flex-responsive{
+  flex-direction: row;
+}
+
 @include for-small-screen {
   .header__container {
     margin: math.div($verticalSpacing, 2) math.div($horizontalSpacing, 2) 0 math.div($horizontalSpacing, 2);
@@ -178,6 +182,10 @@ main {
   .vertical-bottom-margin {
     margin-bottom: math.div($verticalSpacing, 2);
   }
+
+  .flex-responsive{
+    flex-direction: column;
+  }
 }
 
 @include for-laptop-screen-up {

From c8375fb049eba98165270b8f6607df8a4377f044 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Fri, 8 Sep 2023 11:29:29 +0200
Subject: [PATCH 4/7] change height, minHeight, backgroudAttachment and
 overflow of .bg-gradiant

---
 src/styles/globals.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 4e3546a55..2599867dd 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -150,10 +150,12 @@ a.text--success:hover {
 // misc
 .bg-gradiant {
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
   background: rgb(224, 195, 252);
   background: -o-linear-gradient(315deg, rgba(224, 195, 252, 1) 0%, rgba(142, 197, 252, 1) 100%);
   background: linear-gradient(135deg, rgba(224, 195, 252, 1) 0%, rgba(142, 197, 252, 1) 100%);
+  background-attachment: fixed;
+  overflow: auto;
   display: flex;
   justify-content: center;
   align-items: center;

From 05eb7257de3cfde492274aa33271e7cbdea7f9a2 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Fri, 8 Sep 2023 11:45:10 +0200
Subject: [PATCH 5/7] fix login style bug by nested class in .login__container
 .text-center by .flex-responsive

---
 src/styles/login.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/login.scss b/src/styles/login.scss
index 80708090d..85bd0dd31 100644
--- a/src/styles/login.scss
+++ b/src/styles/login.scss
@@ -17,8 +17,8 @@
   border-radius: 10px;
   display: flex;
   min-height: 100%;
-  
-  .text-center{
+
+  .flex-responsive{
     display: flex; 
     justify-content: space-around;
     align-items: center; 

From ea5a63549a4815b9c68c80302ea3bc0cf3a96a6d Mon Sep 17 00:00:00 2001
From: charlinedev <charline.barbelette@sciam.fr>
Date: Thu, 28 Sep 2023 14:23:38 +0200
Subject: [PATCH 6/7] comment label

---
 src/components/WelcomeModal/FirstPhase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WelcomeModal/FirstPhase.tsx b/src/components/WelcomeModal/FirstPhase.tsx
index f4947af9a..7bc575316 100644
--- a/src/components/WelcomeModal/FirstPhase.tsx
+++ b/src/components/WelcomeModal/FirstPhase.tsx
@@ -96,7 +96,7 @@ export const FirstPhase = () => {
     setIsLoading(false);
   };
 
-  const label = <span style={{ color: 'red' }}>**</span>;
+  //const label = <span style={{ color: 'red' }}>**</span>;
 
   const sendError = (error: 'village' | 'country') => async () => {
     // do not ask twice

From cad2d8c6f3bef2276f4e51a8123ed043c15a72cd Mon Sep 17 00:00:00 2001
From: charlinedev <charline.barbelette@sciam.fr>
Date: Thu, 28 Sep 2023 15:48:54 +0200
Subject: [PATCH 7/7] Remove label

---
 src/components/WelcomeModal/FirstPhase.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/WelcomeModal/FirstPhase.tsx b/src/components/WelcomeModal/FirstPhase.tsx
index 7bc575316..7267e2857 100644
--- a/src/components/WelcomeModal/FirstPhase.tsx
+++ b/src/components/WelcomeModal/FirstPhase.tsx
@@ -96,8 +96,6 @@ export const FirstPhase = () => {
     setIsLoading(false);
   };
 
-  //const label = <span style={{ color: 'red' }}>**</span>;
-
   const sendError = (error: 'village' | 'country') => async () => {
     // do not ask twice
     if (updateAsked[error]) {