post

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

@@ -1,4 +1,5 @@
-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";
 import { useSelector } from 'react-redux';
@@ -8,19 +9,39 @@ const ConfigurationDuProfil = ()=>{
     const userData = useSelector((state) => state.userReducer)
     return(
 
-        <div>
+    <div className='modificationDuProfilBackgroud'>
-        <h2>Modifucation  du Profil</h2>
+        <h2 className='ligneHorizontal' >Modifucation  du Profil</h2>
-        <div className='ligneHorizontal'>
+        <div className='modificationDuProfil' >
-            <img src={PP}/>
+            <img src={PP} className="imageDeProfil"/>
-            <div>
+                <span>Pseudo: </span>
-                <span>Pseudo : Pseudo</span>
+                <div className='modificationDuProfilText'>
-                <span>Nom d'utilisateur : @Pseudo</span>
+                <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>
+        <h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
-        <div className='ligneHorizontal'/>
+        <div className='accesDossiersPerso'>
-        <div >
+            <input type="checkbox" id="accesDossiersPerso" name='cocher' />
-        <caption> Rendre vos dossiers prives</caption>
+            <label for="cocher">Cocher si oui</label>
         </div> 
     </div>
 

Site Web/client/src/components/Post/Post.js

@@ -12,6 +12,9 @@ const Post = ( { post } ) => {
     const usersData = useSelector((state) => state.users.users);
     const userData = useSelector((state) => state.user.user);
 
+
+    
+
     useEffect(() => {
         !isEmpty(usersData[0]) && setIsLoading(false)
     })

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,9 +28,8 @@ function Configuration(){
         };        
     return(
         <>
-
+        <Navbar />
             <div className='boutonDeConfigurations'>
-
             <button onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} >
             Configuration du profil
             </button>
@@ -40,9 +39,9 @@ function Configuration(){
             <button onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}>
             Politique de confidentialite
             </button>
-            
-            <div className='ligneVertical'/>
             </div>
+            
+            
             {ConfigurationProfil &&<ConfigurationDuProfil/>}
             {ConfigurationCompte &&<ConfigurationDuCompte/>}
             {PolitiqueConfidentialite &&<PolitiqueDeConfidentialite/>}

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

@@ -1,4 +1,3 @@
-
 :root {
     --navbar-background-color: #f2f2f2;
     --navbar-item-hovered-color:white;
@@ -15,20 +14,11 @@ html, body {
     font-family: 'Source Sans Pro';
     font-size:16px;
   }
+  
   main {
     padding: 1rem 4rem;
     margin-left: 5rem;
-    display: flex;
+    text-align: justify;
-    justify-content: center;
-    flex-direction: row;
-
-}
-.postInMain{
-    width: 80%;
-}
-.RightBar{
-    width: 20%;
-    height: 100px;
   }
   
   .navbar {

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

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

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

@@ -1,17 +1,34 @@
-.ligneVertical{
+
-    border-right: thick solid $color-1;
-    height:85%;
-    width: 1%;
-}
 .boutonDeConfigurations{
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
     
+    button{
+        padding: 1%;
+        margin-bottom: 1%;
+        margin-top: 2%;
+        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;
         
-width: 20%;
+    }
 
 }
+
+
 .ligneHorizontal{
-    border-top: thick solid $color-1;
+    border-bottom: thick solid $color-1;
-    width: 78%;
+    width: 84%;
     height: 1%;
+    margin-bottom: 2%;
+    margin-top: 2%;
 }