Docs tweaks and change popup button style

app/index.html

@@ -94,7 +94,7 @@
             <button id="account-delete" class="action-text delete-action noborder nobackground">DELETE</button>
           </div>
           <div class="menu-items">
-            <button class="menu-row profile-option" onclick="window.location.href='//sander.vonk.one/VITE/About/'">About</button>
+            <button class="menu-row profile-option" onclick="window.location.href='/VITE/docs/'">About</button>
             <button class="menu-row profile-option" auth="logout-button">Sign Out</button>
           </div>
         </div>

app/learn.html

@@ -94,7 +94,7 @@
             <button id="account-delete" class="action-text delete-action noborder nobackground">DELETE</button>
           </div>
           <div class="menu-items">
-            <button class="menu-row profile-option" onclick="window.location.href='//sander.vonk.one/VITE/About/'">About</button>
+            <button class="menu-row profile-option" onclick="window.location.href='/VITE/docs/'">About</button>
             <button class="menu-row profile-option" auth="logout-button">Sign Out</button>
           </div>
         </div>

css/common.css

@@ -404,7 +404,7 @@ input:checked + .switch-label {
 }
 .toast-overlay,
 .popup-overlay {
-  z-index: 10000000;
+  z-index: 262142;
   position: fixed;
   top: 0;
   left: 0;
@@ -447,22 +447,19 @@ input:checked + .switch-label {
 /** POPUP **/
 .popup {
   width: calc(100% - 40px);
+  z-index: 262143;
   border-radius: 20px;
-  z-index: 100000000;
   margin: 20px;
   padding: 10px;
   box-sizing: border-box;
-  background-color: var(--toast-bg);
-  color: var(--toast-text);
-  border-color: var(--toast-border) !important;
-  --check-button-blank: var(--toast-secondary);
-  --check-button-blank-accent: var(--toast-border);
+  background-color: var(--popup-bg);
+  color: var(--on-popup-bg);
   position: fixed;
   display: flex;
   flex-flow: column;
   top: 50%;
   left: 50%;
-  max-width: 460px;
+  max-width: 360px;
   transform: translateX(-20px) translateX(-50%) translateY(-50%);
 }
 @keyframes fadeout {
@@ -507,16 +504,43 @@ input:checked + .switch-label {
   --button-accent: var(--check-button-blank-accent) !important;
   --button-border: var(--check-button-blank-accent) !important;
 }
+#popup-buttons {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  width: 100%;
+  font-weight: 700 !important;
+}
+#popup-buttons button {
+  flex-grow: 0;
+  margin: 5px;
+  flex-basis: 25%;
+}
 .popup-button {
   font-size: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 40px;
+  border-radius: 40px;
+  border: solid 1.5px rgba(255, 255, 255, 0);
+  padding: 10px 20px;
+}
+.popup-button.delete-color {
+  background-color: var(--popup-red);
+  color: var(--popup-bg);
+}
+.primary-action {
+  background-color: var(--primary);
+  color: var(--popup-bg);
 }
 .secondary-action {
-  --button-bg: var(--check-button-blank);
-  --button-border: var(--check-button-blank-accent);
-  --button-accent: var(--check-button-blank-accent);
+  border-color: var(--primary);
+  background-color: var(--popup-bg);
+  color: var(--on-popup-bg);
+}
+.delete-container .secondary-action {
+  border-color: var(--on-popup-bg);
 }
 .popup-text {
   margin-bottom: 10px;
@@ -540,23 +564,7 @@ input:checked + .switch-label {
   width: 100%;
   justify-content: space-between;
 }
-#popup-buttons {
-  display: flex;
-  flex-flow: row nowrap;
-  width: 100%;
-  font-weight: 700 !important;
-}
-#popup-buttons button {
-  flex-grow: 1;
-  margin: 5px;
-  flex-basis: 25%;
-}
 
-.popup-button:active {
-  margin-top: 9px !important;
-  margin-bottom: 0px !important;
-  height: 40px;
-}
 .flex-row-nowrap {
   display: flex;
   flex-flow: row nowrap;

css/theme-dark.css

@@ -54,11 +54,19 @@
   --result-correct-bg: #1f3136;
   --result-incorrect-bg: #1f3136;
   /*toast*/
-  --toast-bg: #303030;
+  --toast-bg: #191c1d;
   --toast-bg-transparent: #303030aa;
   --toast-text: #ffffff;
   --toast-border: #242424;
   --toast-secondary: #3b3b3b;
+  /*popup*/
+  --primary: #6bd5ef;
+  --primary-container: #004e5c;
+  --on-primary: #003640;
+  --on-primary-container: #abedff;
+  --popup-bg: #191c1d;
+  --on-popup-bg: #e1e3e3;
+  --popup-red: #de3730;
   /*items*/
   --dropdown-border: #37464f;
   --dropdown-items: #37464f;

css/theme.css

@@ -60,8 +60,16 @@
   --toast-text: #181c1e;
   --toast-border: #c8c8c8;
   --toast-secondary: #e5e5e5;
+  /*popup*/
+  --primary: #00687a;
+  --primary-container: #abedff;
+  --on-primary: #ffffff;
+  --on-primary-container: #001f26;
+  --popup-bg: #fbfcfd;
+  --on-popup-bg: #191c1d;
+  --popup-red: #ff4b4b;
   /*login*/
-  --error-border: #ff4b4c;
+  --error-border: #de3730;
   --error-bg: #ffdfe0;
   /*items*/
   --dropdown-border: #aeaeae;

docs/conjugator/options.md

@@ -1,5 +1,7 @@
 # Conjugator Options
 
+<hr />
+
 > Conjugate.constructor([options])
 
 #### inputs:
@@ -31,6 +33,8 @@
   - {options}**.verb**
     - string of a verb (should match a key in `verbs.json`)
 
+<hr />
+
 > Conjugate.agreement(subjects)
 
 Used for adding agreement to needed conjugations. Only called when they should be added
@@ -59,6 +63,8 @@ Used for adding agreement to needed conjugations. Only called when they should b
       - "(s)"
       - "s"
 
+<hr />
+
 > Conjugate.conjugate(tense, subject, verb)
 
 Calls conjugator `__Tense(s, v)` on subject and verb based on tense input and returns the answers, plus some other data for building the practice page
@@ -81,6 +87,8 @@ Calls conjugator `__Tense(s, v)` on subject and verb based on tense input and re
   - {verb}**.verb**
     - object with information about the verb from `verbs.json`[name]
 
+<hr />
+
 > Conjugate.random(input)
 
 #### input
@@ -90,6 +98,8 @@ Calls conjugator `__Tense(s, v)` on subject and verb based on tense input and re
 - If an array: return a random value therein
 - If a number `n`: return a random number from 0 thru `n - 1`
 
+<hr />
+
 > Conjugate.versions(answer, subjects [,skip_agreement])
 
 ##### "answer"
@@ -106,6 +116,8 @@ Calls conjugator `__Tense(s, v)` on subject and verb based on tense input and re
 
 - Array of strings
 
+<hr />
+
 > Conjugate.compress(str)
 
 #### "input"

docs/edu/index.md

@@ -1,3 +1,5 @@
 # Schools & Education
 
-Documentation Coming Soon
+### Getting Started
+
+<hr />

docs/sidebar.md

@@ -4,6 +4,4 @@
 
   - [Options](conjugator/options)
 
-- [About](about/index)
-
 - [Schools & Education](edu/index)

js/class.js

@@ -286,16 +286,22 @@ function copyJoinCode() {
 $("#class-code, #student-info-code-row").click(copyJoinCode);
 $("#delete-button").click(function () {
   $(this).addClass("disabled");
-  new Popup("Do you want to delete this class?", "box fullborder default", 10000, "/VITE/img/icon/info-icon.svg", [
+  setTimeout(() => {
+    $(this).removeClass("disabled");
+  }, 10000);
+  new Popup("Do you want to delete this class?", "default delete-container", 10000, "/VITE/img/icon/info-icon.svg", [
     ["removePopup(); $('#delete-button').removeClass('disabled')", "Cancel", "secondary-action fullborder"],
-    ["deleteClass()", "Yes", "primary-action blue-button delete-document"],
+    ["deleteClass()", "Delete", "primary-action blue-button delete-color"],
   ]);
 });
 $("#student-leave-button").click(function () {
   $(this).addClass("disabled");
-  new Popup("Are you sure you want to leave this class?", "box fullborder default", 10000, "/VITE/img/icon/info-icon.svg", [
+  setTimeout(() => {
+    $(this).removeClass("disabled");
+  }, 10000);
+  new Popup("Are you sure you want to leave this class?", "default delete-container", 10000, "/VITE/img/icon/info-icon.svg", [
     ["removePopup(); $('#student-leave-class, #student-leave-class *').removeClass('disabled')", "Cancel", "secondary-action fullborder"],
-    ["leaveClass()", "Yes", "primary-action blue-button delete-document"],
+    ["leaveClass()", "Leave", "primary-action blue-button delete-color"],
   ]);
 });
 
@@ -322,9 +328,9 @@ function removeStudent(studentID) {
 }
 
 function removeStudentPopup(name, id) {
-  new Popup(`Are you sure you want to remove ${name} from this class?`, "box fullborder default", 10000, "/VITE/img/icon/info-icon.svg", [
+  new Popup(`Are you sure you want to remove ${name} from this class?`, "default delete-container", 10000, "/VITE/img/icon/info-icon.svg", [
     ["removePopup()", "Cancel", "secondary-action fullborder"],
-    [`removeStudent('${id}')`, "Remove", "primary-action blue-button delete-document"],
+    [`removeStudent('${id}')`, "Remove", "primary-action blue-button delete-color"],
   ]);
 }
 function getCMOptions() {

js/firestore-page-auth.js

@@ -337,7 +337,7 @@ function signOut() {
 }
 //! listeners
 $("[auth='logout-button']").click((e) => {
-  new Popup("Are you sure you want to sign out?", "box fullborder default", 10000, "/VITE/img/icon/info-icon.svg", [
+  new Popup("Are you sure you want to sign out?", "default", 10000, "/VITE/img/icon/info-icon.svg", [
     ["removePopup()", "Cancel", "secondary-action fullborder"],
     ["signOut(); removePopup()", "Yes", "primary-action"],
   ]);
@@ -399,8 +399,8 @@ function deleteUser() {
     });
 }
 $(document.body).on("click", "#delete-acc-button, #account-delete", (e) => {
-  new Popup("Are you sure you want to delete your account? <span class='delete-text'>THIS ACTION CANNOT BE REVERSED</span>", "box fullborder default", 10000, "/VITE/img/icon/info-icon.svg", [
+  new Popup("Are you sure you want to delete your account?", "default delete-container", 10000, "/VITE/img/icon/info-icon.svg", [
     ["removePopup()", "Cancel", "secondary-action fullborder"],
-    ["deleteUser(); removePopup()", "Yes", "primary-action blue-button delete-user"],
+    ["deleteUser(); removePopup()", "Delete", "primary-action delete-color"],
   ]);
 });