change user page design

css/global.css

@@ -30,6 +30,10 @@ li a {
   text-decoration: none;
 }
 
+.totib {
+  margin-top: 6.5%;
+}
+
 li a:hover {
   background-color: #111;
 }
@@ -53,5 +57,5 @@ footer {
 }
 
 .less_padding {
-  padding: 16px 16px;
+  padding: 6px 14px;
 }

js/user.js

@@ -48,6 +48,6 @@ async function setuser() {
     avatar = "/images/default_avatar.png"
   }
   document.getElementById("user").innerText = `User: ${username}`;
-  document.getElementById("bio").placeholder = decodeURIComponent(bio);
+  document.getElementById("userBio").placeholder = "Bio: " + decodeURIComponent(bio);
   document.getElementById("avatarimg").src = avatar;
 }

views/user.html

@@ -17,13 +17,13 @@
       <h1>Welcome Back!</h1>
   </header>
   <main>
-    <div class="form_class info_div">
+    <div class="form_class info_div totib">
       <h2 id="user">User: USER</h2>
       <br>
       <img id="avatarimg" width=100 height=100>
       <br>
       <br>
-      <span class="bio">Bio: <input type="text" id="bio" disabled placeholder="wow such empty"></span>
+      <h4 id="userBio">Bio: </h4>
       <br>
       <button onclick="logout()">Logout</button>
     </div>