From aedea1bea61e6a7a82e4b3bac6f406e2a7a3d6ea Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Fri, 24 Dec 2021 19:34:18 +0000
Subject: [PATCH] admin: move theme icon to top left; add icon

---
 html/admin.html |  2 +-
 ts/admin.ts     | 24 +++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/html/admin.html b/html/admin.html
index bdffddd..f76fd28 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -408,6 +408,7 @@
                 </div>
             </div>
         </span>
+        <span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
         <div class="page-container">
             <div class="mb-1">
                 <header class="flex flex-wrap items-center justify-between">
@@ -421,7 +422,6 @@
             <div class="mb-1">
                 <div class="text-neutral-700">
                     <span class="button ~critical !normal mb-1 unfocused" id="logout-button">{{ .strings.logout }}</span>
-                    <span id="button-theme" class="button ~neutral !normal mb-1">{{ .strings.theme }}</span>
                 </div>
             </div>
             <div id="tab-invites">
diff --git a/ts/admin.ts b/ts/admin.ts
index f38dc5f..4b5e8a6 100644
--- a/ts/admin.ts
+++ b/ts/admin.ts
@@ -10,7 +10,29 @@ import { _get, _post, notificationBox, whichAnimationEvent, toggleLoader } from
 import { Updater } from "./modules/update.js";
 
 loadTheme();
-(document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme;
+const themeButton = document.getElementById('button-theme') as HTMLSpanElement;
+const switchThemeIcon = () => {
+    const icon = themeButton.childNodes[0] as HTMLElement;
+    if (document.documentElement.classList.contains("dark-theme")) {
+        icon.classList.add("ri-sun-line");
+        icon.classList.remove("ri-moon-line");
+        themeButton.classList.add("~warning");
+        themeButton.classList.remove("~neutral");
+        themeButton.classList.remove("!high");
+    } else {
+        icon.classList.add("ri-moon-line");
+        icon.classList.remove("ri-sun-line");
+        themeButton.classList.add("!high");
+        themeButton.classList.add("~neutral");
+        themeButton.classList.remove("~warning");
+    }
+};
+ themeButton.onclick = () => {
+    toggleTheme();
+    switchThemeIcon();
+ }
+switchThemeIcon();
+
 
 window.lang = new lang(window.langFile as LangFile);
 loadLangSelector("admin");