bouton déconnexion ajouté

src/pages/Parametres.js

@@ -49,7 +49,7 @@ const Parametre = () => {
                         </div>
                         <div className="two">
                             <div className="two_haut">
-                                coucou
+                                Général
                             </div>
                             <div className="two_bas">
                                 <p className="text_two_bas">Mode sombre</p>
@@ -59,13 +59,18 @@ const Parametre = () => {
                             </div>
                         </div>
                         <div className="three">
-                            coucou
+                            <p className="text_three_haut">Coucou</p>
+                            <div className="déconnexion">
+                                <p className="text_three">Déconnexion</p>
+                                <NavLink to="/">
+                                    <button id="bouton_deco" className="bouton" type="button" value="Déco">Se déconnecter</button>
+                                </NavLink>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </body>
-        // </ThemeContext.Provider>
     );
 };
 

src/styles/components/_parametre.scss

@@ -290,6 +290,7 @@ body {
 
                 .three {
                     display: flex;
+                    flex-direction: column;
                     width: auto;
                     height: 40%;
 
@@ -298,6 +299,40 @@ body {
                     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
+
+                    .text_three_haut {
+                        display: flex;
+                        margin: 10px;
+                    }
+
+                    .déconnexion {
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+                        margin-left: 10px;
+                        margin-right: 10px;
+                        padding: 10px;
+                        
+                        border-top: 1px solid black;
+
+                        .text_three {
+                            display: flex;
+                        }
+
+                        .bouton {
+                            width: 100px;
+                            height: 20px;
+                            background-color: rgb(190, 189, 189);
+                            border-radius: 5px;
+                            border-radius: 5px;
+                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
+                            cursor: pointer;
+
+                            &:hover{
+                                background-color: lightgrey; 
+                            }
+                        }
+                    }
                 }
             }
         }