Merge branch 'main' of https://github.com/anulax1225/skamkraft

css/profile.css

@@ -1,8 +1,10 @@
 #modal_profile
 {
+    width: 50%;
+    height: 45%;
     padding: 0;
-    color: rgb(0, 17, 255);
-    background-color: rgb(0, 17, 255);
+    background-color: rgba(0, 4, 255, 0.74);
+    border-width: 0px;
 }
 
 .profile-modal
@@ -12,8 +14,55 @@
     display: flex;
     flex-direction: column;
 }
-
+.profile-header
+{
+    font-size: 14px;
+}
+.profile-header button
+{
+    font-size: 25px;
+    width: 30px;
+    height: 30px;
+    background-color: transparent;
+    border-color: transparent;
+    float: right;
+}
+.logout-logo img{
+    z-index: -1;
+    position: absolute;
+    width: 7%;
+}
+.profile-footer{
+    display: flex;
+    flex-direction: column;
+}
 .profile-footer button
 {
-    background-color: red;
+    position: relative;
+    width: 63px;
+    height: 63px;
+    background-color: transparent;
+    border-color: transparent;
+}
+.profile-footer p
+{
+    color: red;
+    font-size: 22px;
+    margin-bottom: -1px;
+    margin-top: -9px;
+}
+.profile-footer button:hover
+{
+    cursor: pointer;
+}
+#btn-token{
+    background-color: grey;
+}
+#btn-token:hover{
+    background-color: transparent;
+    cursor: pointer;
+}
+.profile-header button:hover
+{
+    cursor: pointer;
 }

html/templates/modal_profile.html

@@ -1,5 +1,6 @@
 <div class="profile-modal">
     <div class="profile-header">
+        <button id="btn-close">X</button>
         <h1>Profile</h1>
     </div>
     
@@ -15,7 +16,10 @@
     </div>
     
     <div class="profile-footer">
-        <button id="btn-logout">Logout</button>
-        <button id="btn-close">X</button>
+        <p>Logout</p>
+        <div class="logout-logo">
+            <img src="/assets/menu/logout.png" alt="">
+            <button id="btn-logout"></button>
+        </div> 
     </div>
 </div>