fix textareas

css/base.css

@@ -391,6 +391,10 @@ select, textarea {
     -moz-appearance: none;
 }
 
+html.dark textarea {
+    background-color: #202020
+}
+
 input {
     color: inherit;
     border: 0 solid var(--color-neutral-300);
@@ -532,3 +536,7 @@ div.card:contains(section.banner.footer) {
 .pb-0i {
     padding-bottom: 0px !important
 }
+
+.text-center-i {
+    text-align: center !important;
+}

html/admin.html

@@ -173,7 +173,7 @@
             <form class="modal-content wide card" id="form-announce" href="">
                 <span class="heading"><span id="header-announce"></span> <span class="modal-close">&times;</span></span>
                 <div class="row">
-                    <div class="col flex-col content mt-8">
+                    <div class="col card ~neutral @low">
                         <div id="announce-details">
                             <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
                             <div id="announce-variables">
@@ -182,7 +182,7 @@
                             <label class="label supra" for="announce-subject"> {{ .strings.subject }}</label>
                             <input type="text" id="announce-subject" class="input ~neutral @low mb-2 mt-4">
                             <label class="label supra" for="textarea-announce">{{ .strings.message }}</label>
-                            <textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-8 font-mono bg-inherit"></textarea>
+                            <textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-4 font-mono"></textarea>
                             <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
                         </div>
                         <label class="label unfocused" id="announce-name"><p class="supra">{{ .strings.name }}</p>
@@ -226,13 +226,13 @@
             <form class="modal-content wide card" id="form-editor" href="">
                 <span class="heading"><span id="header-editor"></span> <span class="modal-close">&times;</span></span>
                 <div class="row">
-                    <div class="col flex-col content mt-8">
+                    <div class="col card ~neutral @low">
                         <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
-                        <div id="editor-variables"></div>
+                        <div id="editor-variables" class="mt-4"></div>
                         <span class="label supra" for="editor-conditionals" id="label-editor-conditionals">{{ .strings.conditionals }}</span>
                         <div id="editor-conditionals"></div>
                         <label class="label supra" for="textarea-editor">{{ .strings.message }}</label>
-                        <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-8 font-mono bg-inherit"></textarea>
+                        <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-4 font-mono"></textarea>
                         <p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
                         <div class="flex-row">
                             <label class="full-width ml-2">
@@ -609,13 +609,13 @@
                                     <th>{{ .strings.username }}</th>
                                     <th>{{ .strings.emailAddress }}</th>
                                     {{ if .telegramEnabled }}
-                                    <th>Telegram</th>
+                                    <th class="text-center-i">Telegram</th>
                                     {{ end }}
                                     {{ if .matrixEnabled }}
-                                    <th>Matrix</th>
+                                    <th class="text-center-i">Matrix</th>
                                     {{ end }}
                                     {{ if .discordEnabled }}
-                                    <th>Discord</th>
+                                    <th class="text-center-i">Discord</th>
                                     {{ end }}
                                     <th>{{ .strings.expiry }}</th>
                                     <th>{{ .strings.lastActiveTime }}</th>

scripts/missing-colors.js

@@ -15,7 +15,7 @@ const hasDark = (item) => {
 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", "field"]) {
+    for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card", "field", "textarea"]) {
         let items = doc.window.document.body.querySelectorAll("."+item);
         for (let i = 0; i < items.length; i++) {
             let hasColor = false;

ts/modules/accounts.ts

@@ -194,7 +194,7 @@ class user implements User {
             this._notifyDropdown.querySelector(".accounts-area-matrix").classList.add("unfocused");
             this._matrix.innerHTML = `
             <div class="table-inline">
-                <span class="chip btn @high">${window.lang.strings("add")}</span>
+                <span class="chip btn @low w-100"><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>
             `;
@@ -214,15 +214,20 @@ class user implements User {
    
     private _addMatrix = () => {
         const addButton = this._matrix.querySelector(".btn") as HTMLSpanElement;
-        const icon = this._matrix.querySelector("i");
         const input = this._matrix.querySelector("input.stealth-input") as HTMLInputElement;
+        const addIcon = addButton.querySelector("i");
         if (addButton.classList.contains("chip")) {
             input.classList.remove("unfocused");
-            addButton.innerHTML = `<i class="ri-check-line"></i>`;
+            addIcon.classList.add("ri-check-line");
-            addButton.classList.remove("chip")
+            addIcon.classList.remove("ri-link");
-            if (icon) {
+            addButton.classList.remove("chip", "w-100")
-                icon.classList.add("unfocused");
+            const outerClickListener = (event: Event) => {
+                if (!(event.target instanceof HTMLElement && (this._matrix.contains(event.target) || addButton.contains(event.target)))) {
+                    document.dispatchEvent(new CustomEvent("accounts-reload"));
+                    document.removeEventListener("click", outerClickListener);
                 }
+            };
+            document.addEventListener("click", outerClickListener);
         } else {
             if (input.value.charAt(0) != "@" || !input.value.includes(":")) return;
             const send = {
@@ -259,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 @high">${window.lang.strings("add")}</span>`;
+            this._telegram.innerHTML = `<span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>`;
             (this._telegram.querySelector("span") as HTMLSpanElement).onclick = this._addTelegram;
         } else {
             this._notifyDropdown.querySelector(".accounts-area-telegram").classList.remove("unfocused");
@@ -324,7 +329,7 @@ class user implements User {
         const lastNotifyMethod = this.lastNotifyMethod() == "discord";
         this._discordUsername = u;
         if (!u) {
-            this._discord.innerHTML = `<span class="chip btn @high">Add</span>`;
+            this._discord.innerHTML = `<span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>`;
             (this._discord.querySelector("span") as HTMLSpanElement).onclick = () => addDiscord(this.id);
             this._notifyDropdown.querySelector(".accounts-area-discord").classList.add("unfocused");
         } else {