From d3be02e82ce822e4a18a4332e6b0ed156cb57c08 Mon Sep 17 00:00:00 2001
From: clverdoire <Clement.verdoire@etu.uca.fr>
Date: Tue, 6 Dec 2022 15:19:01 +0100
Subject: [PATCH] =?UTF-8?q?bouton=20d=C3=A9connexion=20ajout=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Parametres.js               | 11 ++++++---
 src/styles/components/_parametre.scss | 35 +++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/pages/Parametres.js b/src/pages/Parametres.js
index 3b81f26..41663aa 100644
--- a/src/pages/Parametres.js
+++ b/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>
     );
 };
 
diff --git a/src/styles/components/_parametre.scss b/src/styles/components/_parametre.scss
index f81045a..bb7880e 100644
--- a/src/styles/components/_parametre.scss
+++ b/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; 
+                            }
+                        }
+                    }
                 }
             }
         }