changement page connexion et inscription

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>
                             <div className="email error"></div>
+                        </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>
                             <div className="password error"></div>
+                        </div>
+
                         <br />
                         
                         <input type="submit" value="connexion" id='connexion' />

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>
                           <div className='pseudo error'></div>
+                        </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>
                             <div className='password error'></div>
+                        </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>
                             <div className='password-confirm error'></div>
+                        </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>
                           <div className="terms error"></div>
+                        </div>
                         <br />
                         
                         <input type="submit" value="inscription" id="inscription"/>

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;
 }
 
 

Site Web/client/src/styles/pages/_homenavigation.scss

@@ -1,22 +1,31 @@
 
-
-.ul-profil{
+.info-form-container{
+    width: 20%;
+    background: $color-8;
+    border: 0.3px solid $color-5;
+    border-radius: 0px 15px 15px 0px;
+    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;
-        border: 3px solid black;
-        border-radius: 20px;
-        padding: 10px 5%;
-        transition: 0.2s;
+          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-3;
+      .active-btn{
+          background: $color-8;
   
           &:hover {
             background: $color-5;
@@ -27,18 +36,12 @@
             transform: translateX(3px);
           }
         }
-}
+  }
+
+
+
 
 
-.info-form-container{
-    width: 20%;
-    border: 2px solid black;
-    border-radius: 0px 15px 15px 0px;
-    background-color: $color-3;
-    p{
-        line-height: 15px;
-        letter-spacing: 1.01px;
-    }
 }
 
 .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;
       }
-    }
-    .chexkboxConditionGenerale{
-      margin-top: 3px;
-      padding: 5px;
-    }
       .error{
-      padding-left: 5px;
         font-size: small;
         font-weight: 600;
         color: red;
         position: absolute;
+        left: 6%;
+
       }
-    #connexion,#inscription{
-      margin-top: 5px;
     }
+    .chexkboxConditionGenerale{
+      margin-top: 3px;
+      padding: 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;
 }