refactor(word filter modal): use new modal system

monkeytypegame · Mar 24, 2024 · 6167506 · 6167506
1 parent 1bd6bf4
commit 6167506
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 171 deletions.
diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
@@ -493,8 +493,12 @@
     <div class="button save">save</div>
   </div>
 </div>
-<div id="wordFilterPopupWrapper" class="popupWrapper hidden">
-  <div id="wordFilterPopup">
+<dialog id="wordFilterModal" class="modalWrapper hidden">
+  <div class="modal">
+    <!-- hidden for now, dunno where to place it -->
+    <!-- <div class="loadingIndicator">
+      <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+    </div> -->
     <div class="top">
       <div class="group">
         <div class="title">language</div>
@@ -542,11 +546,6 @@
           title="exclude"
         />
       </div>
-      <!-- </div> -->
-      <!-- <div class="tip">
-        Use the above filters to include and exclude words or characters
-        (separated by spaces)
-      </div> -->
     </div>
     <div class="divider"></div>
 
@@ -560,20 +559,19 @@
         <select class="layoutInput"></select>
       </div>
       <!-- <div class="tip">Use the dropdowns above to generate presets</div> -->
-      <div class="button generateButton">generate</div>
+      <button class="generateButton">generate</button>
     </div>
 
     <div class="bottom">
       <div class="tip">
         "Set" replaces the current custom word list with the filter result,
-        "Add" appends the filter result to the current custom word list
+        "Add" appends the filter result to the current custom word list.
       </div>
-      <i class="fas fa-fw fa-spin fa-circle-notch hidden loadingIndicator"></i>
-      <div class="button setButton">set</div>
-      <div class="button addButton">add</div>
+      <button class="setButton">set</button>
+      <button class="addButton">add</button>
     </div>
   </div>
-</div>
+</dialog>
 <dialog id="googleSignUpModal" class="modalWrapper hidden">
   <form class="modal">
     <div class="title">Account name</div>

diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
@@ -259,20 +259,12 @@
   }
 }
 
-#wordFilterPopupWrapper {
-  padding: 2rem;
-  #wordFilterPopup {
-    color: var(--sub-color);
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
+#wordFilterModal {
+  .modal {
     grid-template-areas: "top top top" "left divider right" "bottom bottom bottom";
     grid-template-columns: 1fr auto 1fr;
     gap: 2rem;
     max-width: 800px;
-    overflow-y: scroll;
-    max-height: 100%;
 
     .top {
       grid-area: top;
@@ -313,6 +305,9 @@
     .group {
       display: grid;
       gap: 0.5rem;
+      .title {
+        color: var(--sub-color);
+      }
     }
 
     .lengthgrid {
@@ -329,6 +324,7 @@
 
     .loadingIndicator {
       justify-self: center;
+      color: var(--main-color);
     }
 
     .divider {

diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
@@ -427,7 +427,7 @@
 
 //700px
 @media only screen and (max-width: 43.75rem) {
-  #wordFilterPopupWrapper #wordFilterPopup {
+  #wordFilterModal .modal {
     .divider {
       width: 100%;
       height: 0.25rem;