refactor: use button instead of div

frontend/src/styles/account.scss

@@ -63,7 +63,7 @@
     display: flex;
     justify-content: space-evenly;
     gap: 1rem;
-    .button {
+    button {
       width: 100%;
     }
   }

frontend/src/ts/account/result-filters.ts

@@ -344,11 +344,11 @@ export function updateActive(): void {
       let buttonEl;
       if (group === "date") {
         buttonEl = $(
-          `.pageAccount .group.topFilters .filterGroup[group="${group}"] .button[filter="${filter}"]`
+          `.pageAccount .group.topFilters .filterGroup[group="${group}"] button[filter="${filter}"]`
         );
       } else {
         buttonEl = $(
-          `.pageAccount .group.filterButtons .filterGroup[group="${group}"] .button[filter="${filter}"]`
+          `.pageAccount .group.filterButtons .filterGroup[group="${group}"] button[filter="${filter}"]`
         );
       }
       if (getFilter(group, filter)) {
@@ -487,7 +487,7 @@ function toggle<G extends keyof MonkeyTypes.ResultFilters>(
 
 $(
   ".pageAccount .filterButtons .buttonsAndTitle .buttons, .pageAccount .group.topFilters .buttonsAndTitle.testDate .buttons"
-).on("click", ".button", (e) => {
+).on("click", "button", (e) => {
   const group = $(e.target)
     .parents(".buttons")
     .attr("group") as keyof MonkeyTypes.ResultFilters;
@@ -514,7 +514,7 @@ $(
         setAllFilters(group, false);
       }
     });
-  } else if ($(e.target).hasClass("button")) {
+  } else if ($(e.target).is("button")) {
     if (e.shiftKey) {
       setAllFilters(group, false);
       filters[group][filter as keyof typeof filters[typeof group]] =
@@ -528,7 +528,7 @@ $(
   save();
 });
 
-$(".pageAccount .topFilters .button.allFilters").on("click", () => {
+$(".pageAccount .topFilters button.allFilters").on("click", () => {
   // user is changing the filters -> current filter is no longer a filter preset
   deSelectFilterPreset();
 
@@ -548,7 +548,7 @@ $(".pageAccount .topFilters .button.allFilters").on("click", () => {
   save();
 });
 
-$(".pageAccount .topFilters .button.currentConfigFilter").on("click", () => {
+$(".pageAccount .topFilters button.currentConfigFilter").on("click", () => {
   // user is changing the filters -> current filter is no longer a filter preset
   deSelectFilterPreset();
 
@@ -633,9 +633,9 @@ $(".pageAccount .topFilters .button.currentConfigFilter").on("click", () => {
   save();
 });
 
-$(".pageAccount .topFilters .button.toggleAdvancedFilters").on("click", () => {
+$(".pageAccount .topFilters button.toggleAdvancedFilters").on("click", () => {
   $(".pageAccount .filterButtons").slideToggle(250);
-  $(".pageAccount .topFilters .button.toggleAdvancedFilters").toggleClass(
+  $(".pageAccount .topFilters button.toggleAdvancedFilters").toggleClass(
     "active"
   );
 });
@@ -652,10 +652,10 @@ export async function appendButtons(): Promise<void> {
   if (languageList) {
     let html = "";
     for (const language of languageList) {
-      html += `<div class="button" filter="${language}">${language.replace(
+      html += `<button filter="${language}">${language.replace(
         "_",
         " "
-      )}</div>`;
+      )}</button>`;
     }
     const el = document.querySelector(
       ".pageAccount .content .filterButtons .buttonsAndTitle.languages .buttons"
@@ -674,15 +674,16 @@ export async function appendButtons(): Promise<void> {
   if (funboxList) {
     let html = "";
     for (const funbox of funboxList) {
-      html += `<div class="button" filter="${
-        funbox.name
-      }">${funbox.name.replace(/_/g, " ")}</div>`;
+      html += `<button filter="${funbox.name}">${funbox.name.replace(
+        /_/g,
+        " "
+      )}</button>`;
     }
     const el = document.querySelector(
       ".pageAccount .content .filterButtons .buttonsAndTitle.funbox .buttons"
     );
     if (el) {
-      el.innerHTML = `<div class="button" filter="none">none</div>` + html;
+      el.innerHTML = `<button filter="none">none</button>` + html;
     }
   }
 
@@ -692,9 +693,9 @@ export async function appendButtons(): Promise<void> {
     $(".pageAccount .content .filterButtons .buttonsAndTitle.tags").removeClass(
       "hidden"
     );
-    let html = `<div class="button" filter="none">no tag</div>`;
+    let html = `<button filter="none">no tag</button>`;
     for (const tag of snapshot?.tags ?? []) {
-      html += `<div class="button" filter="${tag._id}">${tag.display}</div>`;
+      html += `<button filter="${tag._id}">${tag.display}</button>`;
     }
     const el = document.querySelector(
       ".pageAccount .content .filterButtons .buttonsAndTitle.tags .buttons"
@@ -723,7 +724,7 @@ export function removeButtons(): void {
   ).empty();
 }
 
-$(".pageAccount .topFilters .button.createFilterPresetBtn").on("click", () => {
+$(".pageAccount .topFilters button.createFilterPresetBtn").on("click", () => {
   startCreateFilterPreset();
 });
 

frontend/src/ts/pages/account.ts

@@ -1257,7 +1257,7 @@ $(".pageAccount .group.history").on("click", ".history-date-header", () => {
 // Resets sorting to by date' when applying filers (normal or advanced)
 $(".pageAccount .group.history").on(
   "click",
-  ".buttonsAndTitle .buttons .button",
+  ".buttonsAndTitle .buttons button",
   () => {
     // We want to 'force' descending sort:
     sortAndRefreshHistory("timestamp", ".history-date-header", true);
@@ -1266,7 +1266,7 @@ $(".pageAccount .group.history").on(
 
 $(".pageAccount .group.topFilters, .pageAccount .filterButtons").on(
   "click",
-  ".button",
+  "button",
   () => {
     setTimeout(() => {
       update();

frontend/static/html/pages/account.html

@@ -343,10 +343,10 @@
       <div class="buttonsAndTitle" style="grid-column: 1/3">
         <div class="title">filters</div>
         <div class="buttons">
-          <div class="button allFilters">all</div>
-          <div class="button currentConfigFilter">current settings</div>
-          <div class="button toggleAdvancedFilters">advanced</div>
-          <div class="button createFilterPresetBtn">save as preset</div>
+          <button class="allFilters">all</button>
+          <button class="currentConfigFilter">current settings</button>
+          <button class="toggleAdvancedFilters">advanced</button>
+          <button class="createFilterPresetBtn">save as preset</button>
         </div>
       </div>
       <div
@@ -355,11 +355,11 @@
       >
         <!-- <div class="title">date</div> -->
         <div class="buttons filterGroup" group="date">
-          <div class="button" filter="last_day">last day</div>
-          <div class="button" filter="last_week">last week</div>
-          <div class="button" filter="last_month">last month</div>
-          <div class="button" filter="last_3months">last 3 months</div>
-          <div class="button" filter="all">all time</div>
+          <button filter="last_day">last day</button>
+          <button filter="last_week">last week</button>
+          <button filter="last_month">last month</button>
+          <button filter="last_3months">last 3 months</button>
+          <button filter="all">all time</button>
         </div>
       </div>
     </div>
@@ -367,75 +367,75 @@
       <div class="buttonsAndTitle" style="grid-column: 1/3">
         <div class="title">advanced filters</div>
         <div class="buttons">
-          <div class="button noFilters">clear filters</div>
+          <button class="noFilters">clear filters</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
         <div class="title">difficulty</div>
         <div class="buttons filterGroup" group="difficulty">
-          <div class="button" filter="normal">normal</div>
-          <div class="button" filter="expert">expert</div>
-          <div class="button" filter="master">master</div>
+          <button filter="normal">normal</button>
+          <button filter="expert">expert</button>
+          <button filter="master">master</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
         <div class="title">personal best</div>
         <div class="buttons filterGroup" group="pb">
-          <div class="button" filter="no">no</div>
-          <div class="button" filter="yes">yes</div>
+          <button filter="no">no</button>
+          <button filter="yes">yes</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
         <div class="title">mode</div>
         <div class="buttons filterGroup" group="mode">
-          <div class="button" filter="words">words</div>
-          <div class="button" filter="time">time</div>
-          <div class="button" filter="quote">quote</div>
-          <div class="button" filter="zen">zen</div>
-          <div class="button" filter="custom">custom</div>
+          <button filter="words">words</button>
+          <button filter="time">time</button>
+          <button filter="quote">quote</button>
+          <button filter="zen">zen</button>
+          <button filter="custom">custom</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
         <div class="title">quote length</div>
         <div class="buttons filterGroup" group="quoteLength">
-          <div class="button" filter="short">short</div>
-          <div class="button" filter="medium">medium</div>
-          <div class="button" filter="long">long</div>
-          <div class="button" filter="thicc">thicc</div>
+          <button filter="short">short</button>
+          <button filter="medium">medium</button>
+          <button filter="long">long</button>
+          <button filter="thicc">thicc</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
         <div class="title">words</div>
         <div class="buttons filterGroup" group="words">
-          <div class="button" filter="10">10</div>
-          <div class="button" filter="25">25</div>
-          <div class="button" filter="50">50</div>
-          <div class="button" filter="100">100</div>
-          <div class="button" filter="custom">custom</div>
+          <button filter="10">10</button>
+          <button filter="25">25</button>
+          <button filter="50">50</button>
+          <button filter="100">100</button>
+          <button filter="custom">custom</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
         <div class="title">time</div>
         <div class="buttons filterGroup" group="time">
-          <div class="button" filter="15">15</div>
-          <div class="button" filter="30">30</div>
-          <div class="button" filter="60">60</div>
-          <div class="button" filter="120">120</div>
-          <div class="button" filter="custom">custom</div>
+          <button filter="15">15</button>
+          <button filter="30">30</button>
+          <button filter="60">60</button>
+          <button filter="120">120</button>
+          <button filter="custom">custom</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
         <div class="title">punctuation</div>
         <div class="buttons filterGroup" group="punctuation">
-          <div class="button" filter="on">on</div>
-          <div class="button" filter="off">off</div>
+          <button filter="on">on</button>
+          <button filter="off">off</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
         <div class="title">numbers</div>
         <div class="buttons filterGroup" group="numbers">
-          <div class="button" filter="on">on</div>
-          <div class="button" filter="off">off</div>
+          <button filter="on">on</button>
+          <button filter="off">off</button>
         </div>
       </div>
       <div class="buttonsAndTitle tags" style="grid-column: 1/3">