refactor: use button element instead of class

frontend/src/styles/popups.scss

@@ -1397,6 +1397,7 @@
       grid-template-columns: 1fr 1fr 1fr;
       gap: 1rem;
 
+      button,
       .button {
         display: block;
         width: 100%;

frontend/src/styles/z_media-queries.scss

@@ -86,6 +86,7 @@
   #supportMe {
     width: 90vw !important;
     .buttons {
+      button,
       .button {
         .icon {
           font-size: 3rem !important;
@@ -653,6 +654,7 @@
     width: 80vw !important;
     .buttons {
       grid-template-columns: none !important;
+      button,
       .button {
         grid-template-columns: auto 1fr;
         align-items: center;

frontend/src/ts/commandline/index.ts

@@ -826,12 +826,12 @@ $("footer").on("click", ".leftright .right .current-theme", (e) => {
   }
 });
 
-$(".supportButtons .button.ads").on("click", () => {
+$(".supportButtons button.ads").on("click", () => {
   CommandlineLists.pushCurrent(CommandlineLists.getList("enableAds"));
   show();
 });
 
-$(document.body).on("click", "#supportMeWrapper .button.ads", () => {
+$(document.body).on("click", "#supportMeWrapper button.ads", () => {
   CommandlineLists.pushCurrent(CommandlineLists.getList("enableAds"));
   show();
 });

frontend/src/ts/popups/support-popup.ts

@@ -9,7 +9,9 @@ function show(): void {
   $("#supportMeWrapper")
     .css("opacity", 0)
     .removeClass("hidden")
-    .animate({ opacity: 1 }, 125);
+    .animate({ opacity: 1 }, 125, () => {
+      $(`#${wrapperId}`).trigger("focus");
+    });
 }
 
 function hide(): void {
@@ -29,15 +31,13 @@ $("main").on("click", ".pageAbout #supportMeAboutButton", () => {
   show();
 });
 
-$("#popups").on("click", "#supportMeWrapper", () => {
-  hide();
+$("#popups").on("click", "#supportMeWrapper", (e) => {
+  if ($(e.target).attr("id") === "supportMeWrapper") {
+    hide();
+  }
 });
 
-$("#popups").on("click", "#supportMeWrapper .button.ads", () => {
-  hide();
-});
-
-$("#popups").on("click", "#supportMeWrapper a.button", () => {
+$("#popups").on("click", "#supportMeWrapper button", () => {
   hide();
 });
 

frontend/static/html/popups.html

@@ -951,7 +951,7 @@
 <div id="versionHistoryWrapper" class="popupWrapper hidden">
   <div id="versionHistory"></div>
 </div>
-<div id="supportMeWrapper" class="popupWrapper hidden">
+<div id="supportMeWrapper" class="popupWrapper hidden" tabindex="-1">
   <div id="supportMe">
     <div class="title">Support Monkeytype</div>
     <div class="text">
@@ -960,10 +960,10 @@
       <i class="fas fa-heart"></i>
     </div>
     <div class="buttons">
-      <div class="button ads">
+      <button class="ads">
         <div class="icon"><i class="fas fa-fw fa-ad"></i></div>
         <div class="text">Enable Ads</div>
-      </div>
+      </button>
       <!-- <div class="button watchVideoAd">
         <div class="icon"><i class="fas fa-fw fa-ad"></i></div>
         <div class="text">
@@ -988,11 +988,7 @@
         rel="noreferrer noopener"
       >
         <div class="icon"><i class="fab fa-fw fa-patreon"></i></div>
-        <div class="text">
-          Become
-          <br />
-          a Patron
-        </div>
+        <div class="text">Join Patreon</div>
       </a>
       <a
         class="button"