From 172295fa53683acfa39fad86128089d7e3447116 Mon Sep 17 00:00:00 2001 From: Dhruv Patel Date: Sun, 16 Jul 2023 19:47:14 -0400 Subject: [PATCH 01/19] Remove old theme and add new theme and wording --- projects/mybyte/pages/index.tsx | 36 ++++++++++++++++----------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/projects/mybyte/pages/index.tsx b/projects/mybyte/pages/index.tsx index e8a469d..4a1034b 100644 --- a/projects/mybyte/pages/index.tsx +++ b/projects/mybyte/pages/index.tsx @@ -6,31 +6,29 @@ import hacks8Byte from "../public/byte_mini.png"; const Home: NextPage = () => { return ( -
+
+ + MyByte + +
+
+

MyByte

+

It's time to create.

+

+ Join your fellow hackers. Let's build the future, together. +

+ + Log in + +
-
- img-blur-shadow -

Welcome to MyByte!

-

- UGA Hacks Registration Platform -

-

- Get started by{" "} - - logging in! - -

- -
+ +
{/* */}
); + return mainPage; }; export default Home; diff --git a/projects/mybyte/tailwind.config.js b/projects/mybyte/tailwind.config.js index e259cd1..39e1c93 100644 --- a/projects/mybyte/tailwind.config.js +++ b/projects/mybyte/tailwind.config.js @@ -10,6 +10,9 @@ module.exports = { fontFamily: { 'inter': ['Inter', 'sans-serif'], }, + screens: { + 'smh': {'raw': '(max-height: 668px))'} // from here: https://stackoverflow.com/questions/61915143/how-can-i-apply-a-media-query-to-height-and-width-using-tailwind + }, }, }, plugins: [], From e7f0bc64f9a0806bf1836137795c504b62a4f4bd Mon Sep 17 00:00:00 2001 From: Justin Moon Date: Thu, 10 Aug 2023 13:49:02 -0400 Subject: [PATCH 09/19] Did the login and signup pages --- projects/mybyte/components/ProtectedRoute.tsx | 2 +- projects/mybyte/components/loginError.tsx | 2 +- projects/mybyte/components/navbar.tsx | 4 +- projects/mybyte/context/AuthContext.tsx | 4 +- projects/mybyte/pages/_app.tsx | 28 +++--- projects/mybyte/pages/_document.tsx | 2 +- projects/mybyte/pages/dashboard.tsx | 2 +- projects/mybyte/pages/index.tsx | 6 +- projects/mybyte/pages/login.tsx | 40 +++++---- projects/mybyte/pages/signup.tsx | 85 ++++++++++++++----- projects/mybyte/styles/globals.css | 5 +- projects/mybyte/tailwind.config.js | 11 ++- 12 files changed, 121 insertions(+), 70 deletions(-) diff --git a/projects/mybyte/components/ProtectedRoute.tsx b/projects/mybyte/components/ProtectedRoute.tsx index 4b63dbe..310ede0 100644 --- a/projects/mybyte/components/ProtectedRoute.tsx +++ b/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(); diff --git a/projects/mybyte/components/loginError.tsx b/projects/mybyte/components/loginError.tsx index 787f84a..fcd064e 100644 --- a/projects/mybyte/components/loginError.tsx +++ b/projects/mybyte/components/loginError.tsx @@ -12,7 +12,7 @@ class loginError extends React.Component { render() { return ( -
+
{this.props.text}
); diff --git a/projects/mybyte/components/navbar.tsx b/projects/mybyte/components/navbar.tsx index 7864f15..9d3516d 100644 --- a/projects/mybyte/components/navbar.tsx +++ b/projects/mybyte/components/navbar.tsx @@ -133,7 +133,9 @@ const Navbar = ({ children }: { children: React.ReactNode }) => { - {children} +
+ {children} +
); // last div is to offset the navbar's position since it is fixed now }; diff --git a/projects/mybyte/context/AuthContext.tsx b/projects/mybyte/context/AuthContext.tsx index 631187c..ab83dac 100644 --- a/projects/mybyte/context/AuthContext.tsx +++ b/projects/mybyte/context/AuthContext.tsx @@ -316,7 +316,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 +334,7 @@ export const AuthContextProvider = ({ email: email, points: 0, registered: {}, + school: school, added_time: serverTimestamp(), }); sendEmailVerification(user); diff --git a/projects/mybyte/pages/_app.tsx b/projects/mybyte/pages/_app.tsx index 7008191..4d1a2db 100644 --- a/projects/mybyte/pages/_app.tsx +++ b/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 ( diff --git a/projects/mybyte/pages/_document.tsx b/projects/mybyte/pages/_document.tsx index a8c6067..a94803c 100644 --- a/projects/mybyte/pages/_document.tsx +++ b/projects/mybyte/pages/_document.tsx @@ -24,7 +24,7 @@ class MyDocument extends Document { - +
diff --git a/projects/mybyte/pages/dashboard.tsx b/projects/mybyte/pages/dashboard.tsx index a5ba788..6a48d90 100644 --- a/projects/mybyte/pages/dashboard.tsx +++ b/projects/mybyte/pages/dashboard.tsx @@ -21,7 +21,7 @@ const DashboardPage = () => { return ( -
+

Hey {userInfo.first_name}, welcome to the UGA Hacks Portal! diff --git a/projects/mybyte/pages/index.tsx b/projects/mybyte/pages/index.tsx index 050bc16..044c53f 100644 --- a/projects/mybyte/pages/index.tsx +++ b/projects/mybyte/pages/index.tsx @@ -7,9 +7,7 @@ import hacks8Byte from "../public/byte_mini.png"; const Home: NextPage = () => { const mainPage = ( -
- - + <> MyByte @@ -42,7 +40,7 @@ const Home: NextPage = () => { Vercel Logo */} -
+ ); return mainPage; }; diff --git a/projects/mybyte/pages/login.tsx b/projects/mybyte/pages/login.tsx index 7593b1a..f6054a2 100644 --- a/projects/mybyte/pages/login.tsx +++ b/projects/mybyte/pages/login.tsx @@ -66,44 +66,43 @@ const LoginPage = () => { }; return ( -
-

- Log In +
+

+ Log in to your account

-
+
- OR + or
-
@@ -120,7 +119,7 @@ const LoginPage = () => {
@@ -141,15 +140,14 @@ const LoginPage = () => {
-
-

- Forgot Password -

+
+ Forgot your password? + Create account
diff --git a/projects/mybyte/pages/signup.tsx b/projects/mybyte/pages/signup.tsx index a5d3cae..a20c978 100644 --- a/projects/mybyte/pages/signup.tsx +++ b/projects/mybyte/pages/signup.tsx @@ -4,12 +4,15 @@ import { useAuth } from "../context/AuthContext"; import { useRouter } from "next/router"; import { FirebaseError } from "firebase/app"; import googleLogo from "../public/googleLogo.svg"; +import Link from "next/link"; import Image from "next/image"; +import { ReactSelectObject } from "../interfaces/react-select"; interface SignupType { email: string; first_name: string; last_name: string; + school: string; password: string; password_confirm: string; } @@ -26,9 +29,21 @@ const SignupPage = () => { formState: { errors }, } = methods; + const schoolOptions = [ + { value: "uga", label: "University of Georgia" }, + { value: "gt", label: "Georgia Tech" }, + { value: "georgia-state", label: "Georgia State" }, + { value: "georgia-college", label: "Georgia College" }, + { value: "ucf", label: "University of Central Florida" }, + { value: "stanford", label: "Stanford University" }, + { value: "other", label: "Other" }, + ]; + const onSubmit = async (data: SignupType) => { try { - await signUp(data.first_name, data.last_name, data.email, data.password); + let schOpt = schoolOptions.find((item) => {return item.label === data.school}); + let school = (schOpt === undefined || schOpt === null) ? data.school : schOpt.value; + await signUp(data.first_name, data.last_name, data.email, data.password, school); router.push("/emailVerification"); } catch (err: any) { if (err instanceof FirebaseError) { @@ -57,26 +72,25 @@ const SignupPage = () => { }; return ( -
-

- Sign Up +
+

+ Sign up for an account

{/*
*/}
-
+
- OR + or
@@ -132,7 +146,7 @@ const SignupPage = () => {
@@ -153,7 +167,7 @@ const SignupPage = () => {
@@ -174,7 +188,33 @@ const SignupPage = () => {
+
+ + + + {schoolOptions.map((item, key) => + + )} + + {errors.last_name && ( +

{errors.last_name.message}

+ )} +
+
+
+ @@ -193,7 +233,7 @@ const SignupPage = () => {
@@ -215,11 +255,14 @@ const SignupPage = () => {
+
+ Already have an account? +
diff --git a/projects/mybyte/styles/globals.css b/projects/mybyte/styles/globals.css index c354931..76e8682 100644 --- a/projects/mybyte/styles/globals.css +++ b/projects/mybyte/styles/globals.css @@ -1,9 +1,12 @@ @tailwind base; @tailwind components; @tailwind utilities; +@tailwind variants; @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); +@config '../tailwind.config.js'; body { overflow: hidden; - } \ No newline at end of file + } + diff --git a/projects/mybyte/tailwind.config.js b/projects/mybyte/tailwind.config.js index 39e1c93..4560602 100644 --- a/projects/mybyte/tailwind.config.js +++ b/projects/mybyte/tailwind.config.js @@ -6,13 +6,18 @@ module.exports = { './app/**/*.{js,ts,jsx,tsx}', ], theme: { + screens: { + 'sm': '640px', + 'md': '768px', + 'lg': '1024px', + 'xl': '1280px', + '2xl': '1536px', + 'smh': {'raw': '(min-height: 668px)'}, // from here: https://stackoverflow.com/questions/61915143/how-can-i-apply-a-media-query-to-height-and-width-using-tailwind + }, extend: { fontFamily: { 'inter': ['Inter', 'sans-serif'], }, - screens: { - 'smh': {'raw': '(max-height: 668px))'} // from here: https://stackoverflow.com/questions/61915143/how-can-i-apply-a-media-query-to-height-and-width-using-tailwind - }, }, }, plugins: [], From e059108db8d22ab7ccf6e5e8f0baa6ec95c1b14a Mon Sep 17 00:00:00 2001 From: Justin Moon Date: Wed, 13 Sep 2023 10:38:22 -0400 Subject: [PATCH 10/19] Dropped vertically centered div, but when content overflows, it should be at the top --- projects/mybyte/components/navbar.tsx | 8 ++++---- projects/mybyte/pages/login.tsx | 2 +- projects/mybyte/pages/signup.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/mybyte/components/navbar.tsx b/projects/mybyte/components/navbar.tsx index 9d3516d..2f41f81 100644 --- a/projects/mybyte/components/navbar.tsx +++ b/projects/mybyte/components/navbar.tsx @@ -30,8 +30,8 @@ const Navbar = ({ children }: { children: React.ReactNode }) => { }; return ( -
-