meow :3

app/index.html

@@ -22,7 +22,7 @@
     <div class="topBar">
         <p tabindex="0" class="logo" id="burgerButton">Burgernotes</p>
         <button tabindex="0" class="logo hidden" style="font-size: 17px;margin-left: 0;" onclick="handleGesture()" id="backButton"><img src="/static/svg/arrow-back.svg"></button>
-        <img id="usernameBox" class="usernameBox" src="/static/svg/acct-settings.svg">
+        <button id="usernameBox" class="usernameBox"><div class="vcenter"><img src="/static/svg/acct-settings.svg"></div></button>
     </div>
 
     <div class="bottomBar">

static/css/style.css

@@ -278,16 +278,31 @@ body {
 }
 
 .topBar .usernameBox {
-    text-align: right;
     margin-left: auto;
     cursor: pointer;
     filter: invert(var(--invertdm));
+    margin-right: 5px;
+    height: 41px;
+    width: 41px;
+    line-height: 41px;
+    text-align: left;
+    font-size: 16px;
+    cursor: pointer;
+    margin-top: 5px;
+    background-color: var(--bar);
+    border-radius: 8px;
+    border: none;
+    transition: 0.125s;
 }
 
-.topBar img {
+.topBar .usernameBox:hover {
-    scale: 0.5;
+    background-color: var(--icon-button-hover);
 }
 
+.topBar .usernameBox img {
+    height: 22px;
+    filter: invert(var(--invertdm));
+}
 .notesBar {
     position: fixed;
     width: 180px;

static/js/main.js

@@ -10,7 +10,7 @@ if (localStorage.getItem("DONOTSHARE-password") === null) {
 }
 
 if (localStorage.getItem("CACHE-username") !== null) {
-    document.getElementById("usernameBox").innerText = localStorage.getItem("CACHE-username")
+    //document.getElementById("usernameBox").innerText = localStorage.getItem("CACHE-username")
 }
 
 let remote = localStorage.getItem("homeserverURL")
@@ -205,7 +205,7 @@ async function checknetwork() {
         if (response.status == 400) {
             displayError("Something went wrong! Signing you out...")
             closeErrorButton.classList.add("hidden")
-            usernameBox.innerText = ""
+            //usernameBox.innerText = ""
             setTimeout(function () {
                 window.location.replace("/logout")
             }, 2500);
@@ -261,13 +261,13 @@ function updateUserInfo() {
                 if (response.status === 500) {
                     displayError("Something went wrong! Signing you out...")
                     closeErrorButton.classList.add("hidden")
-                    usernameBox.innerText = ""
+                    //usernameBox.innerText = ""
                     setTimeout(function () {
                         window.location.replace("/logout")
                     }, 2500);
                 } else {
                     let responseData = await response.json()
-                    usernameBox.innerText = responseData["username"]
+                    //usernameBox.innerText = responseData["username"]
                     usernameThing.innerText = "Username: " + responseData["username"]
                     storageThing.innerText = "You've used " + formatBytes(responseData["storageused"]) + " out of " + formatBytes(responseData["storagemax"])
                     storageProgressThing.value = responseData["storageused"]

static/svg/acct-settings.svg

@@ -1 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#000000"><path d="M400-485q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM80-164v-94q0-35 17.5-63t50.5-43q72-32 133.5-46T400-424h23q-6 14-9 27.5t-5 32.5h-9q-58 0-113.5 12.5T172-310q-16 8-24 22.5t-8 29.5v34h269q5 18 12 32.5t17 27.5H80Zm587 44-10-66q-17-5-34.5-14.5T593-222l-55 12-25-42 47-44q-2-9-2-25t2-25l-47-44 25-42 55 12q12-12 29.5-21.5T657-456l10-66h54l10 66q17 5 34.5 14.5T795-420l55-12 25 42-47 44q2 9 2 25t-2 25l47 44-25 42-55-12q-12 12-29.5 21.5T731-186l-10 66h-54Zm27-121q36 0 58-22t22-58q0-36-22-58t-58-22q-36 0-58 22t-22 58q0 36 22 58t58 22ZM400-545q39 0 64.5-25.5T490-635q0-39-25.5-64.5T400-725q-39 0-64.5 25.5T310-635q0 39 25.5 64.5T400-545Zm0-90Zm9 411Z"/></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 7.5 1.019531 c -0.550781 0 -0.996094 0.445313 -0.996094 0.996094 v 0.453125 c -0.472656 0.128906 -0.929687 0.320312 -1.355468 0.566406 l -0.324219 -0.324218 c -0.390625 -0.390626 -1.019531 -0.390626 -1.410157 0 l -0.703124 0.707031 c -0.390626 0.390625 -0.390626 1.019531 0 1.410156 l 0.320312 0.320313 c -0.246094 0.425781 -0.433594 0.882812 -0.5625 1.355468 h -0.453125 c -0.550781 0 -0.996094 0.445313 -0.996094 0.996094 v 1 c 0 0.550781 0.445313 0.996094 0.996094 0.996094 h 0.449219 c 0.132812 0.472656 0.320312 0.929687 0.566406 1.355468 l -0.320312 0.320313 c -0.390626 0.390625 -0.390626 1.019531 0 1.410156 l 0.703124 0.707031 c 0.390626 0.390626 1.019532 0.390626 1.410157 0 l 0.320312 -0.320312 c 0.429688 0.242188 0.882813 0.433594 1.359375 0.558594 v 0.457031 c 0 0.550781 0.445313 0.996094 0.996094 0.996094 h 0.996094 c 0.554687 0 1 -0.445313 1 -0.996094 v -0.453125 c 0.472656 -0.128906 0.929687 -0.320312 1.355468 -0.566406 l 0.320313 0.324218 c 0.390625 0.390626 1.019531 0.390626 1.410156 0 l 0.707031 -0.707031 c 0.390626 -0.390625 0.390626 -1.019531 0 -1.410156 l -0.320312 -0.320313 c 0.242188 -0.425781 0.433594 -0.882812 0.558594 -1.355468 h 0.453125 c 0.554687 0 1 -0.445313 1 -0.996094 v -1 c 0 -0.550781 -0.445313 -0.996094 -1 -0.996094 h -0.449219 c -0.128906 -0.472656 -0.320312 -0.929687 -0.566406 -1.355468 l 0.324218 -0.320313 c 0.390626 -0.390625 0.390626 -1.019531 0 -1.410156 l -0.707031 -0.707031 c -0.390625 -0.390626 -1.019531 -0.390626 -1.410156 0 l -0.320313 0.320312 c -0.425781 -0.242188 -0.882812 -0.429688 -1.355468 -0.558594 v -0.457031 c 0 -0.550781 -0.445313 -0.996094 -1 -0.996094 z m 0.515625 3.976563 c 1.660156 0 3 1.34375 3 3 s -1.339844 3 -3 3 c -1.65625 0 -3 -1.34375 -3 -3 s 1.34375 -3 3 -3 z m 0 0" fill="#222222"/></svg>