avancement configuration

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

@@ -15,7 +15,7 @@ const ConfigurationDuCompte =()=>{
         <div>
         <h2 className='ligneHorizontal'>Modifucation information du compte</h2>
        
-            <div className="ModifucationInformationDuCompte">
+            <form className="ModifucationInformationDuCompte">
                         
                         <div className='ModificationInformationDuCompteText'>
                         <span>email</span>
@@ -46,7 +46,7 @@ const ConfigurationDuCompte =()=>{
                                 value={controlPassword}/>
                                 <div className='password error'></div>
                         </div>
-            </div>
+            </form>
         <div />
         <h2 className='ligneHorizontal'>Suppression du compte</h2>
         <div className='buttonSuppressionCompte'>
@@ -54,7 +54,7 @@ const ConfigurationDuCompte =()=>{
         <button>
             supprimer votre compte    
         </button>
-        <span>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</span>
+            <p className='buttonSuppressionText'>Note : action irreversible qui vous fera perdre toutes les données du compte en conséquence</p>
         </div> 
     </div>
     )

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

@@ -1,35 +1,45 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import PP  from "../../assets/img/unknown.png";
+import PLUS from "../../assets/img/plus.png";
 import { NavLink } from "react-router-dom";
 
 
 const ConfigurationDuProfil = ()=>{
+   
+   
     const userData = useSelector((state) => state.user.user);
     const [pseudo, setPseudo] = useState('');
     const [nomUtilisateur, setNomUtilisateur] = useState('');
+    const [displayAdd, setDisplayAdd] = useState(false);
+    const handleModals=()=>{
+        
+        
+    };
 
-    return(
 
+    return(
     <div className='modificationDuProfilBackgroud'>
         <h2 className='ligneHorizontal' >Modifucation du Profil</h2>
         <div className='modificationDuProfil' >
-            <img src={PP} className="imageDeProfilConfiguration imageDeProfil"/>
-
+            <button className='imageDeProfilConfigurationPlus imageDeProfil' >
+                <img src={PLUS} className="plusButton "/>
+                <img src={PP} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
+            </button>
             <div className='modificationDuProfilText'>
                 <span>Pseudo: </span>
                 <span>Nom d'utilisateur:</span>
             </div>
             <div className='modificationDuProfilText'>
                 
-                    <input 
+                <input className='inputConfiguration' 
                     type="nomUtilisateur" 
                     name="nomUtilisateur" 
                     id="nomUtilisateur" 
                     onChange={(e) => setNomUtilisateur (e.target.value)} 
-                        value={pseudo}
+                    value={nomUtilisateur}
                 />
-                    <input 
+                <input className='inputConfiguration'
                     type="pseudo" 
                     name="pseudo" 
                     id="pseudo" 
@@ -37,13 +47,35 @@ const ConfigurationDuProfil = ()=>{
                     onChange={(e) => setPseudo (e.target.value)} 
                 />
             </div>
-                
         </div>
         <h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
         <div className='accesDossiersPerso'>
+            <div className='accesDossiersPersoValidation'>
             <input type="checkbox" name='cocher' />
             <label for="cocher" class='textAccesDossiersPerso'>Cocher si oui</label>
             </div>
+            
+            
+            <div className='dossierPersonnel'>
+                <span>dossiers</span>
+
+            </div>
+        </div> 
+        
+        {displayAdd && (
+            <div className='popup-modificationProfil'>
+                <div className="modal">
+                <div className='imagesPopup'>
+                    <img src={PP} className="imageDeProfilConfigurationPlus imageDeProfil"/>
+                    <img src={PLUS} className="imageDeProfilConfigurationPlus imageDeProfil" onClick={handleModals}/>
+                </div >
+                <div className='buttonPopup'>
+                <button  onClick={() => setDisplayAdd(false)}>Retour</button>
+                <button /*onClick={handlePost} */>Valider</button>
+                </div>
+                </div>
+            </div>
+        )}
     </div>
 
     )

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

@@ -30,22 +30,24 @@ const Configuration = () => {
     return(
         <main className='mainConfig'>
         <Navbar />
+        <div className='configuration'>
             <div className='boutonDeConfigurations'>
-            <button onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} >
+            <a onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} >
             Configuration du profil
-            </button>
-            <button onClick={handleModals} id="ConfigurationDuCompte" className={ConfigurationCompte}>
+            </a>
+            <a onClick={handleModals} id="ConfigurationDuCompte" className={ConfigurationCompte}>
             Configuration du compte
-            </button>
-            <button onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}>
+            </a>
+            <a onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}>
             Politique de confidentialite
-            </button>
+            </a>
             </div>
             
             
             {ConfigurationProfil &&<ConfigurationDuProfil/>}
             {ConfigurationCompte &&<ConfigurationDuCompte/>}
             {PolitiqueConfidentialite &&<PolitiqueDeConfidentialite/>}
+        </div>
         </main>
     );
 }

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

@@ -5,6 +5,8 @@ $color-2: #CCF2F4;
 $color-3: #F4F9F9;
 $color-4: #AAAAAA;
 $color-5: #AABBCC;
+$color-6:  #5499c7  ;
+$color-7:  #1b4f72 ;
 
 
 
@@ -17,6 +19,8 @@ $color-5: #AABBCC;
 // $color-6: yellow;
 
 
+
+
 * {
     padding: 0;
     margin: 0;
@@ -24,7 +28,7 @@ $color-5: #AABBCC;
 }
 
 .imageDeProfil{
-    object-fit: none;
+    object-fit: cover;
     clip-path:circle(50%);
     
 }

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

@@ -25,9 +25,24 @@
         margin-left: 6%;
         width: 16%;
         max-width: 160px;
+        min-width: 120px;
         background-color: $color-3;
         border: 2px solid $color-4;
         border-radius: 20px;
+    }
+    .buttonSuppressionText{
+        margin-left: 2%;
+        max-width: 400px;
+        min-width: 200px;
+        width: 35%;
+        font-style: italic;
+        color: red;
+        opacity: 70%;
+        background-color: $color-3;
+        height: fit-content;
+        padding: 1%;
+        
+
     }
     button:hover  {
         background-color: $color-1;

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

@@ -1,8 +1,4 @@
 
-.modificationDuProfilBackgroud{
-    // background: $color-6;
-    
-}
 
 .modificationDuProfil{
     display: flex;
@@ -25,13 +21,38 @@ span{
 
 }
 
-.imageDeProfilConfiguration{
+
+.plusButton{
+    position: absolute; 
+    top: 50%; 
+    left: 50%; 
+    transform: translate(-50%, -50%); 
+    opacity: 0; 
+    transition: opacity 0.5s; 
+}
+
+
+.imageDeProfilConfigurationPlus {
+    position: relative;
     width: 15%;
+    max-width: 180px;
+    min-width: 130px;
+    border: none;
 
 }
+
+.imageDeProfilConfigurationPlus:hover .plusButton {
+    opacity:0.70;
+    
+}
+
 .imageDeProfilConfiguration:hover{
     filter: blur(1px);
+    opacity: 0.2; 
+    transition: opacity 1s; 
+    
 }
+
 .accesDossiersPerso{
     display: flex;
     align-items: row;
@@ -46,12 +67,111 @@ input{
     margin-bottom: 2%;
 }
 
+
+
 .accesDossiersPerso{
     display: flex;
+    flex-direction: column;
   
 }
+.accesDossiersPersoValidation{
+    flex-direction: row;
+}
 
 .textAccesDossiersPerso{
     margin-left:18px;
+    font-size: medium;
+    font-style: italic;
+    opacity: 70%;
+
+}
+
+.popup-modificationProfil{
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    position: fixed;
+    animation: popup 1s forwards;
+
+    @keyframes popup {
+      to {
+        backdrop-filter: blur(2px);
+      }
+    }
+
+    .modal {
+      position: absolute;
+      top: 10%;
+      left: 50%;
+      transform: translate(-100%);
+      background: $color-2;
+      padding: 25px;
+      border-radius: 20px;
+      box-shadow: 0 0 2px rgba(131, 130, 130, 0.356);
+      overflow: auto;
+      transform: scaleY(0);
+      transform-origin: center;
+      animation: modal .5s forwards;
+      max-width: 360px;
+      min-width: 320px;
+      border: 2px solid $color-4;
+      border-bottom-right-radius: 50px;
+
+      @keyframes modal {
+        to {
+          transform: scale(1) translate(-50%);
+        }
       }
 
+        &:hover {
+          transform: scale(1.07);
+        }
+      }
+
+
+        &::-webkit-scrollbar {
+          width: 2px;
+        }
+        &::-webkit-scrollbar-track {
+          background: $color-4;
+        }
+        &::-webkit-scrollbar-thumb {
+          background: $color-1;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+          background: #555;
+        }
+        .imagesPopup{
+            display: flex;
+            justify-content: space-between;
+            flex-direction: row;
+
+        }
+        .imagesPopup{
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+
+        }
+        .buttonPopup {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 5%;
+          margin-left: 8%;
+          margin-right: 8%;
+          button{
+            background: $color-4;
+            border-radius: 20px;
+
+            &:hover {
+                color: $color-3;
+                transform: translateX(2px);
+            }
+          }
+  
+        }
+        
+}

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

@@ -8,11 +8,11 @@
   p{
       max-width:85% ;
       min-width: 380px;
-        animation-duration: 3s;
-        animation-name: slidein;
+      animation-duration: 2s;
+      animation-name: slide;
       
         
-          @keyframes slidein {
+        @keyframes slide {
           from {
             margin-top: 100%;
             width: 50%;

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

@@ -10,6 +10,7 @@
 @import'./component/politiqueDeConfidentialite';
 @import './component/newPoste';
 
+
 @import './component/notif';
 @import './component/trends';
 

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

@@ -1,28 +1,46 @@
 
+
 .boutonDeConfigurations{
+
     display: flex;
-    justify-content: center;
+    justify-content: space-between;   
     flex-direction: row;
+    background-color: $color-7;
+    margin-left: -1%;
+    margin-right: 1%;
+    
+    
+    a{
 
-    button{
+        transition: margin-right 2s,1s;
+        transition: background-color linear 1s,1s;
         padding: 1%;
         margin-bottom: 1%;
-        margin-top: 2%;
-        margin-left: 6%;
-        width: 16%;
-        max-width: 200px;
+        margin-top: 1%;
+        margin-left: 3%;
+        margin-right: 3%;
+        width: 30%;
+        min-width: 140px;
         background-color: $color-3;
         border: 2px solid $color-4;
         border-radius: 20px;
+        text-align: center;
+        height: px;
     }
-    button:hover  {
-        background-color: $color-1;
-        border-color: black;
-        
+    a:hover  {
+        background-color: $color-6;
+        padding-right:14%;
+        color:$color-3;
     }
 
 }
 
+.configuration{
+    input:focus{
+        background-color:$color-3;
+    }
+    margin-left: 1%;
+}
 
 .ligneHorizontal{
     border-bottom: thick solid $color-1;
@@ -32,6 +50,13 @@
     margin-top: 2%;
 }
 
+
+// body{
+//     background-color: gray;
+// }
+
+
+
 .mainConfig{
     display: flex;
     flex-direction: column;