Merge pull request horuslabsio#78 from stephanniegb/main

Fixed the overflow issue on mobile screens
Ugo-X · May 23, 2024 · 9043baa · 9043baa
2 parents 43bc82e + 40f5013
commit 9043baa
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/website/app/components/Navbar.tsx b/website/app/components/Navbar.tsx
@@ -1,34 +1,41 @@
 "use client";
-
 import { useEffect } from "react";
 import SunIcon from "../svg/SunIcon";
 import MoonIcon from "../svg/MoonIcon";
 
 const Navbar = () => {
+  const toggleTheme = () => {
+    const html = document.getElementsByTagName("html")[0];
+    const currentTheme = html.getAttribute("data-theme");
+
+    if (currentTheme === "light") {
+      html.setAttribute("data-theme", "dark");
+    } else if (currentTheme === "dark") {
+      html.setAttribute("data-theme", "light");
+    }
+  };
   useEffect(() => {
     let theme: "dark" | "light";
+    const queryMedia = window.matchMedia("(prefers-color-scheme: dark)");
 
-    const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
     const html = document.getElementsByTagName("html")[0];
-
-    if (systemSettingDark.matches) {
+    if (queryMedia.matches) {
       theme = "dark";
     } else {
       theme = "light";
     }
     html.setAttribute("data-theme", theme);
-  }, []);
 
-  const toggleTheme = () => {
-    const html = document.getElementsByTagName("html")[0];
-    const currentTheme = html.getAttribute("data-theme");
+    queryMedia.addEventListener("change", () => {
+      toggleTheme();
+    });
 
-    if (currentTheme === "light") {
-      html.setAttribute("data-theme", "dark");
-    } else if (currentTheme === "dark") {
-      html.setAttribute("data-theme", "light");
-    }
-  };
+    return () => {
+      queryMedia.removeEventListener("change", () => {
+        toggleTheme();
+      });
+    };
+  }, []);
 
   return (
     <header className=" absolute w-screen top-0 left-0 z-[99] flex justify-between px-5 md:px-12 py-6">
@@ -43,7 +50,7 @@ const Navbar = () => {
       <button
         id="toggle-theme"
         onClick={toggleTheme}
-        className="h-[10vw] w-[10vw] max-w-10 max-h-10  p-2 rounded-full  bg-[#2D2D2D] text-[#FF6734] flex justify-center items-center relative"
+        className="h-[10vw] w-[10vw] max-w-10 max-h-10  p-2 rounded-full  bg-[#2D2D2D] text-[#FF6734] flex justify-center items-center relative overflow-hidden"
       >
         <span id="sun" className="text-[1.5em] md:text-[1.8em]">
           <SunIcon />

diff --git a/website/app/globals.css b/website/app/globals.css
@@ -69,7 +69,11 @@ body {
 *::before {
   box-sizing: inherit;
 }
+html,
 body {
+  background: #141925;
+}
+main {
   font-family: "Coolvetica", sans-serif;
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(