UI: Padding for theme-switch button

pages/base.html

@@ -27,8 +27,8 @@
           <li><a href="/about" class="nav-link px-2 text-white">About</a></li>
         </ul>
 
-        <div class="text-end">
+        <div class="text-end p-3">
-          <button id="theme-switch-btn" class="btn btn-secondary">
+          <button id="theme-switch-btn" class="btn btn-secondary" onclick="toggleTheme();">
             <img id="theme-svg" src="/static/images/brightness-high.svg" alt="Change theme">
           </button>
         </div>
@@ -36,6 +36,7 @@
           <a href="/login" class="btn btn-outline-light me-2">Login</a>
           <a href="/register" class="btn btn-warning">Sign-up</a>
         </div>
+        </div>
       </div>
     </div>
   </header>
@@ -49,43 +50,48 @@
 <script src="/scripts/auth.js"></script>
 <script src="/scripts/api.js"></script>
 <script>
-    document.addEventListener('DOMContentLoaded', async function() {
+function toggleTheme() {
-      // Check if auth info is valid
+  if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
-      try {
+      document.documentElement.setAttribute('data-bs-theme','light');
-        let response = await getUser();
+      localStorage.setItem("theme", "light");
-        if (response.ok) {
+      document.getElementById("theme-svg").src = "/static/images/brightness-high.svg";
-          let barAuth = document.getElementById("bar-auth");
+  } else {
-          barAuth.innerHTML = '<button id="log-out-btn" class="btn btn-outline-light me-2"><img src="/static/images/person-dash-fill.svg"></button>';
+      document.documentElement.setAttribute('data-bs-theme','dark');
-          document.getElementById("log-out-btn").addEventListener("click", (event) => {
+      localStorage.setItem("theme", "dark");
-            // Log out
+      document.getElementById("theme-svg").src = "/static/images/moon-stars.svg";
-            forgetAuthInfo();
+  }
-            window.location.replace("/about");
+}
-          });
-        }
-      } catch(error) {
-        forgetAuthInfo();
-        return;
-      }
 
-      // Theme
+document.addEventListener('DOMContentLoaded', async function() {
-      let theme = localStorage.getItem("theme");
+  // Theme
-      if (theme) {
+  let theme = localStorage.getItem("theme");
-        document.documentElement.setAttribute('data-bs-theme', theme);
+  if (theme) {
-      }
+    document.documentElement.setAttribute('data-bs-theme', theme);
+    if (theme == "dark") {
+        document.getElementById("theme-svg").src = "/static/images/moon-stars.svg";
+    } else {
+        document.getElementById("theme-svg").src = "/static/images/brightness-high.svg";
+    }
+  }
 
-      document.getElementById('theme-switch-btn').addEventListener('click', () => {
+  // Check if auth info is valid
-          if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
+  try {
-              document.documentElement.setAttribute('data-bs-theme','light');
+    let response = await getUser();
-              localStorage.setItem("theme", "light");
+    if (response.ok) {
-              document.getElementById("theme-svg").src = "/static/images/brightness-high.svg";
+      let barAuth = document.getElementById("bar-auth");
-          } else {
+      barAuth.innerHTML = '<button id="log-out-btn" class="btn btn-outline-light me-2"><img src="/static/images/person-dash-fill.svg"></button>';
-              document.documentElement.setAttribute('data-bs-theme','dark');
+      document.getElementById("log-out-btn").addEventListener("click", (event) => {
-              localStorage.setItem("theme", "dark");
+        // Log out
-              document.getElementById("theme-svg").src = "/static/images/moon-stars.svg";
+        forgetAuthInfo();
-          }
+        window.location.replace("/about");
-      })
+      });
+    }
+  } catch(error) {
+    forgetAuthInfo();
+    return;
+  }
 
-    }, false)
+}, false)
 </script>
 
 {{ end }}

scripts/api.js

@@ -34,9 +34,6 @@ async function get(url) {
     return fetch(url, {
         method: "GET",
         credentials: "include",
-        headers: {
-            "Content-Type": "application/json",
-        },
     })
 }