From 49bf5b193330a614a5e00e3287d838026044a00e Mon Sep 17 00:00:00 2001
From: Stephanie Egbuonu <100955511+stephanniegb@users.noreply.github.com>
Date: Tue, 21 May 2024 14:32:31 +0100
Subject: [PATCH 1/2] Fix: fixed overflow problem on mobile screens

---
 website/app/components/Navbar.tsx | 2 +-
 website/app/globals.css           | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/website/app/components/Navbar.tsx b/website/app/components/Navbar.tsx
index 1f0c842..184b584 100644
--- a/website/app/components/Navbar.tsx
+++ b/website/app/components/Navbar.tsx
@@ -43,7 +43,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
index 93ff328..ff62070 100644
--- 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(

From 40f501335312679b27791024e6006b63a077db57 Mon Sep 17 00:00:00 2001
From: Stephanie Egbuonu <100955511+stephanniegb@users.noreply.github.com>
Date: Tue, 21 May 2024 14:57:03 +0100
Subject: [PATCH 2/2] Update Navbar.tsx

---
 website/app/components/Navbar.tsx | 35 ++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/website/app/components/Navbar.tsx b/website/app/components/Navbar.tsx
index 184b584..0630f4f 100644
--- 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">