fix(account-history): highlight animation is not working on result selection (@byseif21) (#6744)

### Description

fix the highlight animation for the account history table (when clicking
a chart dot) was not visible or only worked inconsistently. This was
because the animation was applied to the <tr> element, but the
background color for table rows is set on the <td> elements. As a
result, the animation was hidden by the static background color of the
table cells.

Closes #

---------

Co-authored-by: Miodec <jack@monkeytype.com>

frontend/src/styles/account.scss

@@ -194,8 +194,13 @@
       table td {
         -webkit-appearance: unset;
       }
+
+      table tr {
+        border-radius: var(--roundness);
+      }
+
       .active {
-        animation: flashHighlight 4s linear 0s 1;
+        animation: accountRowHighlight 4s linear 0s 1;
       }
 
       .loadMoreButton {
@@ -315,7 +320,7 @@
       font-size: 0.75rem;
     }
 
-    tbody tr:nth-child(odd) td {
+    tbody tr:nth-child(odd) {
       background: var(--sub-alt-color);
     }
 

frontend/src/styles/animations.scss

@@ -64,18 +64,12 @@
   }
 }
 
-@keyframes flashHighlight {
+@keyframes accountRowHighlight {
   0% {
-    background-color: var(--bg-color) !important;
-  }
-  10% {
-    background-color: var(--main-color) !important;
-  }
-  40% {
-    background-color: var(--main-color) !important;
+    outline: 0.25em solid var(--main-color);
   }
   100% {
-    background-color: var(--bg-color) !important;
+    outline: 0.25em solid transparent;
   }
 }
 

frontend/src/ts/pages/account.ts

@@ -1157,14 +1157,19 @@ $(".pageAccount #accountHistoryChart").on("click", () => {
   const windowHeight = $(window).height() ?? 0;
   const offset = $(`#result-${index}`).offset()?.top ?? 0;
   const scrollTo = offset - windowHeight / 2;
-  $([document.documentElement, document.body]).animate(
-    {
-      scrollTop: scrollTo,
-    },
-    Misc.applyReducedMotion(500)
-  );
-  $(".resultRow").removeClass("active");
-  $(`#result-${index}`).addClass("active");
+  $([document.documentElement, document.body])
+    .stop(true)
+    .animate(
+      { scrollTop: scrollTo },
+      {
+        duration: Misc.applyReducedMotion(500),
+        done: () => {
+          const element = $(`#result-${index}`);
+          $(".resultRow").removeClass("active");
+          requestAnimationFrame(() => element.addClass("active"));
+        },
+      }
+    );
 });
 
 $(".pageAccount").on("click", ".miniResultChartButton", async (event) => {