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>
-        <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/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;
@@ -8,30 +7,21 @@
     --navbar-transition-speed: .2s;
     --primary-color:#7C4DFF;
     --navbar-logo-background-color:#e2dfe4;
-}
-
-html, body {
+  }
+  
+  html, body {
     margin:0;
     font-family: 'Source Sans Pro';
     font-size:16px;
-}
-main {
+  }
+  
+  main {
     padding: 1rem 4rem;
     margin-left: 5rem;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-
-}
-.postInMain{
-    width: 80%;
-}
-.RightBar{
-    width: 20%;
-    height: 100px;
-}
-  
-.navbar {
+    text-align: justify;
+  }
+  
+  .navbar {
     width:5rem;
     position:fixed;
     top:0px;
@@ -40,13 +30,13 @@ main {
     background:var(--navbar-background-color);
     box-shadow: rgba(12,43, 30, 0.2) 0 4px 14px;
     transition: width var(--navbar-transition-speed) ease;
-}
-
-.navbar:hover {
+  }
+  
+  .navbar:hover {
     width:15rem;
-}
-
-.navbar-menu {
+  }
+  
+  .navbar-menu {
     list-style: none;
     padding:0;
     margin:0;
@@ -54,104 +44,104 @@ main {
     flex-direction: column;
     align-items: center;
     height:100%;
-}
-
-.navbar-item {
+  }
+  
+  .navbar-item {
     width: 100%;
     border-bottom:solid 1px var(--navbar-separator-color);
     transition: background-color var(--navbar-transition-speed);
-}
-
-.navbar-item:hover {
+  }
+  
+  .navbar-item:hover {
     background-color:var(--navbar-item-hovered-color);
-}
-
-.navbar-item:last-child {
+  }
+  
+  .navbar-item:last-child {
     margin-top:auto;
-}
-
-.navbar-link {
+  }
+  
+  .navbar-link {
     display:flex;
     align-items: center;
     justify-content: flex-start;
     height:5rem;
     width:100%;
     text-decoration: none;
-}
-
-.navbar-icon {
+  }
+  
+  .navbar-icon {
     text-align: center;
     font-size: 1.5rem;
     min-width: 2rem;
     margin: 0 1.5rem;
     color:var(--navbar-icon-color);
     transition:var(--navbar-transition-speed);
-}
-
-.navbar-item:hover .navbar-icon {
+  }
+  
+  .navbar-item:hover .navbar-icon {
     color:var(--primary-color);
-}
-
-.navbar-title {
+  }
+  
+  .navbar-title {
     color:var(--navbar-text-color);
-}
-
-.navbar:not(:hover) .navbar-title {
+  }
+  
+  .navbar:not(:hover) .navbar-title {
     display:none;
-}
-
-.logo {
+  }
+  
+  .logo {
     background:var(--navbar-logo-background-color);
-}
-
-.logo .navbar-title {
+  }
+  
+  .logo .navbar-title {
     font-size:1.5rem;
     font-weight:bold;
     margin-left:1.5rem;
-}
-
-.navbar:hover .logo .navbar-icon {
+  }
+  
+  .navbar:hover .logo .navbar-icon {
     transform:rotate(180deg);
-}
-
-/*
-** RESPONSIVE
-*/
-
-@media only screen and (max-width:1024px) {
+  }
+  
+  /*
+  ** RESPONSIVE
+  */
+  
+  @media only screen and (max-width:1024px) {
     .navbar {
-        top:auto;
-        width:100%;
-        bottom:0px;
+      top:auto;
+      width:100%;
+      bottom:0px;
     }
-
+  
     .navbar:hover {
-        width:100%;
+      width:100%;
     }
-
+  
     .navbar-menu {
-        flex-direction: row;
+      flex-direction: row;
     }
-
+  
     .logo {
-        display:none;
+      display:none;
     }
-
+  
     main {
-        margin-left:0;
-        margin-bottom:5rem;
+      margin-left:0;
+      margin-bottom:5rem;
     }
-
+  
     .navbar:hover .navbar-title {
-        display:none;
+      display:none;
     }
-
+  
     .navbar-icon {
-        min-width:auto;
-        margin:0;
+      min-width:auto;
+      margin:0;
     }
-
+  
     .navbar-link {
-        justify-content: center;
+      justify-content: center;
     }
-}
+  }

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;
-    width: 78%;
+    border-bottom: thick solid $color-1;
+    width: 84%;
     height: 1%;
+    margin-bottom: 2%;
+    margin-top: 2%;
 }