From e37bf192e332220643b85c62fd8da5fa7789a956 Mon Sep 17 00:00:00 2001
From: Vaughn Gugger <51890836+vjgtigers@users.noreply.github.com>
Date: Fri, 5 Apr 2024 06:24:36 -0400
Subject: [PATCH] impr(profile): add level percentage when hovering over
 progress bar (vjgtigers) (#5276)

---
 frontend/src/html/header.html        |  2 +-
 frontend/src/html/pages/account.html |  2 +-
 frontend/src/html/pages/profile.html |  2 +-
 frontend/src/styles/profile.scss     |  8 ++++++--
 frontend/src/ts/elements/profile.ts  | 14 +++++++-------
 frontend/src/ts/pages/profile.ts     |  4 ++--
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/frontend/src/html/header.html b/frontend/src/html/header.html
index 5ebfe0bd89da..fe9b71aed597 100644
--- a/frontend/src/html/header.html
+++ b/frontend/src/html/header.html
@@ -114,7 +114,7 @@ <h1 class="text">
       <div class="avatar hidden"></div>
       <div class="text"></div>
       <div class="levelAndBar">
-        <div class="level">1</div>
+        <div class="level" data-balloon-pos="up">1</div>
         <div class="xpBar">
           <div class="bar"></div>
           <div class="xpGain"></div>
diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
index 15748c490d82..bd5216a6898e 100644
--- a/frontend/src/html/pages/account.html
+++ b/frontend/src/html/pages/account.html
@@ -46,7 +46,7 @@
           </div>
           <div class="levelAndBar">
             <div class="level" data-balloon-pos="up">-</div>
-            <div class="xpBar">
+            <div class="xpBar" data-balloon-pos="up">
               <div class="bar" style="width: 0%"></div>
             </div>
             <div class="xp" data-balloon-pos="up">-/-</div>
diff --git a/frontend/src/html/pages/profile.html b/frontend/src/html/pages/profile.html
index 1dfb277461b2..4cd4683b429e 100644
--- a/frontend/src/html/pages/profile.html
+++ b/frontend/src/html/pages/profile.html
@@ -38,7 +38,7 @@
           </div>
           <div class="levelAndBar">
             <div class="level" data-balloon-pos="up">-</div>
-            <div class="xpBar">
+            <div class="xpBar" data-balloon-pos="up">
               <div class="bar" style="width: 0%"></div>
             </div>
             <div class="xp" data-balloon-pos="up">-/-</div>
diff --git a/frontend/src/styles/profile.scss b/frontend/src/styles/profile.scss
index b6e83e645dad..8851df271e8a 100644
--- a/frontend/src/styles/profile.scss
+++ b/frontend/src/styles/profile.scss
@@ -414,10 +414,14 @@
         grid-template-columns: auto 1fr auto;
         gap: 1rem;
         align-items: center;
+        .level,
+        .xp {
+          line-height: 0;
+        }
         .xpBar {
-          pointer-events: none;
+          pointer-events: auto;
           height: 0.5rem;
-          bottom: -0.25rem;
+          bottom: 0rem;
           width: 100%;
           left: 0;
           background: var(--bg-color);
diff --git a/frontend/src/ts/elements/profile.ts b/frontend/src/ts/elements/profile.ts
index 67e38a2fbab0..9e16fb2a1519 100644
--- a/frontend/src/ts/elements/profile.ts
+++ b/frontend/src/ts/elements/profile.ts
@@ -305,19 +305,19 @@ export async function update(
       `${Numbers.abbreviateNumber(xpToDisplay)}/${Numbers.abbreviateNumber(
         xpForLevel
       )}`
-    );
-  details
-    .find(".xpBar .bar")
-    .css("width", `${(xpToDisplay / xpForLevel) * 100}%`);
-  details
-    .find(".xp")
+    )
     .attr(
       "aria-label",
       `${Numbers.abbreviateNumber(
         xpForLevel - xpToDisplay
       )} xp until next level`
     );
-
+  details
+    .find(".xpBar .bar")
+    .css("width", `${(xpToDisplay / xpForLevel) * 100}%`);
+  details
+    .find(".xpBar")
+    .attr("aria-label", `${((xpToDisplay / xpForLevel) * 100).toFixed(2)}%`);
   //lbs
 
   if (banned) {
diff --git a/frontend/src/ts/pages/profile.ts b/frontend/src/ts/pages/profile.ts
index bc0c2ad4a0b0..dedec6c71b5b 100644
--- a/frontend/src/ts/pages/profile.ts
+++ b/frontend/src/ts/pages/profile.ts
@@ -29,8 +29,8 @@ function reset(): void {
 	          <div class="streak" data-balloon-pos="up">-</div>
           </div>
           <div class="levelAndBar">
-            <div class="level">-</div>
-            <div class="xpBar">
+            <div class="level" data-balloon-pos="up">-</div>
+            <div class="xpBar" data-balloon-pos="up">
               <div class="bar" style="width: 0%;"></div>
             </div>
             <div class="xp" data-balloon-pos="up">-/-</div>