showing discord avatar in menu if avatar hash is saved in the db

frontend/src/styles/nav.scss

@@ -17,10 +17,39 @@
       margin-left: 0.25rem;
     }
 
-    //   &:hover {
-    //     cursor: pointer;
-    //     color: var(--main-color);
-    //   }
+    .icon {
+      width: 1.25rem;
+      height: 1.25rem;
+      // background: red;
+      display: grid;
+      place-content: center center;
+    }
+
+    &.account {
+      .icon,
+      .avatar {
+        grid-column: 1/2;
+        grid-row: 1/2;
+      }
+
+      .avatar {
+        transition: opacity 0.125s, filter 0.125s, webkit-filter 0.125s;
+        width: 1.25rem;
+        height: 1.25rem;
+        background: var(--sub-color);
+        border-radius: 100%;
+        background-position: center center;
+        background-size: contain;
+        background-repeat: no-repeat;
+        filter: saturate(0);
+        -webkit-filter: saturate(0);
+      }
+    }
+
+    &:hover.account .avatar {
+      filter: saturate(1);
+      -webkit-filter: saturate(1);
+    }
   }
 
   .separator {
@@ -42,6 +71,10 @@
   color: transparent !important;
 }
 
+#top.focus #menu .text-button.account .avatar {
+  opacity: 0 !important;
+}
+
 #top {
   grid-template-areas: "logo menu config";
   line-height: 2.3rem;

frontend/src/ts/controllers/account-controller.ts

@@ -228,11 +228,12 @@ export async function loadUser(user: UserType): Promise<void> {
     );
   }
   PageTransition.set(false);
-  AccountButton.update();
   AccountButton.loading(true);
   if ((await getDataAndInit()) === false) {
     signOut();
   }
+  const { discordId, discordAvatar } = DB.getSnapshot();
+  AccountButton.update(discordId, discordAvatar);
   // var displayName = user.displayName;
   // var email = user.email;
   // var emailVerified = user.emailVerified;

frontend/src/ts/elements/account-button.ts

@@ -1,20 +1,39 @@
 import { Auth } from "../firebase";
 import * as Misc from "../utils/misc";
 
+let usingAvatar = false;
+
 export function loading(truefalse: boolean): void {
   if (truefalse) {
+    if (usingAvatar) {
+      $("#top #menu .account .avatar").addClass("hidden");
+      $("#top #menu .account .icon").removeClass("hidden");
+    }
     $("#top #menu .account .icon").html(
       '<i class="fas fa-fw fa-spin fa-circle-notch"></i>'
     );
     $("#top #menu .account").css("opacity", 1).css("pointer-events", "none");
   } else {
+    if (usingAvatar) {
+      $("#top #menu .account .avatar").removeClass("hidden");
+      $("#top #menu .account .icon").addClass("hidden");
+    }
     $("#top #menu .account .icon").html('<i class="fas fa-fw fa-user"></i>');
     $("#top #menu .account").css("opacity", 1).css("pointer-events", "auto");
   }
 }
 
-export function update(): void {
+export function update(discordId?: string, discordAvatar?: string): void {
   if (Auth.currentUser != null) {
+    if (discordAvatar && discordId) {
+      usingAvatar = true;
+      $("#top #menu .account .avatar").css(
+        "background-image",
+        `url(https://cdn.discordapp.com/avatars/${discordId}/${discordAvatar}.png)`
+      );
+      $("#top #menu .account .avatar").removeClass("hidden");
+      $("#top #menu .account .icon").addClass("hidden");
+    }
     Misc.swapElements(
       $("#menu .text-button.login"),
       $("#menu .text-button.account"),

frontend/static/html/top.html

@@ -105,6 +105,7 @@
       <div class="icon">
         <i class="fas fa-fw fa-user"></i>
       </div>
+      <div class="avatar hidden"></div>
       <div class="text"></div>
     </a>
     <a