Feature/newhackerpath jm

projects/mybyte/components/ProtectedRoute.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import React, { useEffect } from "react";
 import { useAuth } from "../context/AuthContext";
 
-const ProtectedRoute = ({ children, className= "h-screen min-h-full overflow-auto"}: { children: React.ReactNode, className?: string}) => {
+const ProtectedRoute = ({ children, className= "h-screen min-h-full overflow-auto min-w-full"}: { children: React.ReactNode, className?: string}) => {
   const router = useRouter();
   const { user, userInfo } = useAuth();
 

projects/mybyte/components/circle.tsx

@@ -0,0 +1,7 @@
+
+export const Circle = ({height, width, color="bg-primary-500", opacity="opacity-[89%]"}: { height: string, width: string, color?: string, opacity?: string }) => {
+    let names = `${height} ${width} ${color} absolute rounded-full ${opacity} z-[-1]`;
+    return (
+        <div className={names}></div>
+    );
+}

projects/mybyte/components/loginError.tsx

@@ -12,7 +12,7 @@ class loginError extends React.Component<ErrorDetails> {
 
     render() {
         return (
-            <div className={`rounded-xl bg-red-200 mx-4 text-center py-2 mb-5 ${(this.props.show) ? "visible" : "collapse"}`}>
+            <div className={`rounded-xl bg-red-200 mx-4 text-center py-2 mb-5 ${(this.props.show) ? "" : "hidden"}`}>
                 <span>{this.props.text}</span>
             </div>
         );

projects/mybyte/components/navbar.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useAuth } from "../context/AuthContext";
 import { Events } from "../enums/events";
+import { useLayoutEffect } from "react";
 
 const Navbar = ({ children }: { children: React.ReactNode }) => {
   const { user, logOut, currEvent, userInfo, user_type } = useAuth();
@@ -10,16 +11,11 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
   const menuItems = [
     {
       id: 1,
-      name: "Home",
-      link: "/",
-    },
-    {
-      id: 2,
       name: "Login",
       link: "/login",
     },
     {
-      id: 3,
+      id: 2,
       name: "Sign Up",
       link: "/signup",
     },
@@ -34,20 +30,42 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
     }
   };
 
+  const isElementXPercentInViewport = function(el: Element, percentVisible: number) {
+    let
+      rect = el.getBoundingClientRect(),
+      windowHeight = (window.innerHeight || document.documentElement.clientHeight);
+
+    return !(
+      Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-rect.height) * 100)) < percentVisible ||
+      Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
+    )
+  };
+
+  useLayoutEffect(() => {
+    let element = document.getElementById("acdweafadaefd");
+    if (element !== null && element !== undefined && isElementXPercentInViewport(element, 100)) {
+      let parent = element.parentElement;
+      if (parent !== null) {
+        parent.style.display = "grid";
+        parent.style.alignItems = "center";
+      }
+    }
+  });
+
   return (
-    <>
-      <header className="flex flex-wrap container mx-auto max-w-full items-center p-6 justify-between bg-[#DC4141] shadow-md sticky top-0 z-50">
-        <div className="flex items-center text-blue-900 hover:text-blue-800 cursor-pointer transition duration-150 ">
+    <div className="overflow-y-auto h-screen">
+      <header id="nav" className="sticky top-0 z-10 flex flex-wrap container mx-auto max-w-full items-center p-6 justify-between bg-white shadow-md flex-initial">
+        <div className="flex items-center hover:text-blue-800 cursor-pointer transition duration-150 ">
           {!user.uid ? (
             <Link href="/">
-              <span className="font-semibold text-lg font-sans text-white">
-                MyByte - UGA Hacks Portal
+              <span className="font-semibold text-lg font-sans">
+                UGAHACKS
               </span>
             </Link>
           ) : (
             <Link href="/dashboard">
-              <span className="font-semibold text-lg font-sans text-white">
-                MyByte - UGA Hacks Portal
+              <span className="font-semibold text-lg font-sans">
+                UGAHACKS
               </span>
             </Link>
           )}
@@ -57,25 +75,30 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
           <ul className="text-lg inline-block">
             <>
               {!user.uid ? (
-                menuItems.map((item) => (
+                menuItems.map((item) => {
+                  let cn = "text-black-800 hover:text-red-500 transition";
+                  if (item.link.replace('/', '') === router.pathname.replace('/', '')) {
+                    cn += " underline underline-offset-[5px]";
+                  }
+                  return (
                   <li
                     key={item.id}
-                    className="my-3 md:my-0 items-center mr-4 md:inline-block block text-white"
+                    className="my-3 md:my-0 items-center mr-4 md:inline-block block"
                   >
                     <Link href={item?.link}>
-                      <span className="text-black-800 hover:text-red-900 transition">
+                      <span className={cn}>
                         {item?.name}
                       </span>
                     </Link>
                   </li>
-                ))
+                )})
               ) : (
                 <>
                   <li className="my-3 md:my-0 items-center mr-4 md:inline-block block ">
                     {userInfo.first_name != null &&
                     userInfo.first_name != "" ? (
                       <Link href="/dashboard">
-                        <span className="hover:text-blue-900 transition text-white">
+                        <span className="hover:text-blue-900 transition">
                           Dashboard
                         </span>
                       </Link>
@@ -85,7 +108,7 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
                     {userInfo.first_name != null &&
                     userInfo.first_name != "" ? (
                       <Link href="/team">
-                        <span className="hover:text-blue-900 transition text-white">
+                        <span className="hover:text-blue-900 transition">
                           Team
                         </span>
                       </Link>
@@ -98,7 +121,7 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
                     user_type !== undefined &&
                     user_type == "service_writer" ? (
                       <Link href="/qrRead">
-                        <span className="hover:text-blue-900 transition text-white">
+                        <span className="hover:text-blue-900 transition">
                           Scanner
                         </span>
                       </Link>
@@ -108,7 +131,7 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
                     {userInfo.first_name != null &&
                     userInfo.first_name != "" ? (
                       <Link href="/profile">
-                        <span className="hover:text-blue-900 transition text-white">
+                        <span className="hover:text-blue-900 transition">
                           Profile
                         </span>
                       </Link>
@@ -118,7 +141,7 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
                     {userInfo.first_name != null &&
                     userInfo.first_name != "" ? (
                       <Link href="/insertDevPost">
-                        <span className="hover:text-blue-900 transition text-white">
+                        <span className="hover:text-blue-900 transition">
                           Submit Devpost Link
                         </span>
                       </Link>
@@ -127,7 +150,7 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
                   <li className="my-3 md:my-0 items-center mr-4 md:inline-block block ">
                     <a
                       onClick={handleLogout}
-                      className="text-white hover:text-blue-900 transition cursor-pointer"
+                      className="hover:text-blue-900 transition cursor-pointer"
                     >
                       Logout
                     </a>
@@ -138,9 +161,13 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
           </ul>
         </nav>
       </header>
-      {children}
-    </>
-  );
+      <div className="font-inter h-[calc(100%-168px)] md:h-[calc(100%-76px)]">
+        <div id="acdweafadaefd">
+          {children}
+        </div>
+      </div>
+    </div>
+  ); // last div's height is to offset the navbar's position since it is sticky now
 };
 
 export default Navbar;

projects/mybyte/context/AuthContext.tsx

@@ -182,17 +182,13 @@ export const AuthContextProvider = ({
         await getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
           setDoc(doc(registerRef, user.uid ? user.uid : ""), {
             uid: user.uid,
-            firstName: data.firstName,
-            lastName: data.lastName,
             gender: data.gender,
             phoneNumber: data.phoneNumber,
             countryResidence: data.countryResidence.label,
             year: data.year,
             major: data.major,
             inputMajor: data.inputMajor,
             minor: data.minor,
-            school: data.school.value,
-            inputSchool: data.inputSchool,
             email: data.email,
             participated: data.participated,
             hopeToSee: data.hopeToSee,
@@ -316,7 +312,8 @@ export const AuthContextProvider = ({
     first_name: string,
     last_name: string,
     email: string,
-    password: string
+    password: string,
+    school: string | undefined
   ) => {
     try {
       const res = await createUserWithEmailAndPassword(auth, email, password);
@@ -333,6 +330,7 @@ export const AuthContextProvider = ({
         email: email,
         points: 0,
         registered: {},
+        school: school,
         added_time: serverTimestamp(),
       });
       sendEmailVerification(user);

projects/mybyte/pages/404.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image";
+function NotFoundPage() {
+    const textStyle = {fontFamily: "Source Code Pro, monospace"}
+
+    return (
+        <div className={`min-h-0 mt-10 flex items-center justify-center`}>
+            <div className="text-center">
+                <Image className="mb-5" src="/404.png" alt="not found" height={300} width={300} />
+                <p className="mb-10" style={textStyle}>Where are you, homie?</p>
+                <div className="rounded-md overflow-hidden">
+                    <Image src="/404.gif" alt="not found" height={300} width={300} />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default NotFoundPage;

projects/mybyte/pages/_app.tsx

@@ -25,20 +25,20 @@ function MyApp({ Component, pageProps }: AppProps) {
     "/team",
   ];
 
-  useEffect(() => {
-    if (!hasHacks8Class() && hacks_8_bg_routes.includes(page)) {
-      document.body.className += "bg-[url('/UGAHacks8TanBG.png')]";
-    } else {
-      document.body.classList.remove("bg-[url('/UGAHacks8TanBG.png')]");
-    }
-    if (!hasGrayClasses() && gray_bg_routes.includes(page)) {
-      document.body.className += "bg-[#e3e3e3]";
-    } else if (hasGrayClasses() && !gray_bg_routes.includes(page)) {
-      document.body.classList.remove("bg-[#e3e3e3]");
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  });
+  //useEffect(() => {
+  //  if (!hasHacks8Class() && hacks_8_bg_routes.includes(page)) {
+  //    document.body.className += "bg-[url('/UGAHacks8TanBG.png')]";
+  //  } else {
+  //    document.body.classList.remove("bg-[url('/UGAHacks8TanBG.png')]");
+  //  }
+  //  if (!hasGrayClasses() && gray_bg_routes.includes(page)) {
+  //    document.body.className += "bg-[#e3e3e3]";
+  //  } else if (hasGrayClasses() && !gray_bg_routes.includes(page)) {
+  //    document.body.classList.remove("bg-[#e3e3e3]");
+  //  }
+//
+  //  // eslint-disable-next-line react-hooks/exhaustive-deps
+  //});
 
   return (
     <AuthContextProvider>

projects/mybyte/pages/_document.tsx

@@ -24,7 +24,7 @@ class MyDocument extends Document {
         <Head>
           <link rel="icon" href="/UGAHacks_General_Byte.png" />
         </Head>
-        <body className={this.getColor()}>
+        <body>
           <Main />
           <NextScript />
         </body>

projects/mybyte/pages/dashboard.tsx

@@ -21,7 +21,7 @@ const DashboardPage = () => {
 
   return (
     <ProtectedRoute>
-      <div className="flex py-2 container mx-auto">
+      <div className="flex py-2 container mx-auto flex-initial w-full">
         <div className="text-gray-600 px-12 py-24 mt-2 mx-auto">
           <h2 className="text-5xl font-semibold">
             Hey {userInfo.first_name}, welcome to the UGA Hacks Portal!

projects/mybyte/pages/index.tsx

@@ -1,36 +1,33 @@
+import ReactDOMServer from 'react-dom/server';
 import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import hacks8Byte from "../public/byte_mini.png";
 
 const Home: NextPage = () => {
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center py-2">
+  const mainPage = (
+    <>
       <Head>
         <title>MyByte</title>
         <link rel="icon" href="/UGAHacks_General_Byte.png" />
       </Head>
+
+        <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center pt-28 smh:pt-0">
+          <div className="flex flex-col items-start justify-start space-y-4" >
+            <h1 className="text-6xl font-bold text-left">MyByte</h1>
+            <h1 className="text-6xl font-bold text-left">It&apos;s time to create.</h1>
+            <p className="text-xl pt-4 font-bold text-left text-gray-500">
+              Join your fellow hackers. Let&apos;s build the future, together.
+            </p>
+            <Link href="/login" className="text-white bg-primary-600 rounded-full px-8 py-2 text-lg">
+              Log in
+            </Link>
+          </div>
 
-      <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
-        <Image
-          src={hacks8Byte}
-          alt="img-blur-shadow"
-          className="aspect-[694/620]"
-        />
-        <h1 className="text-6xl font-bold">Welcome to MyByte!</h1>
-        <p className="text-xl pt-4 font-bold">
-          UGA Hacks Registration Platform
-        </p>
 
-        <p className="mt-3 text-2xl">
-          Get started by{" "}
-          <Link href="/login" className="text-sky-500">
-            logging in!
-          </Link>
-        </p>
-        <button></button>
-      </main>
+          <button></button>
+        </main>
 
       {/* <footer className="flex h-24 w-full items-center justify-center border-t">
         <a
@@ -43,8 +40,9 @@ const Home: NextPage = () => {
           <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
         </a>
       </footer> */}
-    </div>
+    </>
   );
+  return mainPage;
 };
 
 export default Home;