admin: move theme icon to top left; add icon

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">

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");