refactor(ape keys modal): use new modal system

monkeytypegame · Mar 24, 2024 · 6f75abe · 6f75abe
1 parent 7f5e3aa
commit 6f75abe
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 192 deletions.
diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
@@ -689,14 +689,14 @@
     <button>submit</button>
   </div>
 </dialog>
-<div id="apeKeysPopupWrapper" class="hidden popupWrapper">
-  <div id="apeKeysPopup" mode="">
+<dialog id="apeKeysModal" class="hidden modalWrapper">
+  <div class="modal">
     <div class="top">
       <div class="title">Ape Keys</div>
-      <div class="button generateApeKey">
+      <button class="generateApeKey">
         <i class="fas fa-plus"></i>
         Generate new key
-      </div>
+      </button>
     </div>
     <table>
       <thead>
@@ -712,7 +712,7 @@
       <tbody></tbody>
     </table>
   </div>
-</div>
+</dialog>
 <dialog id="quoteReportModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="title">Report a quote</div>

diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
@@ -932,108 +932,99 @@
     }
   }
 }
+#apeKeysModal {
+  .modal {
+    max-width: 1000px;
 
-#apeKeysPopup {
-  background: var(--bg-color);
-  border-radius: var(--roundness);
-  padding: 2rem;
-  display: grid;
-  gap: 1rem;
-  width: 1000px;
-  max-width: calc(100vw - 4rem);
-  // height: 100%;
-  // max-height: 40rem;
-  min-height: 18rem;
-  overflow-y: scroll;
-  grid-template-rows: max-content auto;
-  align-items: baseline;
-  gap: 1rem;
-
-  .top {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    .title {
-      font-size: 1.5rem;
-      color: var(--sub-color);
-    }
-    .button {
-      padding: 0.4rem 2rem;
-    }
-  }
-
-  .textButton {
-    justify-content: center;
-  }
+    grid-template-rows: max-content auto;
+    align-items: baseline;
 
-  .keyButtons {
-    display: grid;
-    grid-auto-flow: column;
-    gap: 1rem;
-    .button {
-      width: 3rem;
+    .top {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      .title {
+        font-size: 1.5rem;
+        color: var(--sub-color);
+      }
+      button {
+        padding: 0.5em 2em;
+      }
     }
-  }
-
-  table {
-    width: 100%;
-    border-spacing: 0;
-    border-collapse: collapse;
 
-    tr td:first-child {
-      text-align: center;
+    .textButton {
+      justify-content: center;
     }
 
-    tr.me {
-      td {
-        color: var(--main-color);
-        // font-weight: 900;
+    .keyButtons {
+      display: grid;
+      grid-auto-flow: column;
+      gap: 1rem;
+      .button {
+        width: 3rem;
       }
     }
 
-    td {
-      padding: 0.5rem 0.5rem;
-    }
+    table {
+      width: 100%;
+      border-spacing: 0;
+      border-collapse: collapse;
 
-    thead {
-      color: var(--sub-color);
-      font-size: 0.75rem;
+      tr td:first-child {
+        text-align: center;
+      }
+
+      tr.me {
+        td {
+          color: var(--main-color);
+          // font-weight: 900;
+        }
+      }
 
       td {
-        padding: 0.5rem;
-        background: var(--bg-color);
-        position: -webkit-sticky;
-        position: sticky;
-        top: 0;
-        z-index: 99;
+        padding: 0.5rem 0.5rem;
       }
-    }
 
-    tbody {
-      color: var(--text-color);
+      thead {
+        color: var(--sub-color);
+        font-size: 0.75rem;
 
-      tr:nth-child(odd) td {
-        background: var(--sub-alt-color);
+        td {
+          padding: 0.5rem;
+          background: var(--bg-color);
+          position: -webkit-sticky;
+          position: sticky;
+          top: 0;
+          z-index: 99;
+        }
       }
-    }
 
-    tfoot {
-      td {
-        padding: 1rem 0.5rem;
-        position: -webkit-sticky;
-        position: sticky;
-        bottom: -5px;
-        background: var(--bg-color);
-        color: var(--main-color);
-        z-index: 4;
+      tbody {
+        color: var(--text-color);
+
+        tr:nth-child(odd) td {
+          background: var(--sub-alt-color);
+        }
       }
-    }
 
-    tr {
-      td:first-child {
-        padding-left: 1rem;
+      tfoot {
+        td {
+          padding: 1rem 0.5rem;
+          position: -webkit-sticky;
+          position: sticky;
+          bottom: -5px;
+          background: var(--bg-color);
+          color: var(--main-color);
+          z-index: 4;
+        }
       }
-      td:last-child {
-        padding-right: 1rem;
+
+      tr {
+        td:first-child {
+          padding-left: 1rem;
+        }
+        td:last-child {
+          padding-right: 1rem;
+        }
       }
     }
   }

diff --git a/frontend/src/ts/event-handlers/settings.ts b/frontend/src/ts/event-handlers/settings.ts
@@ -3,6 +3,7 @@ import * as CookiesModal from "../modals/cookies";
 import * as StreakHourOffsetModal from "../modals/streak-hour-offset";
 import * as EditPresetPopup from "../modals/edit-preset";
 import * as EditTagPopup from "../modals/edit-tag";
+import * as ApeKeysModal from "../modals/ape-keys";
 
 import * as Notifications from "../elements/notifications";
 
@@ -131,3 +132,9 @@ settingsPage?.querySelector(".section.tags")?.addEventListener("click", (e) => {
     EditTagPopup.show("remove", tagid, name);
   }
 });
+
+settingsPage
+  ?.querySelector(".section.apeKeys #showApeKeysPopup")
+  ?.addEventListener("click", () => {
+    void ApeKeysModal.show();
+  });