avancement configuration

Site Web/client/src/components/Configurations/ConfigurationDuProfil.js

@@ -1,24 +1,51 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import PP  from "../../assets/img/unknown.png";
 import { NavLink } from "react-router-dom";
 
 
 const ConfigurationDuProfil = ()=>{
+    const userData =  useSelector((state) => state.pictures.pictures);
+    const [pseudo, setPseudo] = useState('');
+    const [nomUtilisateur,  setNomUtilisateur] = useState('');
+    
+
+
     return(
 
-        <div>
-        <h2>Modifucation  du Profil</h2>
-        <div className='ligneHorizontal'>
-            <img src={PP}/>
-            <div>
-                <span>Pseudo : Pseudo</span>
-                <span>Nom d'utilisateur : @Pseudo</span>
+    <div className='modificationDuProfilBackgroud'>
+        <h2 className='ligneHorizontal' >Modifucation  du Profil</h2>
+        <div className='modificationDuProfil' >
+            <img src={PP} className="imageDeProfil"/>
+                <span>Pseudo: </span>
+                <div className='modificationDuProfilText'>
+                <div className="inputbox">
+                    <input 
+                        type="pseudo" 
+                        name="pseudo" 
+                        id="pseudo" 
+                        value={userData.pseudo}
+                        onChange={(e) => setPseudo (e.target.value)} 
+
+                    />
+
+                </div>
+                <div className="inputbox">
+                    <span>Nom d'utilisateur</span>
+                    <input 
+                        type="nomUtilisateur" 
+                        name="nomUtilisateur" 
+                        id="nomUtilisateur" 
+                        onChange={(e) => setNomUtilisateur (e.target.value)} 
+                        value={userData.pseudo}
+                    />
+                </div>
             </div>
         </div>
-        <h2>Acces au dossiers personnel</h2>
-        <div className='ligneHorizontal'/>
-        <div >
-        <caption> Rendre vos dossiers prives</caption>
+        <h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
+        <div className='accesDossiersPerso'>
+            <input type="checkbox" id="accesDossiersPerso" name='cocher' />
+            <label for="cocher">Cocher si oui</label>
         </div> 
     </div>
 

Site Web/client/src/pages/Configuration.js

@@ -3,7 +3,7 @@ import React, {useState} from 'react';
 import ConfigurationDuProfil from '../components/Configurations/ConfigurationDuProfil';
 import ConfigurationDuCompte from '../components/Configurations/ConfigurationDuCompte.js';
 import PolitiqueDeConfidentialite from '../components/Configurations/PolitiqueDeConfidentialite';
-
+import Navbar from '../components/Navbar';
 function Configuration(){
 
         const [ConfigurationCompte, setConfigurationDuCompte] = useState(false);
@@ -28,7 +28,7 @@ function Configuration(){
         };        
     return(
         <>
-
+        <Navbar />
             <div className='boutonDeConfigurations'>
             <button onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} >
             Configuration du profil
@@ -40,7 +40,7 @@ function Configuration(){
             Politique de confidentialite
             </button>
             </div>
-            <div className='ligneVertical'/>
+            
             
             {ConfigurationProfil &&<ConfigurationDuProfil/>}
             {ConfigurationCompte &&<ConfigurationDuCompte/>}

Site Web/client/src/styles/_settings.scss

@@ -8,6 +8,7 @@ $color-5: #AABBCC;
 
 
 
+
 // $color-1: #4cbfa6;
 // $color-2: #f6ebf4;
 // $color-3: #553283ef;

Site Web/client/src/styles/component/ConfigurationDuProfil.scss

@@ -0,0 +1,43 @@
+
+.modificationDuProfilBackgroud{
+    // background: $color-6;
+    
+}
+
+.modificationDuProfil{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 10%;
+}
+
+ .modificationDuProfilText{
+    display: flex;
+    flex-direction: column;
+    padding-left:5%;
+    width: 88%;
+    font-size: medium;
+}
+
+span{
+    margin: 1%;
+
+}
+
+.imageDeProfil{
+    width: 15%;
+}
+
+.accesDossiersPerso{
+    display: flex;
+    align-items: row;
+    margin-left:10%;
+    width:80% ;
+    
+    
+}
+
+
+input{
+    margin-right: 0.5%;
+}

Site Web/client/src/styles/component/_navbar.scss

@@ -17,9 +17,9 @@ nav{
     justify-content: space-between;
 }
 
-.logo{
-    //margin-right: 250px;
-}
+// .logo{
+//     //margin-right: 250px;
+// }
 
 
 

Site Web/client/src/styles/index.scss

@@ -5,3 +5,4 @@
 @import './component/poste';
 @import './pages/configuration';
 @import './component/ajoutLien';
+@import'./component/ConfigurationDuProfil.scss';

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

@@ -1,20 +1,34 @@
-.ligneVertical{
-    border-right: thick solid $color-1;
-    height:85%;
-    width: 1%;
-}
+
 .boutonDeConfigurations{
-    align-items: center;
-button{
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    
+    button{
         padding: 1%;
+        margin-bottom: 1%;
         margin-top: 2%;
-    margin-left: 5%;
-    width: 15%;
-}
+        margin-left: 6%;
+        width: 16%;
+        max-width: 200px;
+        background-color: $color-3;
+        border: 2px solid $color-4;
+        border-radius: 20px;
+    }
+    button:hover  {
+        background-color: $color-1;
+        border-color: black;
+        
+    }
+
 }
+
+
 .ligneHorizontal{
-    border-top: thick solid $color-1;
-    width: 78%;
+    border-bottom: thick solid $color-1;
+    width: 84%;
     height: 1%;
+    margin-bottom: 2%;
+    margin-top: 2%;
 }