Update footer

components/Footer.tsx

@@ -1,18 +1,120 @@
-const Footer = () => {
+import {
+  Slack,
+  Facebook,
+  Instagram,
+  Github,
+  Mail,
+  ExternalLink,
+  Bug,
+} from "lucide-react";
+import Link from "next/link";
+import Image from "next/image";
+import { useTheme } from "../lib/hooks/useTheme";
+
+const footerLinks = [
+  { name: "Slack", icon: <Slack />, link: "https://onlinentnu.slack.com/" },
+  {
+    name: "Facebook",
+    icon: <Facebook />,
+    link: "http://facebook.com/LinjeforeningenOnline",
+  },
+  {
+    name: "Instagram",
+    icon: <Instagram />,
+    link: "https://www.instagram.com/online_ntnu/",
+  },
+  { name: "Github", icon: <Github />, link: "https://github.com/appKom" },
+];
+
+export default function Footer() {
+  const theme = useTheme();
+
   return (
-    <div className="w-full py-5 px-5 flex flex-col items-center gap-3 text-online-darkTeal dark:text-white">
-      <div>
-        Skjedd en feil? Ta kontakt med{" "}
-        <a
-          className="font-semibold underline transition-all hover:text-online-orange"
-          href="mailto:appkom@online.ntnu.no"
-        >
-          Appkom
-        </a>{" "}
-        :)
+    <footer className="px-4 py-12 mt-24 text-gray-700 bg-zinc-50 border-t border-gray-300 dark:text-gray-300 dark:border-gray-700 md:px-6 lg:px-8 dark:bg-gray-800">
+      <div className="mx-auto max-w-7xl">
+        <div className="flex flex-col items-center justify-between mb-8 space-y-8 md:flex-row md:space-y-0">
+          <div className="flex flex-col items-center space-y-4 md:items-start">
+            <h2 className="text-2xl font-bold">Online Opptak</h2>
+            <Link href="mailto:onlinefondet@online.ntnu.no" passHref>
+              <a className="flex items-center gap-2 transition-colors cursor-pointer hover:text-online-orange">
+                <Mail size={18} />
+                appkom@online.ntnu.no
+              </a>
+            </Link>
+          </div>
+
+          <a href="https://docs.google.com/forms/d/e/1FAIpQLScvjEqVsiRIYnVqCNqbH_-nmYk3Ux6la8a7KZzsY3sJDbW-iA/viewform"
+            target="_blank"
+            rel="noreferrer"
+            className='flex items-center justify-center h-full gap-3 p-1.5 bg-[#f3f4f6] dark:bg-[#212f4d] rounded-lg max-h-min'>
+            <div className="p-1 text-center text-gray-600 dark:text-white">
+              <div className="flex items-center justify-center gap-2">
+                <p className="font-semibold text-lg">Debug</p>
+                <Bug className="w-5" />
+              </div>
+              <p className="text-sm">Opplevd noe ugreit?</p>
+              <p className="text-sm">Trykk her for mer info</p>
+            </div>
+          </a>
+
+          <div className="flex flex-col items-center space-y-4 md:items-end">
+            <div className="flex space-x-4">
+              {footerLinks.map((link, index) => (
+                <Link href={link.link} key={index} passHref>
+                  <a
+                    className="transition cursor-pointer hover:text-online-orange"
+                    aria-label={link.name}
+                  >
+                    {link.icon}
+                  </a>
+                </Link>
+              ))}
+            </div>
+            <div className="text-sm text-center md:text-right">
+              <p>Skjedd en feil?</p>
+              <Link
+                href="mailto:appkom@online.ntnu.no"
+                className="flex items-center justify-center md:justify-end"
+                passHref
+              >
+                <a className="flex items-center space-x-1 transition hover:text-online-orange hover:underline">
+                  <span>Ta kontakt med Appkom</span>
+                  <ExternalLink size={14} />
+                </a>
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center justify-between py-8 space-y-6 border-t border-gray-300 dark:border-gray-700 md:flex-row md:space-y-0">
+          <div className="flex items-center space-x-6">
+            <Link href="https://online.ntnu.no/" target="_blank">
+              <a className="transition hover:opacity-50">
+                <Image
+                  src={theme === "dark" ? "/Online_hvit.svg" : "/Online_bla.svg"}
+                  alt="Online logo"
+                  width={128}
+                  height={34}
+                />
+              </a>
+            </Link>
+            <Link href="https://www.bekk.no/" target="_blank">
+              <a className="transition hover:opacity-50">
+                <Image
+                  src={theme === "dark" ? "/bekk_white.svg" : "/bekk_black.svg"}
+                  alt="Online logo"
+                  width={128}
+                  height={57}
+                />
+              </a>
+            </Link>
+          </div>
+          <p className="text-sm text-gray-400 dark:text-gray-500">
+            &copy; {new Date().getFullYear()} Online Opptak
+            reservert.
+          </p>
+        </div>
       </div>
-    </div>
+    </footer >
   );
-};
-
-export default Footer;
+}

components/Navbar.tsx

@@ -25,16 +25,14 @@ const Navbar = () => {
 
   const handleLogout = () => signOut();
   const handleLogin = () => signIn("auth0");
-  const isLinkActive = (uri: string) => router.pathname === uri;
   const smallOnlineLogoSrc =
     theme === "dark" ? "/Online_hvit_o.svg" : "/Online_bla_o.svg";
   const onlineLogoSrc =
     theme === "dark" ? "/Online_hvit.svg" : "/Online_bla.svg";
-  const bekkLogoSrc = theme === "dark" ? "/bekk_white.svg" : "/bekk_black.svg";
 
   return (
     <div>
-      <div className="hidden md:flex justify-between w-full px-5 py-5 sm:items-center border-b-[1px] border-gray-200 dark:border-0 dark:bg-gray-800">
+      <div className="hidden md:flex justify-between w-full px-5 py-5 sm:items-center border-b-[1px] border-gray-300 dark:border-0 bg-zinc-50 dark:bg-gray-800">
         <Link href="/" passHref>
           <a aria-label="Online logo">
             <Image
@@ -93,17 +91,6 @@ const Navbar = () => {
             </>
           )}
           <ThemeToggle />
-          <Link href="https://www.bekk.no/">
-            <a>
-              <Image
-                src={bekkLogoSrc}
-                width={100}
-                height={30 * 1.5}
-                alt="Bekk logo"
-                className="transition-all cursor-pointer hover:opacity-60"
-              />
-            </a>
-          </Link>
         </div>
       </div>
       <div className="relative md:hidden flex justify-between items-center px-5 py-5 border-b-[1px] border-gray-200 dark:border-gray-600">
@@ -115,14 +102,6 @@ const Navbar = () => {
           className="transition-all cursor-pointer hover:opacity-60"
           onClick={() => router.push("/")}
         />
-        <Image
-          src={bekkLogoSrc}
-          width={100}
-          height={30 * 1.5}
-          alt="Bekk logo"
-          className="transition-all cursor-pointer hover:opacity-60"
-          onClick={() => router.push("https://www.bekk.no/")}
-        />
         <div className="relative">
           <button onClick={toggleDropdown} className="flex justify-end">
             <Bars3Icon

lib/hooks/useTheme.ts

@@ -1,24 +1,34 @@
 import { useState, useEffect } from "react";
 
+type TTheme = "light" | "dark";
+
 export const useTheme = () => {
-  const [theme, setTheme] = useState("light");
+  const [theme, setTheme] = useState<TTheme>("light");
 
   useEffect(() => {
-    const storedTheme = localStorage.getItem("theme") || "light";
+    // Get the stored theme from localStorage, defaulting to "light"
+    const storedTheme = (localStorage.getItem("theme") as TTheme) || "light";
     setTheme(storedTheme);
-
+
+    // Function to handle theme change based on the document's class list
     const handleThemeChange = () => {
       const isDark = document.documentElement.classList.contains("dark");
-      setTheme(isDark ? "dark" : "light");
+      const newTheme = isDark ? "dark" : "light";
+      setTheme(newTheme);
+      localStorage.setItem("theme", newTheme); // Store the theme in localStorage
     };
 
+    // Initialize the theme based on the class list
     handleThemeChange();
+
+    // Create a MutationObserver to watch for class changes
     const observer = new MutationObserver(handleThemeChange);
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ["class"],
     });
 
+    // Cleanup function to disconnect the observer when the component unmounts
     return () => observer.disconnect();
   }, []);
 

package.json

@@ -22,6 +22,7 @@
     "@tanstack/react-query": "^5.51.11",
     "@types/mongodb": "^4.0.7",
     "@vercel/analytics": "^1.1.2",
+    "lucide-react": "^0.441.0",
     "mongodb": "^6.1.0",
     "next": "^12.3.4",
     "next-auth": "^4.24.5",

pages/_app.tsx

@@ -84,7 +84,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: any) {
           <QueryClientProvider client={queryClient}>
             <Toaster />
             <Navbar />
-            <div className="flex-grow py-10">
+            <div className="flex-grow min-h-screen pt-5">
               <Component {...pageProps} />
             </div>
             <Footer />