refactor(simple modals): use new modal system

frontend/src/html/popups.html

@@ -55,9 +55,9 @@
   </div>
 </dialog>
 
-<div id="simplePopupWrapper" class="popupWrapper hidden">
-  <div id="simplePopup" popupId=""></div>
-</div>
+<dialog id="simpleModal" class="modalWrapper hidden">
+  <form class="modal"></form>
+</dialog>
 
 <dialog id="cookiesModal" class="modalWrapper hidden">
   <div class="extensionMessage">

frontend/src/styles/popups.scss

@@ -448,23 +448,15 @@
   }
 }
 
-#simplePopupWrapper {
-  #simplePopup {
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    width: 400px;
+#simpleModal {
+  .modal {
+    max-width: 500px;
 
     form {
       display: grid;
       gap: 1rem;
     }
 
-    .title {
-      font-size: 1.5rem;
-      color: var(--sub-color);
-    }
-
     .inputs {
       display: grid;
       gap: 1rem;
@@ -475,6 +467,11 @@
       color: var(--text-color);
     }
   }
+  & [data-popup-id="viewApeKey"] {
+    textarea:disabled {
+      opacity: 1;
+    }
+  }
 }
 
 #mobileTestConfigModal {

frontend/src/styles/z_media-queries.scss

@@ -777,10 +777,6 @@
     grid-template-columns: 1fr;
   }
 
-  #simplePopupWrapper #simplePopup {
-    width: 90vw;
-  }
-
   .pageSettings {
     .section[data-config-name="customBackgroundFilter"] .groups .group {
       grid-template-columns: auto 1fr;