From 508168b49ec9f7a10f8b512446ec8a5541210037 Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Fri, 31 Dec 2021 01:51:42 +0000
Subject: [PATCH] fix more oddities

---
 css/base.css              | 10 +++++----
 css/loader.css            |  2 +-
 html/admin.html           | 46 ++++++++++++++++++++-------------------
 scripts/missing-colors.js |  2 +-
 ts/modules/accounts.ts    |  6 ++---
 ts/modules/discord.ts     |  4 ++--
 ts/modules/lang.ts        |  2 +-
 7 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/css/base.css b/css/base.css
index 5d732bd..3a77bea 100644
--- a/css/base.css
+++ b/css/base.css
@@ -170,10 +170,6 @@ span.sm:not(.heading) {
     }
 }
 
-.fr {
-    float: right;
-}
-
 .monospace {
     background-color: inherit; /* so we can use a17t code blocks */
     font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
@@ -397,6 +393,8 @@ table {
     color: var(--color-content);
 }
 
+
+
 p.top {
     margin-top: 0px;
 }
@@ -521,3 +519,7 @@ div.card:contains(section.banner.footer) {
 .button.discord.\@low:not(.lang-link) {
     color: rgba(38, 51, 192, 90%);
 }
+
+.pb-0i {
+    padding-bottom: 0px !important
+}
diff --git a/css/loader.css b/css/loader.css
index 2b7951a..b9c4bfa 100644
--- a/css/loader.css
+++ b/css/loader.css
@@ -1,6 +1,6 @@
 .loader {
     height: auto;
-    color: rgba(0, 0, 0, 0);
+    color: rgba(0, 0, 0, 0) !important;
 }
 
 .loader .dot {
diff --git a/html/admin.html b/html/admin.html
index fb04f41..00c00d8 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -252,7 +252,7 @@
             <div class="modal-content card ~critical @low">
                 <span class="heading">{{ .strings.settingsRestartRequired }} <span class="modal-close">&times;</span></span>
                 <p class="content pb-4">{{ .strings.settingsRestartRequiredDescription }}</p>
-                <div class="fr">
+                <div class="float-right">
                     <span class="button ~info @low mb-2" id="settings-apply-no-restart">{{ .strings.settingsApplyRestartLater }}</span>
                     <span class="button ~critical @low" id="settings-apply-restart">{{ .strings.settingsApplyRestartNow }}</span>
                 </div>
@@ -389,26 +389,28 @@
             </form>
         </div>
         <div id="notification-box"></div>
-        <span class="dropdown" tabindex="0" id="lang-dropdown">
-            <span class="button ~urge dropdown-button">
-                <i class="ri-global-line"></i>
-                <span class="ml-2 chev"></span>
-            </span>
-            <div class="dropdown-display">
-                <div class="card ~neutral @low">
-                    <label class="switch pb-4">
-                        <input type="radio" name="lang-time" id="lang-12h">
-                        <span>{{ .strings.time12h }}</span>
-                    </label>
-                    <label class="switch pb-4">
-                        <input type="radio" name="lang-time" id="lang-24h">
-                        <span>{{ .strings.time24h }}</span>
-                    </label>
-                    <div id="lang-list"></div>
+        <div class="top-4 left-4 absolute">
+            <span class="dropdown" tabindex="0" id="lang-dropdown">
+                <span class="button ~urge dropdown-button">
+                    <i class="ri-global-line"></i>
+                    <span class="ml-2 chev"></span>
+                </span>
+                <div class="dropdown-display">
+                    <div class="card ~neutral @low">
+                        <label class="switch pb-4">
+                            <input type="radio" name="lang-time" id="lang-12h">
+                            <span>{{ .strings.time12h }}</span>
+                        </label>
+                        <label class="switch pb-4">
+                            <input type="radio" name="lang-time" id="lang-24h">
+                            <span>{{ .strings.time24h }}</span>
+                        </label>
+                        <div id="lang-list"></div>
+                    </div>
                 </div>
-            </div>
-        </span>
-        <span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
+            </span>
+            <span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
+        </div>
         <div class="page-container">
             <div class="mb-4">
                 <header class="flex flex-wrap items-center justify-between">
@@ -576,7 +578,7 @@
                         </div>
                         <div class="row">
                             <span class="col sm button ~neutral @low center mb-2" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
-                            <div id="accounts-announce-dropdown" class="col sm dropdown" tabindex="0">
+                            <div id="accounts-announce-dropdown" class="col sm dropdown pb-0i" tabindex="0">
                                 <span class="h-100 sm button ~info @low center mb-2" id="accounts-announce">{{ .strings.announce }}</span>
                                 <div class="dropdown-display">
                                     <div class="card ~neutral @low">
@@ -587,7 +589,7 @@
                             </div>
                             <span class="col sm button ~urge @low center mb-2" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
                             <span class="col sm button ~warning @low center mb-2" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
-                            <div id="accounts-disable-enable-dropdown" class="col sm dropdown manual" tabindex="0">
+                            <div id="accounts-disable-enable-dropdown" class="col sm dropdown manual pb-0i" tabindex="0">
                                 <span class="h-100 sm button ~positive @low center mb-2" id="accounts-disable-enable">{{ .strings.disable }}</span>
                                 <div class="dropdown-display">
                                     <div class="card ~neutral @low">
diff --git a/scripts/missing-colors.js b/scripts/missing-colors.js
index 2c7618f..b6e23d6 100644
--- a/scripts/missing-colors.js
+++ b/scripts/missing-colors.js
@@ -5,7 +5,7 @@ let path = require("path");
 const fixHTML = (infile, outfile) => {
     console.log(infile, outfile)
     let doc = new parser.JSDOM(fs.readFileSync(infile));
-    for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card"]) {
+    for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card", "field"]) {
         let items = doc.window.document.body.querySelectorAll("."+item);
         for (let i = 0; i < items.length; i++) {
             let hasColor = false;
diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index 8fadba1..e5d2b78 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -193,7 +193,7 @@ class user implements User {
         if (!u) {
             this._notifyDropdown.querySelector(".accounts-area-matrix").classList.add("unfocused");
             this._matrix.innerHTML = `
-            <span class="chip btn @low">${window.lang.strings("add")}</span>
+            <span class="chip btn @high">${window.lang.strings("add")}</span>
             <input type="text" class="input ~neutral @low stealth-input unfocused" placeholder="@user:riot.im">
             `;
             (this._matrix.querySelector("span") as HTMLSpanElement).onclick = this._addMatrix;
@@ -257,7 +257,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">${window.lang.strings("add")}</span>`;
+            this._telegram.innerHTML = `<span class="chip btn @high">${window.lang.strings("add")}</span>`;
             (this._telegram.querySelector("span") as HTMLSpanElement).onclick = this._addTelegram;
         } else {
             this._notifyDropdown.querySelector(".accounts-area-telegram").classList.remove("unfocused");
@@ -322,7 +322,7 @@ class user implements User {
         const lastNotifyMethod = this.lastNotifyMethod() == "discord";
         this._discordUsername = u;
         if (!u) {
-            this._discord.innerHTML = `<span class="chip btn @low">Add</span>`;
+            this._discord.innerHTML = `<span class="chip btn @high">Add</span>`;
             (this._discord.querySelector("span") as HTMLSpanElement).onclick = () => addDiscord(this.id);
             this._notifyDropdown.querySelector(".accounts-area-discord").classList.add("unfocused");
         } else {
diff --git a/ts/modules/discord.ts b/ts/modules/discord.ts
index ebb54ef..89e8a8c 100644
--- a/ts/modules/discord.ts
+++ b/ts/modules/discord.ts
@@ -39,10 +39,10 @@ export function newDiscordSearch(title: string, description: string, buttonText:
                             <td class="img-circle sm">
                                 <img class="img-circle" src="${users[i].avatar_url}" width="32" height="32">
                             </td>
-                            <td class="w-100 sm">
+                            <td class="sm">
                                 <p class="content">${users[i].name}</p>
                             </td>
-                            <td class="sm">
+                            <td class="sm float-right">
                                 <span id="discord-user-${users[i].id}" class="button ~info @high">${buttonText}</span>
                             </td>
                         </tr>
diff --git a/ts/modules/lang.ts b/ts/modules/lang.ts
index aba0951..fa07a25 100644
--- a/ts/modules/lang.ts
+++ b/ts/modules/lang.ts
@@ -77,7 +77,7 @@ export const loadLangSelector = (page: string) => {
             const list = document.getElementById("lang-list") as HTMLDivElement;
             let innerHTML = '';
             for (let code in req.response) {
-                innerHTML += `<a href="?lang=${code}" class="button input ~neutral field mb-2 lang-link">${req.response[code]}</a>`;
+                innerHTML += `<a href="?lang=${code}" class="button w-100 al justify-start ~neutral mb-2 lang-link">${req.response[code]}</a>`;
             }
             list.innerHTML = innerHTML;
         }