refactor: use solid simple modals (@fehmer)

frontend/src/html/popups.html

@@ -45,10 +45,6 @@
   </div>
 </dialog>
 
-<dialog id="simpleModal" class="modalWrapper hidden">
-  <form class="modal"></form>
-</dialog>
-
 <div id="videoAdPopupWrapper" class="popupWrapper hidden">
   <div id="videoAdPopup">
     <div class="preloader">
@@ -126,12 +122,6 @@
   </div>
 </dialog>
 
-<dialog id="shareCustomThemeUrlModal" class="modalWrapper hidden">
-  <div class="modal">
-    <input type="text" title="custom theme" />
-    <div class="button">ok</div>
-  </div>
-</dialog>
 <dialog id="googleSignUpModal" class="modalWrapper hidden">
   <form class="modal">
     <div class="title">Account name</div>
@@ -202,44 +192,7 @@
     <button class="saveButton">save</button>
   </div>
 </dialog>
-<dialog id="editPresetModal" class="modalWrapper hidden">
-  <form class="modal">
-    <div class="title popupTitle"></div>
-    <div class="group">
-      <div class="presetNameTitle">name</div>
-      <input type="text" title="presets" />
-    </div>
-    <label class="changePresetToCurrentCheckbox checkbox">
-      <input type="checkbox" />
-      Change preset to current settings
-    </label>
-    <div class="inputs">
-      <div class="presetType group" data-id="presetType">
-        <div class="title">Preset Type</div>
-        <div class="presetTypeButtonGroup">
-          <button value="full" type="button">full</button>
-          <button value="partial" type="button">partial</button>
-        </div>
-      </div>
-      <div class="partialPresetGroups group">
-        <div class="title">partial groups</div>
-        <div class="checkboxList"></div>
-      </div>
-    </div>
-    <div class="text deletePrompt"></div>
-    <button class="submit" type="submit">add</button>
-  </form>
-</dialog>
-<dialog id="shareCustomThemeModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Share custom theme</div>
-    <label class="checkbox">
-      <input type="checkbox" id="includeBackground" />
-      Include background information
-    </label>
-    <button>copy link to clipboard</button>
-  </div>
-</dialog>
+
 <dialog id="commandLine" class="modalWrapper hidden">
   <div class="modal">
     <div

frontend/src/styles/popups.scss

@@ -114,35 +114,6 @@ body.darkMode {
   }
 }
 
-#simpleModal {
-  .modal {
-    max-width: 500px;
-
-    form {
-      display: grid;
-      gap: 1rem;
-    }
-
-    .inputs {
-      display: grid;
-      gap: 1rem;
-    }
-
-    .text {
-      font-size: 1rem;
-      color: var(--text-color);
-    }
-  }
-  & [data-popup-id="viewApeKey"] {
-    textarea:disabled {
-      opacity: 1;
-    }
-  }
-  & [data-popup-id="devGenerateData"] {
-    max-width: 700px;
-  }
-}
-
 #googleSignUpModal {
   .modal {
     max-width: 425px;
@@ -333,102 +304,6 @@ body.darkMode {
   }
 }
 
-#apeKeysModal {
-  .modal {
-    max-width: 1000px;
-
-    grid-template-rows: max-content auto;
-    align-items: baseline;
-
-    .top {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      .title {
-        font-size: 1.5rem;
-        color: var(--sub-color);
-      }
-      button {
-        padding: 0.5em 2em;
-      }
-    }
-
-    .textButton {
-      justify-content: center;
-    }
-
-    .keyButtons {
-      display: grid;
-      grid-auto-flow: column;
-      gap: 1rem;
-      .button {
-        width: 3rem;
-      }
-    }
-
-    table {
-      width: 100%;
-      border-spacing: 0;
-      border-collapse: collapse;
-
-      tr td:first-child {
-        text-align: center;
-      }
-
-      tr.me {
-        td {
-          color: var(--main-color);
-          // font-weight: 900;
-        }
-      }
-
-      td {
-        padding: 0.5rem 0.5rem;
-      }
-
-      thead {
-        color: var(--sub-color);
-        font-size: 0.75rem;
-
-        td {
-          padding: 0.5rem;
-          background: var(--bg-color);
-          position: sticky;
-          top: 0;
-          z-index: 99;
-        }
-      }
-
-      tbody {
-        color: var(--text-color);
-
-        tr:nth-child(odd) td {
-          background: var(--sub-alt-color);
-        }
-      }
-
-      tfoot {
-        td {
-          padding: 1rem 0.5rem;
-          position: sticky;
-          bottom: -5px;
-          background: var(--bg-color);
-          color: var(--main-color);
-          z-index: 4;
-        }
-      }
-
-      tr {
-        td:first-child {
-          padding-left: 1rem;
-        }
-        td:last-child {
-          padding-right: 1rem;
-        }
-      }
-    }
-  }
-}
-
 #userReportModal {
   .modal {
     max-width: 800px;
@@ -466,84 +341,6 @@ body.darkMode {
     }
   }
 }
-#shareCustomThemeModal {
-  .modal {
-    max-width: 400px;
-
-    .buttons {
-      display: grid;
-      gap: 1rem;
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-  }
-}
-#shareCustomThemeUrlModal {
-  .modal {
-    max-width: 900px;
-  }
-}
-
-#editPresetModal {
-  .modal {
-    max-width: 450px;
-    gap: 1rem;
-    .presetNameTitle {
-      font-size: 0.75rem;
-      color: var(--sub-color);
-      text-transform: lowercase;
-    }
-  }
-
-  .group {
-    display: grid;
-    gap: 0.5rem;
-    align-items: center;
-    width: 100%;
-  }
-
-  input[type="text"] {
-    width: 100%;
-  }
-
-  .inputs {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-    font-size: 0.75rem;
-    .title {
-      color: var(--sub-color);
-      text-transform: lowercase;
-    }
-    .partialPresetGroups {
-      .checkboxList {
-        display: grid;
-        gap: 1rem;
-        grid-template-columns: 1fr 1fr;
-        .title {
-          color: var(--text-color);
-          text-transform: lowercase;
-        }
-        .checkboxTitlePair {
-          display: flex;
-          gap: 0.5rem;
-          button {
-            flex-grow: 1;
-          }
-        }
-      }
-    }
-    .presetType {
-      .presetTypeButtonGroup {
-        display: flex;
-        width: 100%;
-        gap: 0.5rem;
-        button {
-          flex-grow: 1;
-        }
-      }
-    }
-  }
-}
 
 #streakHourOffsetModal {
   .modal {

frontend/src/styles/tailwind.css

@@ -113,4 +113,11 @@
   .settings-highlight {
     animation: ring-flash 4s ease-in forwards;
   }
+
+  .darkMode {
+    input[type="date"]::-webkit-calendar-picker-indicator,
+    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+      filter: invert(1);
+    }
+  }
 }

frontend/src/ts/components/layout/overlays/Banners.tsx

@@ -3,7 +3,6 @@ import { debounce } from "throttle-debounce";
 
 import { createEffectOn } from "../../../hooks/effects";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
-import { showPopup } from "../../../modals/simple-modals-base";
 import {
   Banner as BannerType,
   addBanner,
@@ -14,6 +13,7 @@ import { setGlobalOffsetTop } from "../../../states/core";
 import { getSnapshot } from "../../../states/snapshot";
 import { cn } from "../../../utils/cn";
 import { Fa } from "../../common/Fa";
+import { showUpdateNameModal } from "../../modals/account-settings/UpdateNameModal";
 
 function Banner(props: BannerType): JSXElement {
   const remove = (): void => {
@@ -89,9 +89,7 @@ export function Banners(): JSXElement {
               <button
                 type="button"
                 class="px-2 py-1"
-                onClick={() => {
-                  showPopup("updateName");
-                }}
+                onClick={() => showUpdateNameModal()}
               >
                 Click here
               </button>{" "}