pad table and some other stuff

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">
@@ -601,12 +601,12 @@
                             <span class="col sm button ~critical @low center mb-2" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
                         </div>
                     </div>
-                    <div class="card ~neutral @low accounts-header table-responsive mt-8">
-                        <table class="table">
+                    <div class="card @low accounts-header table-responsive mt-8">
+                        <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>

ts/modules/accounts.ts

@@ -193,8 +193,8 @@ class user implements User {
         if (!u) {
             this._notifyDropdown.querySelector(".accounts-area-matrix").classList.add("unfocused");
             this._matrix.innerHTML = `
-            <div class="table-inline">
-                <span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>
+            <div class="table-inline justify-center">
+                <span class="chip btn @low"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>
                 <input type="text" class="input ~neutral @low stealth-input unfocused" placeholder="@user:riot.im">
             </div>
             `;
@@ -220,7 +220,7 @@ class user implements User {
             input.classList.remove("unfocused");
             addIcon.classList.add("ri-check-line");
             addIcon.classList.remove("ri-link");
-            addButton.classList.remove("chip", "w-100")
+            addButton.classList.remove("chip")
             const outerClickListener = (event: Event) => {
                 if (!(event.target instanceof HTMLElement && (this._matrix.contains(event.target) || addButton.contains(event.target)))) {
                     document.dispatchEvent(new CustomEvent("accounts-reload"));
@@ -264,7 +264,7 @@ class user implements User {
         this._telegramUsername = u;
         if (!u) {
             this._notifyDropdown.querySelector(".accounts-area-telegram").classList.add("unfocused");
-            this._telegram.innerHTML = `<span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>`;
+            this._telegram.innerHTML = `<div class="table-inline justify-center"><span class="chip btn @low"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span></div>`;
             (this._telegram.querySelector("span") as HTMLSpanElement).onclick = this._addTelegram;
         } else {
             this._notifyDropdown.querySelector(".accounts-area-telegram").classList.remove("unfocused");
@@ -329,7 +329,7 @@ class user implements User {
         const lastNotifyMethod = this.lastNotifyMethod() == "discord";
         this._discordUsername = u;
         if (!u) {
-            this._discord.innerHTML = `<span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>`;
+            this._discord.innerHTML = `<div class="table-inline justify-center"><span class="chip btn @low"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span></div>`;
             (this._discord.querySelector("span") as HTMLSpanElement).onclick = () => addDiscord(this.id);
             this._notifyDropdown.querySelector(".accounts-area-discord").classList.add("unfocused");
         } else {
@@ -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) {

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>

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) {