chore:updated file names, folder structures and the landing page UI

Author: ipetersenpai

src/components/Auth/RegisterForm.jsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { TextField } from "@mui/material";
+import FormControl from "@mui/material/FormControl";
+import MenuItem from "@mui/material/MenuItem";
 import Button from "@mui/material/Button";
 import { useForm } from "react-hook-form";
 import { VscEye } from "react-icons/vsc";
@@ -16,6 +18,7 @@ const RegisterForm = ({ handleModeChange }) => {
   const [complete, setComplete] = useState("idle");
   //---show/hide password option---
   const [showPassword, setShowPassword] = useState(false);
+  const [selectedSchool, setSelectedSchool] = useState(false);
   const handleClickShowPassword = () => setShowPassword((show) => !show);
 
   const {
@@ -48,6 +51,11 @@ const RegisterForm = ({ handleModeChange }) => {
     validate: passwordMatch,
   });
 
+  const SchoolNameList = [
+    "Western Mindanao Adventist Academy",
+    "Paul’s Institute of Technology of Iligan City, Inc",
+  ];
+
   useEffect(() => {
     if (registerStatus === "loading") {
       setComplete("loading");
@@ -124,6 +132,56 @@ const RegisterForm = ({ handleModeChange }) => {
             </p>
           )}
         </div>
+        <FormControl
+          sx={{
+            marginBottom: 3,
+            width: "100%",
+          }}
+        >
+          <TextField
+            select
+            label="What School"
+            variant="outlined"
+            name="selected_school"
+            error={selectedSchool ? true : false}
+            {...register("selected_school", {
+              required: "This is required.",
+            })}
+            SelectProps={{
+              MenuProps: { disableScrollLock: true },
+              style: {
+                height: "47px",
+              },
+            }}
+          >
+            <MenuItem value="">
+              <p
+                className="text-slate-500 text-[12px]"
+                onClick={() => {
+                  setSelectedSchool(true);
+                }}
+              >
+                Select one
+              </p>
+            </MenuItem>
+            {SchoolNameList.map((school, index) => (
+              <MenuItem
+                key={index}
+                value={school}
+                onClick={() => {
+                  setSelectedSchool(false);
+                }}
+              >
+                {school}
+              </MenuItem>
+            ))}
+          </TextField>
+          {errors.selected_school && (
+            <p className="ml-1 mt-1 text-[13px] text-red-500 mb-[-0.2rem]">
+              {selectedSchool && errors.selected_school.message}
+            </p>
+          )}
+        </FormControl>
         <div className="mb-5 w-full">
           <TextField
             label="Username"
@@ -258,6 +316,12 @@ const RegisterForm = ({ handleModeChange }) => {
                   background: "#f1c320", // Same color when hovered
                 },
               }}
+              onClick={() => {
+                watch("selected_school") === "" ||
+                watch("selected_school") === undefined
+                  ? setSelectedSchool(true)
+                  : setSelectedSchool(false);
+              }}
             >
               REGISTER
             </Button>

src/screens/Landing.jsx

@@ -166,8 +166,12 @@ const Landing = () => {
             </button>
           )}
         </section>
+        {/* <div className="flex flex-row w-full justify-center z-10">
+          <div className="w-[1000px] h-[950px] rounded-[50%] bg-green-200 mb-[-20rem]" />
+          <div className="w-[1000px] h-[950px] rounded-[50%] bg-red-200 " />
+        </div> */}
         {/* -----User Manual on how to use----- */}
-        <div className="relative bg-[#323232] min-w-full h-full mt-[60px] overflow-hidden pb-10">
+        <div className="relative bg-[#323232] min-w-full h-full overflow-hidden pb-10 mt-[60px]">
           <div className="flex flex-col lg:w-[900px] w-full h-full mx-auto px-4 lg:px-0">
             <h1
               className="font-bold font_sansita text-[45px] text-[#F5D45E]"

src/screens/SplashScreen.jsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useEffect } from "react";
 import CircularProgress from "@mui/material/CircularProgress";
 import BridgetteLogo from "./../assets/bridgette-logo.webp";
+
 const SplashScreen = ({ displayMessage }) => {
   return (
     <div className="absolute flex flex-col h-full w-full justify-center content-center bg-white">