refactor(contact popup): use new modal system

frontend/src/html/popups.html

@@ -1005,8 +1005,8 @@
     </div>
   </div>
 </dialog>
-<div id="contactPopupWrapper" class="popupWrapper hidden">
-  <div id="contactPopup">
+<dialog id="contactModal" class="modalWrapper hidden">
+  <div class="modal">
     <div class="title">Contact</div>
     <div class="text">
       Feel free to send an email to contact@monkeytype.com. For business
@@ -1094,7 +1094,7 @@
       </a>
     </div>
   </div>
-</div>
+</dialog>
 <dialog id="commandLine" class="modalWrapper hidden">
   <div class="modal">
     <div

frontend/src/styles/popups.scss

@@ -1468,19 +1468,12 @@
     }
   }
 }
-#contactPopupWrapper {
-  #contactPopup {
-    // height: 400px;
+#contactModal {
+  .modal {
     overflow-y: scroll;
-    max-height: 100%;
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
     display: grid;
-    grid-template-rows: auto auto auto;
     gap: 1rem;
     @extend .ffscroll;
-    margin: 0 2rem;
     max-width: 900px;
 
     .title {
@@ -1496,25 +1489,15 @@
       }
     }
 
-    .subtext {
-      color: var(--sub-color);
-      font-size: 0.75rem;
-      grid-area: subtext;
-    }
-
     .buttons {
       display: grid;
       gap: 1rem;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
 
       .button {
-        display: block;
-        width: 100%;
-        height: 100%;
-        padding: 1rem 0;
+        padding: 1rem;
+        gap: 1rem;
         display: grid;
-        // gap: 0.5rem;
-        text-decoration: none;
         grid-template-areas: "icon textgroup";
         grid-template-columns: auto 1fr;
         text-align: left;
@@ -1525,7 +1508,7 @@
         .text {
           font-size: 1.5rem;
           line-height: 2rem;
-          transition: 0.25s;
+          transition: 0.125s;
         }
         &:hover .text {
           color: var(--bg-color);
@@ -1534,7 +1517,6 @@
           grid-area: icon;
           font-size: 2rem;
           line-height: 2rem;
-          padding: 0 1rem;
         }
       }
     }

frontend/src/styles/z_media-queries.scss

@@ -372,10 +372,6 @@
     font-size: 0.75rem;
   }
 
-  #contactPopupWrapper #contactPopup .buttons {
-    grid-template-columns: 1fr;
-  }
-
   .page404 .content {
     grid-auto-flow: row;
     grid-template-columns: 300px;
@@ -790,16 +786,6 @@
     }
   }
 
-  #contactPopupWrapper #contactPopup .buttons .button .text {
-    font-size: 1rem;
-  }
-  #contactPopupWrapper #contactPopup .buttons .button .icon {
-    font-size: 1.5rem;
-    line-height: 1.5rem;
-  }
-  #contactPopupWrapper #contactPopup {
-    padding: 1rem;
-  }
   .pageAbout .section .supporters,
   .pageAbout .section .contributors {
     grid-template-columns: 1fr;

frontend/src/ts/event-handlers/about.ts

@@ -1,7 +1,14 @@
 import * as SupportPopup from "../modals/support";
+import * as ContactModal from "../modals/contact";
 
 document
   .querySelector("#pageAbout #supportMeAboutButton")
   ?.addEventListener("click", () => {
     SupportPopup.show();
   });
+
+document
+  .querySelector("#pageAbout #contactPopupButton2")
+  ?.addEventListener("click", () => {
+    ContactModal.show();
+  });

frontend/src/ts/event-handlers/footer.ts

@@ -4,6 +4,7 @@ import * as DB from "../db";
 import * as Notifications from "../elements/notifications";
 import { getCommandline } from "../utils/async-modules";
 import * as SupportPopup from "../modals/support";
+import * as ContactModal from "../modals/contact";
 import { envConfig } from "../constants/env-config";
 
 document
@@ -54,3 +55,9 @@ document
   ?.addEventListener("click", () => {
     SupportPopup.show();
   });
+
+document
+  .querySelector("footer #contactPopupButton")
+  ?.addEventListener("click", () => {
+    ContactModal.show();
+  });

frontend/src/ts/index.ts

@@ -21,7 +21,6 @@ import * as Result from "./test/result";
 import "./controllers/account-controller";
 import { enable } from "./states/glarses-mode";
 import "./test/caps-warning";
-import "./popups/contact-popup";
 import "./popups/version-popup";
 import "./popups/edit-preset-popup";
 import "./popups/set-streak-hour-offset";

frontend/src/ts/modals/contact.ts

@@ -0,0 +1,7 @@
+import AnimatedModal from "../utils/animated-modal";
+
+export function show(): void {
+  void modal.show();
+}
+
+const modal = new AnimatedModal("contactModal", "popups", undefined);

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

@@ -1,55 +0,0 @@
-import { isPopupVisible } from "../utils/misc";
-import * as Skeleton from "../utils/skeleton";
-
-const wrapperId = "contactPopupWrapper";
-
-$(document.body).on(
-  "click",
-  "#contactPopupButton, #contactPopupButton2",
-  () => {
-    show();
-  }
-);
-
-$(document.body).on("click", "#contactPopupWrapper", (e) => {
-  if ($(e.target).attr("id") === "contactPopupWrapper") {
-    hide();
-  }
-});
-
-$(document).on("keydown", (e) => {
-  if (e.key === "Escape" && isPopupVisible(wrapperId)) {
-    hide();
-  }
-});
-
-function show(): void {
-  Skeleton.append(wrapperId, "popups");
-  if (!isPopupVisible(wrapperId)) {
-    $("#contactPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 0)
-      .removeClass("hidden")
-      .animate({ opacity: 1 }, 125);
-  }
-}
-
-function hide(): void {
-  if (isPopupVisible(wrapperId)) {
-    $("#contactPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        125,
-        () => {
-          $("#contactPopupWrapper").addClass("hidden");
-          Skeleton.remove(wrapperId);
-        }
-      );
-  }
-}
-
-Skeleton.save(wrapperId);