From 0a9a6e6ef19af6c9f1e9d8fc131e60815583368f Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 15 Feb 2024 20:25:17 +0100
Subject: [PATCH] fix(settings page): font family buttons not working

---
 frontend/src/ts/pages/settings.ts       | 17 ++++++++---------
 frontend/src/ts/popups/simple-popups.ts |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 9677f4de8..8f406acab 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -382,7 +382,7 @@ async function initGroups(): Promise<void> {
     undefined,
     () => {
       const customButton = $(
-        ".pageSettings .section[data-config-name='fontFamily'] .buttons .custom"
+        ".pageSettings .section[data-config-name='fontFamily'] .buttons button[data-config-value='custom']"
       );
       if (
         $(
@@ -643,22 +643,21 @@ async function fillSettingsPage(): Promise<void> {
   if (fontsList) {
     for (const font of fontsList) {
       if (Config.fontFamily === font.name) isCustomFont = false;
-      fontsElHTML += `<div class="button${
+      fontsElHTML += `<button class="${
         Config.fontFamily === font.name ? " active" : ""
       }" style="font-family:${
         font.display !== undefined ? font.display : font.name
-      }" data-config-value="${font.name.replace(/ /g, "_")}" tabindex="0"
-        onclick="this.blur();">${
-          font.display !== undefined ? font.display : font.name
-        }</div>`;
+      }" data-config-value="${font.name.replace(/ /g, "_")}">${
+        font.display !== undefined ? font.display : font.name
+      }</button>`;
     }
 
     fontsElHTML += isCustomFont
-      ? `<div class="button no-auto-handle custom active" onclick="this.blur();">Custom (${Config.fontFamily.replace(
+      ? `<button class="no-auto-handle active" data-config-value="custom">Custom (${Config.fontFamily.replace(
           /_/g,
           " "
-        )})</div>`
-      : '<div class="button no-auto-handle custom" onclick="this.blur();">Custom</div>';
+        )})</button>`
+      : '<button class="no-auto-handle" data-config-value="custom"">Custom</button>';
 
     fontsEl.innerHTML = fontsElHTML;
   }
diff --git a/frontend/src/ts/popups/simple-popups.ts b/frontend/src/ts/popups/simple-popups.ts
index 0496e63e4..af60a3841 100644
--- a/frontend/src/ts/popups/simple-popups.ts
+++ b/frontend/src/ts/popups/simple-popups.ts
@@ -1872,7 +1872,7 @@ $("#popups").on("click", "#apeKeysPopup table tbody tr .button.edit", (e) => {
 
 $(".pageSettings").on(
   "click",
-  ".section[data-config-name='fontFamily'] .button.custom",
+  ".section[data-config-name='fontFamily'] button[data-config-value='custom']",
   () => {
     showPopup("applyCustomFont", []);
   }