Merge branch 'main' of https://github.com/TritonSE/PIA-Program-Manager …

…into feature/aaronchan32/edit-student-route

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

backend/.gitignore

@@ -4,6 +4,7 @@ src/firebase/ServiceAccountKey.json
 .env
 node_modules/
 .eslintcache
+ServiceAccountKey.json
 
 #Compiled JavaScript files
 lib/**/*.js

frontend/src/components/Button.tsx

@@ -12,19 +12,31 @@ type ButtonStyles = {
   primary: string;
   small: string;
   default: string;
+  selected: string;
+  big: string;
 };
 
 const poppins = Poppins({ weight: "400", style: "normal", subsets: [] });
 
 export type ButtonProps = {
-  label: string;
+  label: React.ReactNode | string;
+
   kind?: "primary" | "secondary" | "destructive" | "destructive-secondary";
-  size?: "default" | "small";
+  size?: "default" | "small" | "big";
   disabled?: boolean;
+  selected?: boolean;
 } & React.ComponentProps<"button">;
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { label, kind = "primary", size = "default", disabled = false, className, ...props }: ButtonProps,
+  {
+    label,
+    kind = "primary",
+    size = "default",
+    disabled = false,
+    selected = false,
+    className,
+    ...props
+  }: ButtonProps,
   ref,
 ) {
   const buttonStyles: ButtonStyles = styles as ButtonStyles;
@@ -58,19 +70,25 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
     case "small":
       buttonClass += ` ${buttonStyles.small}`;
       break;
+    case "big":
+      buttonClass += ` ${buttonStyles.big}`;
+      break;
     default:
       buttonClass += ` ${buttonStyles.default}`;
       break;
   }
 
+  if (selected) {
+    buttonClass += ` ${buttonStyles.selected}`;
+  }
+
   // Lets developers apply their own styling
   if (className) {
     buttonClass += ` ${className}`;
   }
 
   // Set font to poppins
   buttonClass += ` ${poppins.className}`;
-
   return (
     <button ref={ref} className={buttonClass} {...props}>
       {label}

frontend/src/components/Landing.tsx

@@ -0,0 +1,83 @@
+/**
+ * Navigation Component
+ *
+ * Wraps the content of the current page with the navbar
+ * Uses the constant in `src/constants` to populate the actual sidebar
+ */
+import { Poppins } from "next/font/google";
+import Image from "next/image";
+import React, { useMemo } from "react";
+
+import { useWindowSize } from "../hooks/useWindowSize";
+import { cn } from "../lib/utils";
+
+const poppins = Poppins({ subsets: ["latin"], weight: "400" });
+
+// the logo and company name component
+const Logo = () => {
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      <div className="mb-14 flex flex-col items-center">
+        <h1 className="font-[alternate-gothic] text-6xl text-white max-lg:text-5xl">Welcome to</h1>
+        <h1 className="font-[alternate-gothic] text-6xl text-white max-lg:text-5xl">
+          Plant it Again!
+        </h1>
+      </div>
+      <div className="flex h-[50%] flex-col items-center">
+        <Image alt="company logo" src="/sidebar/logo.png" width={250} height={250} className="" />
+      </div>
+    </div>
+  );
+};
+
+// Navigation component that wraps the content of the page
+function Landing({ children }: { children: React.ReactNode }) {
+  const { width } = useWindowSize();
+  const isMobile = useMemo(() => width <= 640, [width]);
+
+  return (
+    <main
+      className={cn(
+        "flex h-full w-full bg-pia_primary_light_green max-sm:relative sm:max-lg:flex-col",
+        poppins.className,
+      )}
+    >
+      {/* Login left side */}
+      {!isMobile ? (
+        <div
+          className={cn(
+            "flex h-screen w-full bg-pia_primary_light_green max-sm:relative",
+            poppins.className,
+          )}
+        >
+          <div
+            className={cn(
+              "z-10 flex h-screen w-[50%] flex-col", // Adjust the width based on the isMobile flag
+              "flex-col gap-12 bg-pia_dark_green pt-16 text-pia_accent_green transition-transform",
+            )}
+          >
+            <Logo />
+          </div>
+          <div
+            className={cn(
+              "flex h-screen w-[50%] flex-col", // Adjust the width based on the isMobile flag
+            )}
+          >
+            {children}
+          </div>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            "flex h-screen w-full bg-pia_primary_light_green max-sm:relative",
+            poppins.className,
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </main>
+  );
+}
+
+export default Landing;

frontend/src/components/StudentFormButton.tsx

@@ -3,7 +3,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
 
 import { StudentJSON, createStudent, editStudent } from "../api/students";
 import { cn } from "../lib/utils";
-import { StudentMap } from "../pages";
+import { StudentMap } from "../pages/home";
 
 import { Button } from "./Button";
 import ContactInfo from "./StudentForm/ContactInfo";

frontend/src/components/Textfield.tsx

@@ -11,6 +11,7 @@ type BaseProps<T extends FieldValues> = {
   label?: string;
   type?: string;
   placeholder: string;
+  handleInputChange?: React.ChangeEventHandler<HTMLInputElement>;
   defaultValue?: string;
   className?: string;
 };
@@ -35,6 +36,9 @@ export function Textfield<T extends FieldValues>({
   placeholder,
   calendar = false,
   className,
+  handleInputChange = () => {
+    /* do nothing */
+  },
   type = "text",
   defaultValue = "",
 }: TextFieldProps<T>) {
@@ -64,6 +68,7 @@ export function Textfield<T extends FieldValues>({
           className="focus-visible:out w-full appearance-none bg-inherit px-2 placeholder-pia_accent outline-none"
           id={label + placeholder}
           type={type}
+          onChange={handleInputChange}
           placeholder={placeholder}
           defaultValue={defaultValue}
         />

frontend/src/pages/_app.tsx

@@ -1,14 +1,20 @@
 import { AppProps } from "next/app";
 
-import Navigation from "../components/Navigation";
+import Landing from "../components/Landing";
+
 import "../styles/global.css";
 import "../styles/globals.css";
 
+// import Navigation from "../components/Navigation";
+
 function App({ Component, pageProps }: AppProps) {
   return (
-    <Navigation>
+    <Landing {...pageProps}>
       <Component {...pageProps} />
-    </Navigation>
+    </Landing>
+    // <Navigation>
+    //   <Component {...pageProps} />
+    // </Navigation>
   );
 }
 export default App;