Model-UN · sdmungov · Sep 26, 2021 · Aug 25, 2021 · Sep 26, 2021 · Sep 26, 2021
diff --git a/components/headerNav/index.tsx b/components/headerNav/index.tsx
@@ -28,6 +28,7 @@ const ListItem = styled.li`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s;
 
   &:hover {
     background-color: ${colors.fadedPrimaryBlue};
@@ -85,10 +86,17 @@ const HeaderNav = () => {
             <Anchor>Staff Applications</Anchor>
           </ListItem>
         </Link>
+        <Link href="/school-registration">
+          <ListItem>
+            <Anchor>School Registration</Anchor>
+          </ListItem>
+        </Link>
       </ListContainer>
     </HeaderWrapper>
   );
 };
 
+
 export default HeaderNav;
 
+
diff --git a/components/jumbotron/index.tsx b/components/jumbotron/index.tsx
@@ -7,14 +7,14 @@ interface JumboTronProps {
   titleTwo: string;
   height: number;
   subTitle?: string;
-  image?: string;  // background image
+  image?: string; // background image
 }
 
 const Jumbotron = (props: JumboTronProps) => {
   const { titleOne, titleTwo, subTitle, height, image } = props;
 
   // handle set background image logic
-  let bgImage = image
+  let bgImage = image;
   if (!bgImage) {
     bgImage = "jumbotron-bg.png";
   }
@@ -23,8 +23,18 @@ const Jumbotron = (props: JumboTronProps) => {
   const minDiffCalc = (100 - height) * 0.5625;
   const minHeightCalc = heightCalc - minDiffCalc;
 
-  const sizeTitleOne = titleOne.length > 6 ? "13.5vw" : "18vw";
-  const sizeTitleTwo = titleTwo.length > 7 ? "13.5vw" : "18vw";
+  let sizeTitleOne = "18vw";
+  let sizeTitleTwo = "18vw";
+  if (titleOne.length >= 12) {
+    sizeTitleOne = "12vw";
+  } else if (titleOne.length >= 6) {
+    sizeTitleOne = "13.5vw";
+  }
+  if (titleTwo.length >= 12) {
+    sizeTitleTwo = "12vw";
+  } else if (titleTwo.length >= 6) {
+    sizeTitleTwo = "13.5vw";
+  }
 
   return (
     <ComponentWrapper
@@ -34,8 +44,7 @@ const Jumbotron = (props: JumboTronProps) => {
       justify="flex-end"
       margins="0"
       style={{
-        backgroundImage:
-          `linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),url(/${bgImage})`,
+        backgroundImage: `linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),url(/${bgImage})`,
         backgroundPosition: "bottom",
         backgroundSize: "cover",
         backgroundRepeat: "no-repeat",

diff --git a/components/stepped-form/index.tsx b/components/stepped-form/index.tsx
@@ -161,7 +161,13 @@ const Icon = styled(FontAwesomeIcon)`
   color: ${colors.dkGray};
 `;
 
-const SteppedForm = () => {
+interface OwnProps {
+  confId: string;
+  formId: string;
+}
+
+const SteppedForm = (props: OwnProps) => {
+  const { confId, formId } = props;
   const [formData, setFormData] = useState<ApiFormData>();
   const [loading, setLoading] = useState<boolean>(true);
   // #TODO - why doesn't this work correctly lol
@@ -170,7 +176,7 @@ const SteppedForm = () => {
 
   const initForm = async () => {
     setLoading(true);
-    const getFormData = await getFormTemplate("1", "1");
+    const getFormData = await getFormTemplate(confId, formId);
     setFormData(getFormData);
     setLoading(false);
   };
@@ -257,7 +263,7 @@ const SteppedForm = () => {
     request.responses = responses;
     // Submit!
     try {
-      await postFormSubmission("1", "1", { responses });
+      await postFormSubmission(confId, formId, { responses });
       await router.replace("/");
       alert(`Application submitted successfully!`);
     } catch (error) {

diff --git a/pages/school-registration/index.tsx b/pages/school-registration/index.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import Head from "next/head";
+import HeaderNav from "../../components/headerNav";
+import Jumbotron from "../../components/jumbotron";
+import Footer from "../../components/footer";
+import SteppedForm from "../../components/stepped-form";
+import { Wrapper } from "../../styles/containers";
+
+const SchoolRegistration = () => {
+  return (
+    <Wrapper>
+      <Head>
+        <title>Chicago International Model UN</title>
+        <meta
+          name="description"
+          content="Chicago International Model United Nations"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Mulish:wght@900&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Alegreya:wght@600&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500&family=Alegreya:wght@600&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500&family=Alegreya:wght@600&family=Source+Sans+Pro&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <HeaderNav />
+      <Jumbotron
+        titleOne="SCHOOL"
+        titleTwo="REGISTRATION"
+        height={65}
+        image="cimun-staff.png"
+      />
+      <SteppedForm confId="1" formId="2" />
+      <Footer />
+    </Wrapper>
+  );
+};
+
+export default SchoolRegistration;
diff --git a/pages/staff-apps/index.tsx b/pages/staff-apps/index.tsx
@@ -6,7 +6,7 @@ import Footer from "../../components/footer";
 import SteppedForm from "../../components/stepped-form";
 import { Wrapper } from "../../styles/containers";
 
-function StaffApps() {
+const StaffApps = () => {
   return (
     <Wrapper>
       <Head>
@@ -36,11 +36,16 @@ function StaffApps() {
         />
       </Head>
       <HeaderNav />
-      <Jumbotron titleOne="STAFF" titleTwo="APPLICATION" height={65} image="cimun-staff.png" />
-      <SteppedForm />
+      <Jumbotron
+        titleOne="STAFF"
+        titleTwo="APPLICATION"
+        height={65}
+        image="cimun-staff.png"
+      />
+      <SteppedForm formId="1" confId="1" />
       <Footer />
     </Wrapper>
   );
-}
+};
 
 export default StaffApps;