fix weird bevel look of inputs/selects, thicken borders, use badges for settings

required/restarts

README.md

@@ -1,14 +1,21 @@
 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
-* [x] invites tab mockup (partially complete)
+**general**
-* [x] accounts tab mockup
-* [x] settings tab mockup
 * [x] modal implementation
-* [x] modals
 * [x] animations
-* [x] JS to TS, utilities
+* [x] utilities
-* [ ] Integration with existing code
+* [x] CSS for light & dark
+
+**admin**
+* [x] invites tab
+* [x] accounts tab
+* [x] settings tab
+* [x] modals
+* [ ] integration with existing code
+
+**invites**
+* [ ] everything
 
 #### screenshots
 ##### dark

base.css

@@ -1,8 +1,15 @@
 @import "node_modules/a17t/dist/a17t.css";
-@import "node_modules/icons.css/dist/icons.css";
+@import "node_modules/remixicon/fonts/remixicon.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%;
 }
@@ -119,7 +126,7 @@
     background-color: inherit; /* so we can use a17t code blocks */
 }
 
-sup.\~critical {
+sup.\~critical, .text-critical {
     color: var(--color-critical-normal-content);
 }
 
@@ -252,8 +259,13 @@ sup.\~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><a href="https://github.com/hrfee/jfa-go/tree/a17t-redesign">Github (ICON)</a></p>
+                <p><i class="icon ri-github-fill"></i><a href="https://github.com/hrfee/jfa-go">jfa-go</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>
@@ -137,7 +137,7 @@
                                 <span class="inv-expiry mr-1">Expires in 30m</span>
                                 <span class="button ~critical !normal">Delete</span>
                                 <label>
-                                    <i class="icon icon-arrow-down not-rotated"></i>
+                                    <i class="icon ri-arrow-down-s-line not-rotated"></i>
                                     <input type="checkbox" class="toggle-details unfocused">
                                 </label>
                             </div>
@@ -220,6 +220,7 @@
                                     <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>
@@ -262,13 +263,13 @@
                                 <tr>
                                     <td><input type="checkbox" value=""></td>
                                     <td>Person <span class="chip ~info ml-1">Admin</span></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><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>13/12/20 00:39</td>
                                 </tr>
                                 <tr>
                                     <td><input type="checkbox" value=""></td>
                                     <td>Other person</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><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>12/12/20 17:46</td>
                                 </tr>
                             </tbody>
@@ -284,7 +285,7 @@
                     </div>
                     <div class="row">
                         <div class="card ~neutral !normal col">
-                            <aside class="aside sm ~info mb-half">Note: <sup class="~critical">*</sup> indicates a required field, <sup class="~critical">R</sup> indicates changes require a restart.</aside> 
+                            <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> 
                             <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>
@@ -292,7 +293,7 @@
                             <div class="settings-section">
                                 <p class="support lg mb-half">Settings section description.</p>
                                 <div class="setting">
-                                    <label class="label" for="settings-select">Select <sup class="~critical">R</sup></label>
+                                    <label class="label" for="settings-select">Select <span class="badge ~critical">R</span></label>
                                     <div class="select ~neutral !normal mt-half">
                                         <select id="settings-select">
                                             <option>Option 1</option>
@@ -300,13 +301,13 @@
                                     </div>
                                 </div>
                                 <div class="setting">
-                                    <label class="label" for="settings-input">Input <sup class="~critical">*</sup></label>
+                                    <label class="label" for="settings-input">Input <span class="badge ~critical">*</span></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 <sup class="~critical">R</sup></span>
+                                        <span>Checkbox <span class="badge ~critical">R</span></span>
                                     </label>
                                 </div>
                             </div>

package.json

@@ -0,0 +1,41 @@
+{
+  "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

@@ -47,18 +47,21 @@ 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('!normal');
+        check.parentElement.classList.toggle('~neutral');
-        check.parentElement.classList.toggle('!high');
+        check.parentElement.classList.toggle('~urge');
+        check.parentElement.parentElement.nextElementSibling.classList.toggle('unfocused');
     } else if (mode == 1) {
         uses.disabled = true;
         check.checked = true;
-        check.parentElement.classList.remove('!normal');
+        check.parentElement.classList.remove('~neutral');
-        check.parentElement.classList.add('!high');
+        check.parentElement.classList.add('~urge');
+        check.parentElement.parentElement.nextElementSibling.classList.remove('unfocused');
     } else {
         uses.disabled = false;
         check.checked = false;
-        check.parentElement.classList.remove('!high');
+        check.parentElement.classList.remove('~urge');
-        check.parentElement.classList.add('!normal');
+        check.parentElement.classList.add('~neutral');
+        check.parentElement.parentElement.nextElementSibling.classList.add('unfocused');
     }
 };
 
@@ -69,18 +72,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('!normal');
+        check.parentElement.classList.toggle('~neutral');
-        check.parentElement.classList.toggle('!high');
+        check.parentElement.classList.toggle('~urge');
     } else if (mode == 1) {
         input.disabled = false;
         check.checked = true;
-        check.parentElement.classList.remove('!normal');
+        check.parentElement.classList.remove('~neutral');
-        check.parentElement.classList.add('!high');
+        check.parentElement.classList.add('~urge');
     } else {
         input.disabled = true;
         check.checked = false;
-        check.parentElement.classList.remove('!high');
+        check.parentElement.classList.remove('~urge');
-        check.parentElement.classList.add('!normal');
+        check.parentElement.classList.add('~neutral');
     }
 };
 let invEmailEnabled = document.getElementById('inv-email-enabled') as HTMLInputElement;
@@ -95,11 +98,23 @@ 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('icon-edit');
+            editButton.classList.toggle('ri-edit-line');
-            editButton.classList.toggle('icon-check');
+            editButton.classList.toggle('ri-check-line');
+            if (editButton.classList.contains('ri-check-line')) {
+                document.addEventListener('click', outerClickListener);
+            }
         };
     }
 };
@@ -180,4 +195,3 @@ 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);
-