Update style on logout button

views/dashboardPage/components/components.css

@@ -115,6 +115,8 @@
     color: white;
     text-decoration: none;
     font-size: 20px;
+    border-radius: 5px;
+    padding: 10px;
 }
 
 .logout img{
@@ -122,6 +124,15 @@
     width: 25px;
 }
 
+.logout > *{
+    margin: 10px;
+}
+
+.logout:hover{
+    background: rgb(179, 191, 209);
+    color: black;
+}
+
 /* Minimized menu */
 .menuMinimized{
     width: 5vw;

views/dashboardPage/components/menu.ejs

@@ -37,7 +37,11 @@
     </button>
 
     <a class="logout" href="/logout">   
-        <img src="/shared/images/profile.png" alt="logout">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+            <polyline points="16 17 21 12 16 7"></polyline>
+            <line x1="21" y1="12" x2="9" y2="12"></line>
+        </svg>
         <p>Logout</p>
     </a>
 
@@ -54,10 +58,6 @@
 
                 document.querySelector("#max").style.display = "none";
                 document.querySelector("#min").style.display = "flex";
-
-                // setTimeout(()=>{
-                //     document.querySelector(".menuLogo").classList = "menuLogo menuLogoMin";
-                // }, 150);
             }else if(menu.classList.contains("menuMinimized")){
                 menu.classList = "menu";