From 2f50ab36fd771e56177108fa8678a90c83579dcd Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Tue, 4 Jan 2022 20:09:51 +0000
Subject: [PATCH] pad table and some other stuff

---
 html/admin.html        | 10 +++++-----
 ts/modules/accounts.ts |  2 +-
 ts/modules/invites.ts  |  6 +++---
 ts/modules/settings.ts | 19 ++++++++++---------
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/html/admin.html b/html/admin.html
index 345041b..305a9d3 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -213,7 +213,7 @@
                         <thead>
                             <tr>
                                 <th>{{ .strings.name }}</th>
-                                <th>{{ .strings.reset }}</th>
+                                <th class="table-inline justify-center">{{ .strings.reset }}</th>
                                 <th>{{ .strings.edit }}</th>
                             </tr>
                         </thead>
@@ -542,7 +542,7 @@
                                     <input type="checkbox" class="unfocused" id="create-inf-uses" aria-label="Set uses to infinite">
                                 </label>
                             </div>
-                            <p class="support unfocused" id="create-inf-uses-warning"><span class="badge ~critical">{{ .strings.warning }}</span> {{ .strings.inviteInfiniteUsesWarning }}</p>
+                            <p class="support unfocused my-2" id="create-inf-uses-warning"><span class="badge ~critical">{{ .strings.warning }}</span> {{ .strings.inviteInfiniteUsesWarning }}</p>
                             <label class="label supra">{{ .strings.profile }}</label>
                             <div class="select ~neutral @low mb-2 mt-4">
                                 <select id="create-profile">
@@ -602,11 +602,11 @@
                         </div>
                     </div>
                     <div class="card @low accounts-header table-responsive mt-8">
-                        <table class="table">
+                        <table class="table text-base leading-4">
                             <thead>
                                 <tr>
                                     <th><input type="checkbox" value="" id="accounts-select-all"></th>
-                                    <th>{{ .strings.username }}</th>
+                                    <th class="table-inline my-2">{{ .strings.username }}</th>
                                     <th>{{ .strings.emailAddress }}</th>
                                     {{ if .telegramEnabled }}
                                     <th class="text-center-i">Telegram</th>
@@ -643,7 +643,7 @@
                     </div>
                     <div class="row">
                         <div class="card @low dark:~d_neutral col" id="settings-sidebar">
-                            <aside class="aside sm ~info mb-2 @high" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info">R</span> indicates changes require a restart.</aside> 
+                            <aside class="aside sm ~urge dark:~d_info mb-2 @low" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info dark:~d_warning">R</span> indicates changes require a restart.</aside> 
                             <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span>
                             <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-profiles"><span class="flex">{{ .strings.userProfiles }} <i class="ri-user-line ml-2"></i></span></span>
                         </div>
diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index 38d5935..d94a412 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -387,7 +387,7 @@ class user implements User {
         this._row = document.createElement("tr") as HTMLTableRowElement;
         let innerHTML = `
             <td><input type="checkbox" value=""></td>
-            <td><div class="table-inline"><span class="accounts-username"></span> <span class="accounts-admin"></span> <span class="accounts-disabled"></span></span></td>
+            <td><div class="table-inline"><span class="accounts-username py-2"></span> <span class="accounts-admin"></span> <span class="accounts-disabled"></span></span></td>
             <td><div class="table-inline"><i class="icon ri-edit-line accounts-email-edit"></i><span class="accounts-email-container ml-2"></span></div></td>
         `;
         if (window.telegramEnabled) {
diff --git a/ts/modules/invites.ts b/ts/modules/invites.ts
index 80034ec..d917734 100644
--- a/ts/modules/invites.ts
+++ b/ts/modules/invites.ts
@@ -251,7 +251,7 @@ class DOMInvite implements Invite {
 
         this._header = document.createElement('div') as HTMLDivElement;
         this._container.appendChild(this._header);
-        this._header.classList.add("card", "~info", "dark:~d_neutral", "@low", "inv-header", "elem-pad", "no-pad", "flex-expand", "row", "mt-2", "overflow-y");
+        this._header.classList.add("card", "dark:~d_neutral", "@low", "inv-header", "elem-pad", "no-pad", "flex-expand", "row", "mt-2", "overflow-y");
 
         this._codeArea = document.createElement('div') as HTMLDivElement;
         this._header.appendChild(this._codeArea);
@@ -322,7 +322,7 @@ class DOMInvite implements Invite {
         `;
         if (window.notificationsEnabled) {
             innerHTML += `
-            <p class="label supra">${window.lang.strings("notifyEvent")}</p>
+            <p class="label supra mb-2">${window.lang.strings("notifyEvent")}</p>
             <label class="switch block">
                 <input class="inv-notify-expiry" type="checkbox">
                 <span>${window.lang.strings("notifyInviteExpiry")}</span>
@@ -425,7 +425,7 @@ export class inviteList implements inviteList {
             this._list.classList.add("empty");
             this._list.innerHTML = `
             <div class="inv inv-empty">
-                <div class="card ~info dark:~d_neutral @low inv-header flex-expand mt-2">
+                <div class="card dark:~d_neutral @low inv-header flex-expand mt-2">
                     <div class="inv-codearea">
                         <span class="code font-mono bg-inherit">${window.lang.strings("inviteNoInvites")}</span>
                     </div>
diff --git a/ts/modules/settings.ts b/ts/modules/settings.ts
index 48b61df..5b66308 100644
--- a/ts/modules/settings.ts
+++ b/ts/modules/settings.ts
@@ -91,10 +91,10 @@ class DOMInput {
     get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
     set requires_restart(state: boolean) {
         if (state) {
-            this._restart.classList.add("badge", "~info");
+            this._restart.classList.add("badge", "~info", "dark:~d_warning");
             this._restart.textContent = "R";
         } else {
-            this._restart.classList.remove("badge", "~info");
+            this._restart.classList.remove("badge", "~info", "dark:~d_warning");
             this._restart.textContent = "";
         }
     }
@@ -250,10 +250,10 @@ class DOMBool implements SBool {
     get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
     set requires_restart(state: boolean) {
         if (state) {
-            this._restart.classList.add("badge", "~info");
+            this._restart.classList.add("badge", "~info", "dark:~d_warning");
             this._restart.textContent = "R";
         } else {
-            this._restart.classList.remove("badge", "~info");
+            this._restart.classList.remove("badge", "~info", "dark:~d_warning");
             this._restart.textContent = "";
         }
     }
@@ -372,10 +372,10 @@ class DOMSelect implements SSelect {
     get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
     set requires_restart(state: boolean) {
         if (state) {
-            this._restart.classList.add("badge", "~info");
+            this._restart.classList.add("badge", "~info", "dark:~d_warning");
             this._restart.textContent = "R";
         } else {
-            this._restart.classList.remove("badge", "~info");
+            this._restart.classList.remove("badge", "~info", "dark:~d_warning");
             this._restart.textContent = "";
         }
     }
@@ -436,7 +436,7 @@ class DOMSelect implements SSelect {
         message.innerHTML = window.lang.var("strings",
                                             "settingsRequiredOrRestartMessage",
                                             `<span class="badge ~critical">*</span>`,
-                                            `<span class="badge ~info">R</span>`
+                                            `<span class="badge ~info dark:~d_warning">R</span>`
         );
 
         this.update(setting);
@@ -895,7 +895,7 @@ class EmailEditor {
                     }
                     tr.innerHTML = `
                     <td>${this._names[id].name}</td>
-                    <td>${resetButton}</td>
+                    <td class="table-inline justify-center"><span class="customize-reset">${resetButton}</span></td>
                     <td><span class="button ~info @low" title="${window.lang.get("strings", "edit")}"><i class="icon ri-edit-line"></i></span></td>
                     `;
                     (tr.querySelector("span.button") as HTMLSpanElement).onclick = () => {
@@ -903,7 +903,8 @@ class EmailEditor {
                         this.loadEditor(id);
                     };
                     if (this._names[id].enabled) {
-                        const rb = tr.querySelector("i.ri-restart-line") as HTMLElement;
+                        const rb = tr.querySelector("span.customize-reset") as HTMLElement;
+                        rb.classList.add("button");
                         rb.onclick = () => _post("/config/emails/" + id + "/state/disable", null, (req: XMLHttpRequest) => {
                             if (req.readyState == 4) {
                                 if (req.status != 200 && req.status != 204) {