$

src/components/AddBtn/AddBtn.scss

@@ -1,3 +1,5 @@
+@import "../../assets/styles/vars.scss";
+
 .add-btn-container {
     display: flex;
     position: fixed;
@@ -11,8 +13,8 @@
         height: 100%;
         border-radius: 50px;
         border: none;
-        background: rgb(123, 106, 156);
-        color: white;
+        background: $primary;
+        color: $white;
         font-weight: bold;
         font-size: 15px;
 

src/components/NavBar/NavBar.jsx

@@ -4,47 +4,51 @@ import { logout } from "../../api";
 import { Link } from "react-router-dom/";
 
 export default function NavBar() {
-    const { user } = useAuth();
-    console.log(user);
+  const { user } = useAuth();
 
-    const onLogout = () => {
-        logout().then((res) => {
-            if (res === "Ok") {
-                window.location.reload();
-            }
-        });
-    };
+  const onLogout = () => {
+    logout().then((res) => {
+      if (res === "Ok") {
+        alert("etes vous sur de vouloir quitter");
+        window.location.reload();
+      }
+    });
+  };
 
-    return (
-        <nav id="nav-container">
-            <ul id="leafs-container">
-                <li className="leaf">
-                    <Link to="/">Accueil</Link>
-                </li>
+  return (
+    <nav id="nav-container">
+      <ul id="leafs-container">
+        {user && (
+          <li className="leaf">
+            <Link to="/">Accueil</Link>
+          </li>
+        )}
 
-                <li className="leaf">
-                    <Link to="rooms">Pieces</Link>
-                </li>
+        {user && (
+          <li className="leaf">
+            <Link to="rooms">Pieces</Link>
+          </li>
+        )}
 
-                {user ? (
-                    <div className="leaf-into">
-                        <li className="leaf">
-                            <Link to="profile">Profile</Link>
-                        </li>
+        {user ? (
+          <div className="leaf-into">
+            <li className="leaf">
+              <Link to="profile">Profile</Link>
+            </li>
 
-                        <button className="leaf-btn" onClick={onLogout}>
-                            Deconnexion
-                        </button>
-                    </div>
-                ) : (
-                    <li className="leaf-into">
-                        <span className="leaf-txt">
-                            <Link to="login">Connexion</Link>&nbsp;/&nbsp;
-                            <Link to="register">Inscription</Link>
-                        </span>
-                    </li>
-                )}
-            </ul>
-        </nav>
-    );
+            <button className="leaf-btn" onClick={onLogout}>
+              Deconnexion
+            </button>
+          </div>
+        ) : (
+          <li className="leaf-into">
+            <span className="leaf-txt">
+              <Link to="login">Connexion</Link>&nbsp;/&nbsp;
+              <Link to="register">Inscription</Link>
+            </span>
+          </li>
+        )}
+      </ul>
+    </nav>
+  );
 }

src/components/NavBar/NavBar.scss

@@ -1,14 +1,16 @@
+@import "../../assets/styles/vars.scss";
+
 #nav-container {
-    background: rgb(123, 106, 156);
+    background: $primary;
     padding: 15px;
 
     a {
         font-weight: bold;
-        color: white;
+        color: $white;
         text-decoration: none;
 
         &:hover {
-            border-bottom: 1.5px solid white;
+            border-bottom: 1.5px solid $white;
         }
     }
 
@@ -17,14 +19,26 @@
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        color: white;
+        color: $white;
         gap: 50px;
         align-items: center;
         justify-content: center;
         padding: 0;
 
         .leaf-into {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 2px;
+
             .leaf-btn {
+                background: $white;
+                border: none;
+                padding: 5px;
+                &:hover {
+                    cursor: pointer;
+                }
             }
 
             .leaf {

src/components/Stats/Stats.jsx

@@ -0,0 +1,3 @@
+export default function Stats({ chart = null, datas }) {
+  return <div>{chart ? chart : null}</div>;
+}

src/components/StylizedBtn/StylizedBtn.jsx

@@ -0,0 +1,13 @@
+import "./StylizedBtn.scss";
+
+export default function StylizedBtn({ text, handle, perso_style = null }) {
+  return (
+    <button
+      className="stylized-btn"
+      style={perso_style ? perso_style : null}
+      onClick={handle}
+    >
+      {text}
+    </button>
+  );
+}

src/components/StylizedBtn/StylizedBtn.scss

@@ -0,0 +1,17 @@
+@import "../../assets/styles/vars.scss";
+
+.stylized-btn {
+    background: $primary;
+    border: none;
+    padding: 5px;
+    width: 50px;
+    color: $white;
+    font-weight: bold;
+    height: 30px;
+
+    &:hover {
+        cursor: pointer;
+        transform: scale(1.05);
+        transition: 0.2s;
+    }
+}