From 581f39f72e7ba22b57197cf02fa2eb30f4649a6d Mon Sep 17 00:00:00 2001
From: Darius BERTRAND <dabertrand2>
Date: Tue, 10 Jan 2023 16:14:48 +0100
Subject: [PATCH] changement page connexion et inscription

---
 .../client/src/components/Log/Connexion.js    |   9 +-
 .../client/src/components/Log/Inscription.js  |  23 ++--
 .../component/_configurationDuProfil.scss     |   2 +-
 .../src/styles/pages/_homenavigation.scss     | 114 +++++++++---------
 4 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/Site Web/client/src/components/Log/Connexion.js b/Site Web/client/src/components/Log/Connexion.js
index 947ae562..b651e61a 100644
--- a/Site Web/client/src/components/Log/Connexion.js	
+++ b/Site Web/client/src/components/Log/Connexion.js	
@@ -40,27 +40,28 @@ const Connexion = (props) => {
                 <form className='cadre' action='' onSubmit={handleLogin} id="sign-up-form">
                     <h1>Connexion</h1>
                         <div className='inputbox'>
+                        <span>email</span>
                             <input 
                                 type="text" 
                                 name="email" 
                                 id="email" 
                                 onChange={(e) => setEmail (e.target.value)} 
                                 value={email}/>
-                            <span>email</span>
+                            <div className="email error"></div>
                         </div>
-                        <div className="email error"></div>
                         <br />
 
                         <div className="inputbox">
+                        <span>mot de passe</span>
                             <input 
                                 type="password" 
                                 name="password" 
                                 id="password" 
                                 onChange={(e) => setPassword (e.target.value)} 
                                 value={password}/>
-                            <span>mot de passe</span>
+                            <div className="password error"></div>
                         </div>
-                        <div className="password error"></div>
+
                         <br />
                         
                         <input type="submit" value="connexion" id='connexion' />
diff --git a/Site Web/client/src/components/Log/Inscription.js b/Site Web/client/src/components/Log/Inscription.js
index 22b0fd9c..251cb9b5 100644
--- a/Site Web/client/src/components/Log/Inscription.js	
+++ b/Site Web/client/src/components/Log/Inscription.js	
@@ -64,57 +64,52 @@ const Inscription = () => {
                     <form className="cadre" action='' onSubmit={handleRegister} >
                         <h1>Inscription</h1>
                         <div className="inputbox">
+                        <span>pseudo</span>
                             <input type="text"
                                     name="pseudo"
                                     id="pseudo"
                                     onChange={(e) => setPseudo(e.target.value)}
                                     value={pseudo}/>
-                            <span>pseudo</span>
+                          <div className='pseudo error'></div>
                         </div>
-                        <div className='pseudo error'></div>
                         <br />
-                        
                         <div className="inputbox">
+                        <span>email</span>
                             <input  type="text" 
                                     name="email"
                                     id="email"
                                     onChange={(e) => setEmail(e.target.value)}
                                     value={email}/>
-                            <span>email</span>
+                           <div className='password error'></div>
                         </div>
-                        <div className='email error'></div>
                         <br />
-
                         <div className="inputbox">
+                        <span>mot de passe</span>
                             <input  type="password"
                                     name="password"
                                     id="password"
                                     onChange={(e) => setPassword(e.target.value)}
                                     value={password}/>
-                            <span>mot de passe</span>
+                            <div className='password error'></div>
                         </div>
-                        <div className='password error'></div>
                         <br />
-
-                        
                         <div className="inputbox">
+                        <span>comfirmation mot de passe</span>
                             <input  type="password" 
                                     name="password"
                                     id="password-conf"
                                     onChange={(e) => setControlPassword(e.target.value)}
                                     value={controlPassword}/>
-                            <span>comfirmation mot de passe</span>
+                            <div className='password-confirm error'></div>
                         </div>
-                        <div className='password-confirm error'></div>
                         <br />
-                        
                         <div className="chexkboxConditionGenerale">
                           <input  type="checkbox" 
                                   name="terms"
                                   id="terms"/>
                           <span>J'accepte les <a href="/" target="_blank" rel='noopener noreferrer'>conditions générales</a></span>
+                          <div className="terms error"></div>
                         </div>
-                        <div className="terms error"></div>
                         <br />
                         
                         <input type="submit" value="inscription" id="inscription"/>
diff --git a/Site Web/client/src/styles/component/_configurationDuProfil.scss b/Site Web/client/src/styles/component/_configurationDuProfil.scss
index 254fa53d..35c35dbc 100644
--- a/Site Web/client/src/styles/component/_configurationDuProfil.scss	
+++ b/Site Web/client/src/styles/component/_configurationDuProfil.scss	
@@ -216,9 +216,9 @@ input{
   margin-top: 2%;
   border-radius: 20px;
   min-width: 80px;
-  background-color: $color-7;
   color: white;
   transition: all 1s;
+  background-color: $color-7;
 }
 
 
diff --git a/Site Web/client/src/styles/pages/_homenavigation.scss b/Site Web/client/src/styles/pages/_homenavigation.scss
index 047c9b20..ca3331f7 100644
--- a/Site Web/client/src/styles/pages/_homenavigation.scss	
+++ b/Site Web/client/src/styles/pages/_homenavigation.scss	
@@ -1,44 +1,47 @@
 
-
-.ul-profil{
-    list-style-type: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .button-form{
-        cursor: pointer;
-        border: 3px solid black;
-        border-radius: 20px;
-        padding: 10px 5%;
-        transition: 0.2s;
-        width: 96%;
-        text-align: center;
-        margin-top: 6%;
-    }
-    .active-btn {
-        background: $color-3;
-
-        &:hover {
-          background: $color-5;
-        }
-      }
-      .button-form:not(.active-btn) {
-        &:hover {
-          transform: translateX(3px);
-        }
-      }
-}
-
-
 .info-form-container{
     width: 20%;
-    border: 2px solid black;
+    background: $color-8;
+    border: 0.3px solid $color-5;
     border-radius: 0px 15px 15px 0px;
-    background-color: $color-3;
     p{
         line-height: 15px;
         letter-spacing: 1.01px;
     }
+    .ul-profil{
+      list-style-type: none;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .button-form{
+          cursor: pointer;
+          background: $color-8;
+          border: 0.3px solid $color-5;
+          border-radius: 15px;
+          padding:3% 4%;
+          width: 96%;
+          text-align: center;
+          margin-top: 6%;
+          transition: all 1s;
+      }
+      .active-btn{
+          background: $color-8;
+  
+          &:hover {
+            background: $color-5;
+          }
+        }
+        .button-form:not(.active-btn) {
+          &:hover {
+            transform: translateX(3px);
+          }
+        }
+  }
+
+
+
+
+
 }
 
 .profile-page{
@@ -61,52 +64,50 @@
 
 .cadre {
     padding: 5% 10%;
-    border: 2px solid black;
-    border-right: 0px solid black;
+    border: 0.3px solid $color-5;
+    border-right: 0px;
     border-radius: 15px 0px 0px 15px;
     background-color: $color-1;
     h1 {
       letter-spacing: 5px;
-      margin-bottom: 30%;
+      margin-bottom: 15%;
       font-weight: bold;
       text-align: center;
     }
     .inputbox {
       position: relative;
       width: 100%;
-      margin-top: 4%;
+      margin-top: 8%;
       input {
         width: 100%;
-        border: 2px solid #000;
+        border: 0.3px solid $color-5;
         outline: none;
-        background-color: $color-3;
+        background-color: $color-8;
         padding: 4%;
         border-radius: 10px;
         font-size: 1.1em;
       }
       span {
         position: absolute;
-        top: 12px;
-        left: 6%;
-        font-size: 1em;
+        top:-40%;
+        left: 4%;
         transition: 0.3s;
         font-family: sans-serif;
       }
+      .error{
+        font-size: small;
+        font-weight: 600;
+        color: red;
+        position: absolute;
+        left: 6%;
+
+      }
     }
     .chexkboxConditionGenerale{
       margin-top: 3px;
       padding: 5px;
     }
-    .error{
-      padding-left: 5px;
-      font-size: small;
-      font-weight: 600;
-      color: red;
-      position: absolute;
-    }
-    #connexion,#inscription{
-      margin-top: 5px;
-    }
+
 }
   
   
@@ -123,12 +124,12 @@
 }
   
 input[type="submit"], .buttonTEL{
-    border: none;
-    border-radius: 8px;
-    border: 2px solid #000;
-    background-color: $color-3;
+    border-radius: 10px;
+    background: $color-8;
+    border: 0.3px solid $color-5;
     width: 100%;
     height: 50px;
+    transition:  background-color 1s;
 }
 
 .buttonTEL{
@@ -136,6 +137,7 @@ input[type="submit"], .buttonTEL{
   margin-bottom: 15px;
 }
 
+
 input[type="submit"]:hover, .buttonTEL:hover{
     background-color: $color-5;
 }