Ajout sur la page parametre

src/pages/Parametres.js

@@ -27,13 +27,18 @@ const Parametre = () => {
                     <div className="Compte">
                         <div className="one">
                             <div className="one_haut">
-
+                                sécurité
                             </div>
                             <div className="one_milieu">
-
+                                <p className="text_one_milieu">Signaler un problème</p>
+                                <div className='bouton_submit'>
+                                    <button className="bouton_modifierMDP" type="submit">Modifier le nom</button>
+                                </div>
                             </div>
                             <div className="one_bas">
-
+                            <div className='bouton_submit'>
+                                    <button className="bouton_modifierMDP" type="submit">Modifier le nom</button>
+                                </div>
                             </div>
                         </div>
                         <div className="two">

src/styles/components/_calendrier.scss

@@ -125,41 +125,42 @@ body {
                 }
             }
 
-        .Calendrier {
+            .Calendrier {
-            display: flex;
-            flex-direction: row;
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-            backdrop-filter: blur(3px);
-            -webkit-backdrop-filter: blur(15px);
-            width: 100%;
-            margin: 5px 10px 10px 5px;
-            text-align: center;
-
-            .mini_formulaire_evenement {
                 display: flex;
                 flex-direction: row;
-                margin-top: 10px;
+                background: rgba(255, 255, 255, 0.3);
-                height: 100px;
+                border-radius: 15px;
+                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                backdrop-filter: blur(3px);
+                -webkit-backdrop-filter: blur(15px);
+                width: 100%;
+                margin: 5px 10px 10px 5px;
+                text-align: center;
 
-                .bouton_ajout {
+                .mini_formulaire_evenement {
-                    width: 300px;
+                    display: flex;
-                    height: 50px;
+                    flex-direction: column;
-                    border-radius: 10px;
+                    margin-top: 10px;
-                    border: 0.5px solid;
+                    height: 100px;
-                    border: 0;
+
-                    background-color: rgba(163, 163, 163, 0.371);
+                    .bouton_ajout {
-                    border: 1px solid rgba(255,255,255,0.1);
+                        width: 300px;
-                    backdrop-filter: blur(30px);
+                        height: 50px;
-                    color: rgb(255, 255, 255);
+                        border-radius: 10px;
-                    cursor: pointer;
+                        border: 0.5px solid;
-                    font-size: 15px;
+                        border: 0;
-                    &:hover{
+                        background-color: rgba(163, 163, 163, 0.371);
-                        background-color: rgba(114, 114, 114, 0.371);   
+                        border: 1px solid rgba(255,255,255,0.1);
-                    }
+                        backdrop-filter: blur(30px);
-                    &:active{
+                        color: rgb(255, 255, 255);
-                        background-color:rgba(68, 68, 68, 0.972);   
+                        cursor: pointer;
+                        font-size: 15px;
+                        &:hover{
+                            background-color: rgba(114, 114, 114, 0.371);   
+                        }
+                        &:active{
+                            background-color:rgba(68, 68, 68, 0.972);   
+                        }
                     }
                 }
             }

src/styles/components/_parametre.scss

@@ -136,6 +136,8 @@ body {
 
                 .one {
                     display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
                     width: auto;
                     height: 28.5%;
 
@@ -144,6 +146,65 @@ body {
                     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
+
+                    .one_haut {
+                        display: flex;
+                        width: auto;
+                        height: 50%;
+                        margin: 0 25px;                        
+                        border-bottom: 1px solid grey;
+                    }
+
+                    .one_milieu {
+                        display: flex;
+                        width: auto;
+                        height: 17.5%;
+                        margin: 0 25px;                        
+                        border-bottom: 1px solid grey;
+
+                        .bouton_submit {
+                            display: flex;
+                            
+                            .bouton_modifierNom {
+                                width: 100px;
+                                height: 25px;
+                                background-color: rgb(190, 189, 189);
+                                border-radius: 5px;
+                                border-radius: 5px;
+                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                                cursor: pointer;
+    
+                                &:hover{
+                                    background-color: lightgrey; 
+                                }
+                            }
+                        }
+                    }
+
+                    .one_bas {
+                        display: flex;
+                        width: auto;
+                        height: 17.5%;
+                        background-color: red;
+
+                        .bouton_submit {
+                            display: flex;
+                            
+                            .bouton_modifierNom {
+                                width: 100px;
+                                height: 25px;
+                                background-color: rgb(190, 189, 189);
+                                border-radius: 5px;
+                                border-radius: 5px;
+                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                                cursor: pointer;
+    
+                                &:hover{
+                                    background-color: lightgrey; 
+                                }
+                            }
+                        }
+                    }
                 }
 
                 .two {
@@ -156,6 +217,7 @@ body {
                     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
+
                 }
 
                 .three {