README.md

@@ -1,21 +1,14 @@
 This branch is for experimenting with [a17t](https://a17t.miles.land/) to possibly replace bootstrap in the future. Currently just working on the page structures, so none of this is actually usable in jfa-go yet.
 
 #### todo
-**general**
+* [x] invites tab mockup (partially complete)
+* [x] accounts tab mockup
+* [x] settings tab mockup
 * [x] modal implementation
-* [x] animations
-* [x] utilities
-* [x] CSS for light & dark
-
-**admin**
-* [x] invites tab
-* [x] accounts tab
-* [x] settings tab
 * [x] modals
-* [ ] integration with existing code
+* [x] animations
-
+* [x] JS to TS, utilities
-**invites**
+* [ ] Integration with existing code
-* [ ] everything
 
 #### screenshots
 ##### dark

base.css

@@ -1,15 +1,8 @@
 @import "node_modules/a17t/dist/a17t.css";
-@import "node_modules/remixicon/fonts/remixicon.css";
+@import "node_modules/icons.css/dist/icons.css";
 @import "modal.css";
 @import "dark.css";
 
-:root {
-    --border-width-default: 2px;
-    --border-width-2: 3px;
-    --border-width-4: 5px;
-    --border-width-8: 8px;
-}
-
 .light-theme {
     --settings-section-button-filter: 90%;
 }
@@ -18,97 +11,158 @@
     background-color: #101010;
 }
 
-.page-container {
+.pageContainer {
     margin: 5% 20% 5% 20%;
 }
-
 @media (max-width: 1100px) {
-    .page-container {
+    .pageContainer {
         margin: 2%;
     }
 }
-
+.contactBox {
-.tab-button {
+    color: grey;
+}
+#container {
+    margin-top: 5%;
+    margin-bottom: 5%;
+}
+.tabText {
     font-size: 2rem;
 }
-
-.mb-half {
-    margin-bottom: 0.5rem;
-}
-
 .mb-1 {
     margin-bottom: 1rem;
 }
-
+.mb-half {
-.mb-2 {
+    margin-bottom: 0.5rem;
-    margin-bottom: 2rem;
 }
-
-.mt-half {
-    margin-top: 0.5rem;
-}
-
-.mt-1 {
-    margin-top: 1rem;
-}
-
-.ml-1 {
-    margin-left: 1rem;
-}
-
-.mr-1 {
-    margin-right: 1rem;
-}
-
 .pb-1 {
     padding-bottom: 1rem;
 }
-
 .pl-1 {
     padding-left: 1rem;
 }
-
+.mr-1 {
+    margin-right: 1rem;
+}
+.ml-1 {
+    margin-left: 1rem;
+}
+.mb-2 {
+    margin-bottom: 2rem;
+}
+.mt-1 {
+    margin-top: 1rem;
+}
+.mt-half {
+    margin-top: 0.5rem;
+}
+.inv-codearea {
+    /*width: 40%;*/
+}
 .al {
     text-align: left;
 }
-
-.ar {
-    text-align: right;
-}
-
 .inline-block {
     display: inline-block;
 }
-
+.ar {
-.align-top {
+    text-align: right;
-    align-items: top;
 }
-
+.monospace {
-.flex-expand {
+    background-color: inherit;
+}
+.mt-half {
+    margin-top: 0.5rem;
+}
+.table-header { 
+    padding-left: 0.5rem;
+    padding-bottom: 0.2rem;
+}
+.inv {
+    overflow: visible;
+}
+.inv-header {
     display: flex;
     justify-content: space-between;
 }
-
+.button-input {
-.flex-row {
     display: flex;
-    flex-direction: row;
+    justify-content: space-between;
 }
-
+.inv-row {
-.flex-row-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: top;
+}
+.ib {
+    display: inline-block;
+}
+.inv-profileselect {
+    min-width: 100%;
+}
+.inv-table {
+    font-size: 0.8rem;
+}
+.no-lp {
+    padding-left: 0px;
+}
+.block { display: block; }
+.hiding {
+    animation: slide-out 0.1s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
+}
+.hidden {
+    display: none;
+}
+.visible {
     display: block;
-    flex-grow: 1;
+    /*animation: fade-in 0.2s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;*/
+}
+@keyframes fade-in {
+    from {
+        opacity: 0;
+        visibility: hidden;
+    }
+    to {
+        opacity: 1;
+        visibility: visible;
+    }
+}
+@keyframes slide-out {
+    from {
+        opacity: 1;
+        visibility: visible;
+    }
+    to {
+        opacity: 0;
+        visibility: hidden;
+    }
+}
+.toggle-details {
+    display: none;
+}
+.rotated {
+    transform: rotate(180deg);
+-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
+-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
+ -o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
+    transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */
 }
 
+.not-rotated {
+    transform: rotate(0deg);
+-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
+-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
+ -o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
+    transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */
+}
 .row {
     display: flex;
     flex-wrap: wrap;
 }
-
 .col {
     flex: 1;
     margin: 0.5rem;
 }
-
 @media screen and (max-width: 400px) {
     .row {
         flex-direction: column;
@@ -117,108 +171,28 @@
         flex: 45%;
     }
 }
-
+.input { 
-.fr {
+    box-sizing: border-box;
-    float: right;
 }
 
-.monospace {
+.submit {
-    background-color: inherit; /* so we can use a17t code blocks */
+    border: none;
-}
+    outline: none;
-
-sup.\~critical, .text-critical {
-    color: var(--color-critical-normal-content);
-}
-
-.aside.sm {
-    font-size: 0.8rem;
-    padding: 0.8rem;
-}
-
-.support.lg {
-    font-size: 1rem;
-}
-
-.table-header {
-    padding-left: 0.5rem;
-    padding-bottom: 0.2rem;
-}
-
-.inv {
-    overflow: visible;
-}
-
-.inv-table {
-    font-size: 0.8rem;
-}
-
-.inv-profileselect {
-    min-width: 100%;
-}
-
-.input {
-    box-sizing: border-box; /* fixes weird length issue with inputs */
 }
 
 .button-lg {
     height: 3rem;
 }
-
+.full-width {
-.submit {
+    box-sizing: border-box;
-    border: none;
-    outline: none; /* remove browser styling on submit buttons */
-}
-
-.full-width { /* full width inputs */
-    box-sizing: border-box; /* TODO: maybe remove if we figure out input thing? */
     width: 100%;
 }
-
-.center {
-    justify-content: center;
-}
-
-.no-lp {
-    padding-left: 0px;
-}
-
-.block { 
-    display: block;
-}
-
-.focused {
-    display: block;
-}
-
 .unfocused {
     display: none;
 }
-
+.fr {
-.rotated {
+    float: right;
-    transform: rotate(180deg);
-    -webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-    -moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-    -o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-    transition: all 0.3s cubic-bezier(0,.89,.27,.92);
 }
-
-.not-rotated {
-    transform: rotate(0deg);
-    -webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-    -moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-    -o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-    transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-}
-
-.stealth-input {
-    font-size: 1rem;
-    padding-top: 0.1rem;
-    padding-bottom: 0.1rem;
-    margin-left: 0.5rem;
-    margin-right: 1rem;
-    max-width: 50%;
-}
-
 .stealth-input-hidden {
     border-style: none;
     --fallback-box-shadow: none;
@@ -227,31 +201,72 @@ sup.\~critical, .text-critical {
     padding-top: 0.1rem;
     padding-bottom: 0.1rem;
 }
+.stealth-input {
+    font-size: 1rem;
+    padding-top: 0.1rem;
+    padding-bottom: 0.1rem;
+    margin-left: 0.5rem;
+    margin-right: 1rem;
+    max-width: 50%;
 
+}
 .settings-section-button {
     box-sizing: border-box;
     width: 100%;
     height: 2.5rem;
-    background-color: rgba(0,0,0,0);
+    background-color: rgba(0, 0, 0, 0);
 }
+.settings-section-button:hover {
+    box-sizing: border-box;
+    width: 100%;
+    height: 2.5rem;
+    background-color: var(--color-neutral-normal-fill);
+    filter: brightness(var(--settings-section-button-filter)) !important;
 
-.settings-section-button:hover, .settings-section-button:focus {
+}
+.settings-section-button:focus {
     box-sizing: border-box;
     width: 100%;
     height: 2.5rem;
     background-color: var(--color-neutral-normal-fill);
     filter: brightness(var(--settings-section-button-filter)) !important;
 }
-
 .settings-section-button.selected {
     background-color: var(--color-neutral-normal-fill);
-    --buton-filter-brightness: var(--settings-section-button-filter);
+    --button-filter-brightness: var(--settings-section-button-filter);
     filter: brightness(var(--settings-section-button-filter)) !important;
 }
-
+.text-critical {
+    color: var(--color-critical-normal-content);
+}
+.aside.small {
+    font-size: 0.8rem;
+    padding: 0.8rem;
+}
 .setting {
     margin-bottom: 0.25rem;
 }
+.support.large {
+    font-size: 1rem;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.fw-group {
+    display: block;
+    flex-grow: 1;
+}
+
+.center {
+    justify-content: center;
+}
 
 .textarea {
     resize: vertical;
@@ -259,13 +274,8 @@ sup.\~critical, .text-critical {
 
 select {
     color: inherit;
-    border: 0 solid var(--color-neutral-300);
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
 }
 
 input {
     color: inherit;
-    border: 0 solid var(--color-neutral-300);
 }

index.html

@@ -25,7 +25,7 @@
             <div class="modal-content content card">
                 <span class="heading">About <span class="modal-close">&times;</span></span>
                 <img src="images/banner.svg" class="mt-1" alt="jfa-go banner">
-                <p><i class="icon ri-github-fill"></i><a href="https://github.com/hrfee/jfa-go">jfa-go</a></p>
+                <p><a href="https://github.com/hrfee/jfa-go/tree/a17t-redesign">Github (ICON)</a></p>
                 <p>Version <span class="code monospace">a17t-redesign</span></p>
                 <p>Commit <span class="code monospace">cb28097</span></p>
                 <p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License.</a></p>
@@ -36,12 +36,12 @@
                 <span class="heading"><span id="header-modify-user">Modify Settings</span> <span class="modal-close">&times;</span></span>
                 <p class="content">Apply settings from an existing profile, or source them directly from a user.</p>
                 <div class="flex-row mb-1">
-                    <label class="flex-row-group mr-1">
+                    <label class="fw-group mr-1">
-                        <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-profile" checked>
+                        <input type="radio" name="modify-user-source" class="hidden" id="radio-use-profile" checked>
                         <span class="button ~neutral !high supra full-width center">Profile</span>
                     </label>
-                    <label class="flex-row-group ml-1">
+                    <label class="fw-group ml-1">
-                        <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-user">
+                        <input type="radio" name="modify-user-source" class="hidden" id="radio-use-user">
                         <span class="button ~neutral !normal supra full-width center">User</span>
                     </label>
                 </div>
@@ -52,7 +52,7 @@
                         <option>Default</option>
                     </select>
                 </div>
-                <div id="modify-user-users" class="select ~neutral !normal mb-1 unfocused">
+                <div id="modify-user-users" class="select ~neutral !normal mb-1 hidden">
                     <select>
                         <option>Person</option>
                         <option>Other person</option>
@@ -107,13 +107,13 @@
                 <input type="submit" class="button ~urge !normal full-width center supra submit" value="Submit">
             </form>
         </div>
-        <div class="page-container max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
+        <div class="pageContainer max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
             <div class="mb-1">
                 <header class="flex flex-wrap items-center justify-between">
                     <div class="text-neutral-700">
-                        <span id="invitesTab-button" class="tab-button portal ~urge active">Invites</span>
+                        <span id="invitesTab-button" class="tabText portal ~urge active">Invites</span>
-                        <span id="accountsTab-button" class="tab-button portal">Accounts</span>
+                        <span id="accountsTab-button" class="tabText portal">Accounts</span>
-                        <span id="settingsTab-button" class="tab-button portal">Settings</span>
+                        <span id="settingsTab-button" class="tabText portal">Settings</span>
                     </div>
                 </header>
             </div>
@@ -128,7 +128,7 @@
                 <div class="card ~neutral !low invites mb-1">
                     <span class="heading">Invites</span>
                     <div class="inv">
-                        <div class="card ~neutral !normal inv-header flex-expand mt-half">
+                        <div class="card ~neutral !normal inv-header mt-half">
                             <div class="inv-codearea">
                                 <a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a>
                                 <span class="button ~info !normal">Copy</span>
@@ -137,16 +137,16 @@
                                 <span class="inv-expiry mr-1">Expires in 30m</span>
                                 <span class="button ~critical !normal">Delete</span>
                                 <label>
-                                    <i class="icon ri-arrow-down-s-line not-rotated"></i>
+                                    <i class="icon icon-arrow-down not-rotated"></i>
-                                    <input type="checkbox" class="toggle-details unfocused">
+                                    <input type="checkbox" class="toggle-details">
                                 </label>
                             </div>
                         </div>
-                        <div class="card ~neutral !normal mt-half inv-details mt-half unfocused">
+                        <div class="card ~neutral !normal mt-half inv-details mt-half hidden">
-                            <div class="inv-row flex-expand align-top">
+                            <div class="inv-row">
                                 <div class="inv-profilearea">
                                     <p class="supra mb-1">Profile</p>
-                                    <div class="select ~neutral !normal inv-profileselect inline-block">
+                                    <div class="select ~neutral !normal inv-profileselect ib">
                                         <select>
                                             <option>Friends</option>
                                             <option>Family</option>
@@ -213,14 +213,13 @@
                         </div>
                         <div class="card ~neutral !normal col">
                             <label class="label supra" for="inv-uses">Number of uses</label>
-                            <div class="flex-expand mb-1">
+                            <div class="button-input mb-1">
                                 <input type="number" min="0" id="inv-uses" class="input ~neutral !normal mr-1" value=1>
                                 <label for="inv-inf-uses" class="button ~neutral !normal">
                                     <span>∞</span>
                                     <input type="checkbox" class="unfocused" id="inv-inf-uses" aria-label="Set uses to infinite">
                                 </label>
                             </div>
-                            <p class="support unfocused"><span class="badge ~critical">Warning</span> invites with infinite uses can be used abusively.</p>
                             <label class="label supra">Profile</label>
                             <div class="select ~neutral !normal mb-1" id="inv-profile">
                                 <select>
@@ -230,7 +229,7 @@
                                 </select>
                             </div>
                             <label class="label supra">Send to</label>
-                            <div class="flex-expand mb-1">
+                            <div class="button-input mb-1">
                                 <input type="email" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com">
                                 <label for="inv-email-enabled" class="button ~neutral !normal">
                                     <input type="checkbox" id="inv-email-enabled" aria-label="Send to address enabled">
@@ -263,13 +262,13 @@
                                 <tr>
                                     <td><input type="checkbox" value=""></td>
                                     <td>Person <span class="chip ~info ml-1">Admin</span></td>
-                                    <td><i class="icon ri-edit-line"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="email@addr.ess" readonly></td>
+                                    <td><i class="icon icon-edit"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="email@addr.ess" readonly></td>
                                     <td>13/12/20 00:39</td>
                                 </tr>
                                 <tr>
                                     <td><input type="checkbox" value=""></td>
                                     <td>Other person</td>
-                                    <td><i class="icon ri-edit-line"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="eee@ma.il" readonly></td>
+                                    <td><i class="icon icon-edit"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="eee@ma.il" readonly></td>
                                     <td>12/12/20 17:46</td>
                                 </tr>
                             </tbody>
@@ -285,15 +284,15 @@
                     </div>
                     <div class="row">
                         <div class="card ~neutral !normal col">
-                            <aside class="aside sm ~info mb-half">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~critical">R</span> indicates changes require a restart.</aside> 
+                            <aside class="aside small ~info mb-half">Note: <sup class="text-critical">*</sup> indicates a required field, <sup class="text-critical">R</sup> indicates changes require a restart.</aside> 
                             <span class="button ~neutral !low settings-section-button mb-half" id="setting-about">About</span>
                             <span class="button ~neutral !low settings-section-button mb-half selected">User Profiles</span>
                         </div>
                         <div class="card ~neutral !normal col">
                             <div class="settings-section">
-                                <p class="support lg mb-half">Settings section description.</p>
+                                <p class="support large mb-half">Settings section description.</p>
                                 <div class="setting">
-                                    <label class="label" for="settings-select">Select <span class="badge ~critical">R</span></label>
+                                    <label class="label" for="settings-select">Select <sup class="text-critical">R</sup></label>
                                     <div class="select ~neutral !normal mt-half">
                                         <select id="settings-select">
                                             <option>Option 1</option>
@@ -301,13 +300,13 @@
                                     </div>
                                 </div>
                                 <div class="setting">
-                                    <label class="label" for="settings-input">Input <span class="badge ~critical">*</span></label>
+                                    <label class="label" for="settings-input">Input <sup class="text-critical">*</sup></label>
                                     <input type="text" class="input ~neutral !normal mt-half" placeholder="Value">
                                 </div>
                                 <div class="setting">
                                     <label class="switch settings">
                                         <input type="checkbox" id="settings-check">
-                                        <span>Checkbox <span class="badge ~critical">R</span></span>
+                                        <span>Checkbox <sup class="text-critical">R</sup></span>
                                     </label>
                                 </div>
                             </div>

package.json

@@ -1,41 +0,0 @@
-{
-  "name": "jfa-go",
-  "version": "1.0.0",
-  "description": "This is only used for grabbing scss build dependencies, and isn't a real package.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "ts": "nodemon -e ts --watch ts --exec 'sh -c \"esbuild ts/*.ts --sourcemap --outdir=./\"'",
-    "serve": "npx live-server --ignore=\"ts/**,node_modules/**\"",
-    "serve-ts": "concurrently --kill-others \"npm run serve\" \"npm run ts\""
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/hrfee/jfa-go.git"
-  },
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/hrfee/jfa-go/issues"
-  },
-  "homepage": "https://github.com/hrfee/jfa-go#readme",
-  "dependencies": {
-    "@types/jquery": "^3.5.3",
-    "a17t": "^0.4.0",
-    "autoprefixer": "^9.8.5",
-    "bootstrap": "^5.0.0-alpha3",
-    "bootstrap4": "npm:bootstrap@^4.5.0",
-    "clean-css-cli": "^4.3.0",
-    "esbuild": "^0.7.8",
-    "lodash": "^4.17.19",
-    "mjml": "^4.6.3",
-    "postcss-cli": "^7.1.1",
-    "remixicon": "^2.5.0",
-    "typescript": "^4.0.3"
-  },
-  "devDependencies": {
-    "concurrently": "^5.3.0",
-    "live-server": "^1.2.1",
-    "nodemon": "^2.0.6"
-  }
-}

ts/main.ts

@@ -31,12 +31,12 @@ const toggles: HTMLInputElement[] = Array.from(document.getElementsByClassName('
 for (let toggle of toggles) {
     toggle.onclick = () => {
         const el = toggle.parentElement.parentElement.parentElement.nextElementSibling as HTMLDivElement;
-        if (el.classList.contains("focused")) {
+        if (el.classList.contains("visible")) {
-            el.classList.toggle("focused");
+            el.classList.toggle("visible");
-            el.classList.toggle("unfocused");
+            el.classList.toggle("hidden");
         } else {
-            el.classList.toggle("unfocused");
+            el.classList.toggle("hidden");
-            el.classList.toggle("focused");
+            el.classList.toggle("visible");
         }
         toggle.previousElementSibling.classList.toggle("rotated");
         toggle.previousElementSibling.classList.toggle("not-rotated");
@@ -47,21 +47,18 @@ const checkInfUses = function (check: HTMLInputElement, mode = 2) {
     const uses = document.getElementById('inv-uses') as HTMLInputElement;
     if (mode == 2) {
         uses.disabled = check.checked;
-        check.parentElement.classList.toggle('~neutral');
+        check.parentElement.classList.toggle('!normal');
-        check.parentElement.classList.toggle('~urge');
+        check.parentElement.classList.toggle('!high');
-        check.parentElement.parentElement.nextElementSibling.classList.toggle('unfocused');
     } else if (mode == 1) {
         uses.disabled = true;
         check.checked = true;
-        check.parentElement.classList.remove('~neutral');
+        check.parentElement.classList.remove('!normal');
-        check.parentElement.classList.add('~urge');
+        check.parentElement.classList.add('!high');
-        check.parentElement.parentElement.nextElementSibling.classList.remove('unfocused');
     } else {
         uses.disabled = false;
         check.checked = false;
-        check.parentElement.classList.remove('~urge');
+        check.parentElement.classList.remove('!high');
-        check.parentElement.classList.add('~neutral');
+        check.parentElement.classList.add('!normal');
-        check.parentElement.parentElement.nextElementSibling.classList.add('unfocused');
     }
 };
 
@@ -72,18 +69,18 @@ const checkEmailEnabled = function (check: HTMLInputElement, mode = 2) {
     const input = document.getElementById('inv-email') as HTMLInputElement;
     if (mode == 2) {
         input.disabled = !check.checked;
-        check.parentElement.classList.toggle('~neutral');
+        check.parentElement.classList.toggle('!normal');
-        check.parentElement.classList.toggle('~urge');
+        check.parentElement.classList.toggle('!high');
     } else if (mode == 1) {
         input.disabled = false;
         check.checked = true;
-        check.parentElement.classList.remove('~neutral');
+        check.parentElement.classList.remove('!normal');
-        check.parentElement.classList.add('~urge');
+        check.parentElement.classList.add('!high');
     } else {
         input.disabled = true;
         check.checked = false;
-        check.parentElement.classList.remove('~urge');
+        check.parentElement.classList.remove('!high');
-        check.parentElement.classList.add('~neutral');
+        check.parentElement.classList.add('!normal');
     }
 };
 let invEmailEnabled = document.getElementById('inv-email-enabled') as HTMLInputElement;
@@ -98,23 +95,11 @@ const loadAccounts = function () {
         const row = rows[i];
         const editButton = row.querySelector(".icon") as HTMLElement;
         const emailInput = row.querySelector(".input") as HTMLInputElement;
-        const outerClickListener = (event: Event) => {
-            if (!(event.target instanceof HTMLElement && (emailInput.contains(event.target) || editButton.contains(event.target)))) {
-                emailInput.classList.toggle('stealth-input-hidden');
-                emailInput.readOnly = !emailInput.readOnly;
-                editButton.classList.toggle('ri-edit-line');
-                editButton.classList.toggle('ri-check-line');
-                document.removeEventListener('click', outerClickListener);
-            }
-        };
         editButton.onclick = function () {
             emailInput.classList.toggle('stealth-input-hidden');
             emailInput.readOnly = !emailInput.readOnly;
-            editButton.classList.toggle('ri-edit-line');
+            editButton.classList.toggle('icon-edit');
-            editButton.classList.toggle('ri-check-line');
+            editButton.classList.toggle('icon-check');
-            if (editButton.classList.contains('ri-check-line')) {
-                document.addEventListener('click', outerClickListener);
-            }
         };
     }
 };
@@ -130,8 +115,8 @@ const modifySettingsSource = function () {
     (user.nextElementSibling as HTMLSpanElement).classList.toggle('!high');
     (profile.nextElementSibling as HTMLSpanElement).classList.toggle('!normal');
     (profile.nextElementSibling as HTMLSpanElement).classList.toggle('!high');
-    profileSelect.classList.toggle('unfocused');
+    profileSelect.classList.toggle('hidden');
-    userSelect.classList.toggle('unfocused');
+    userSelect.classList.toggle('hidden');
 }
 
 const radioUseProfile = document.getElementById('radio-use-profile') as HTMLInputElement;
@@ -143,9 +128,9 @@ radioUseUser.checked = false;
 
 const checkDeleteUserNotify = function () {
     if ((document.getElementById('delete-user-notify') as HTMLInputElement).checked) {
-        document.getElementById('textarea-delete-user').classList.remove('unfocused');
+        document.getElementById('textarea-delete-user').classList.remove('hidden');
     } else {
-        document.getElementById('textarea-delete-user').classList.add('unfocused');
+        document.getElementById('textarea-delete-user').classList.add('hidden');
     }
 };
 
@@ -195,3 +180,4 @@ const modalRefresh = new Modal(document.getElementById('modal-refresh'));
 
 const modalOmbiDefaults = new Modal(document.getElementById('modal-ombi-defaults'));
 document.getElementById('form-ombi-defaults').addEventListener('submit', modalOmbiDefaults.close);
+