showing notification bubble on bell icon instead of setting the whole icon active

closes #3513

frontend/src/styles/core.scss

@@ -520,3 +520,18 @@ key {
     margin-right: 0.3rem;
   }
 }
+
+.notificationBubble {
+  position: absolute;
+  background: var(--main-color);
+  width: 1em;
+  height: 1em;
+  font-size: 0.5em;
+  line-height: 2em;
+  color: transparent;
+  border-radius: 100rem;
+  right: 0.5em;
+  top: 0.5em;
+  outline: 0.5em solid var(--bg-color);
+  transition: 0.125s;
+}

frontend/src/styles/nav.scss

@@ -26,6 +26,10 @@
       place-content: center center;
     }
 
+    &.showAlerts {
+      position: relative;
+    }
+
     &.account {
       position: relative;
       align-items: center;
@@ -118,6 +122,9 @@
 
 #top.focus #menu {
   color: transparent !important;
+  .notificationBubble {
+    opacity: 0 !important;
+  }
 }
 
 #top.focus #menu .textButton {

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

@@ -241,7 +241,7 @@ export async function loadUser(user: UserType): Promise<void> {
   }
   const { discordId, discordAvatar, xp, inboxUnreadSize } = DB.getSnapshot();
   AccountButton.update(xp, discordId, discordAvatar);
-  Alerts.setBellButtonColored(inboxUnreadSize > 0);
+  Alerts.setNotificationBubbleVisible(inboxUnreadSize > 0);
   // var displayName = user.displayName;
   // var email = user.email;
   // var emailVerified = user.emailVerified;

frontend/src/ts/elements/alerts.ts

@@ -14,7 +14,7 @@ let mailToDelete: string[] = [];
 
 export function hide(): void {
   if (!$("#alertsPopupWrapper").hasClass("hidden")) {
-    setBellButtonColored(false);
+    setNotificationBubbleVisible(false);
 
     let mailUpdatedPromiseResolve: (value?: unknown) => void;
     const mailUpdatedPromise = new Promise((resolve) => {
@@ -287,11 +287,11 @@ function addNotification(
   }
 }
 
-export function setBellButtonColored(tf: boolean): void {
+export function setNotificationBubbleVisible(tf: boolean): void {
   if (tf) {
-    $("#top #menu .showAlerts").addClass("active");
+    $("#top #menu .showAlerts .notificationBubble").removeClass("hidden");
   } else {
-    $("#top #menu .showAlerts").removeClass("active");
+    $("#top #menu .showAlerts .notificationBubble").addClass("hidden");
   }
 }
 

frontend/static/html/top.html

@@ -134,6 +134,7 @@
       <div class="icon">
         <i class="fas fa-fw fa-bell"></i>
       </div>
+      <div class="notificationBubble">5</div>
     </a>
     <a
       class="textButton signInOut"