infoForm component and important facts

frontend/src/App.tsx

@@ -1,7 +1,6 @@
 import { Outlet, Route, Routes } from "react-router-dom";
 
-import { InfoForm } from "./components/InfoForm.tsx";
-import { NavBar } from "./components/index.ts";
+import { InfoForm, NavBar } from "./components/index.ts";
 import { Apply, Candidates } from "./pages/index.ts";
 
 function Layout() {
@@ -21,7 +20,6 @@ function App() {
           <Route index element={<Candidates />} />
           <Route path="apply" element={<Apply />} />
           <Route path="candidates" element={<Candidates />} />
-          <Route path="apply" element={<Apply />} />
           <Route path="infoForm" element={<InfoForm />} />
         </Route>
       </Routes>

frontend/src/components/FormSection.module.css

@@ -1,13 +1,47 @@
 .formSectionContainer {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 4rem;
 }
 
 h3 {
-  font-size: 18px;
+  font-size: 18px !important;
+}
+
+.inputBox {
+  margin-top: 1rem;
 }
 
 .inputTitle {
   font-size: 12px;
   color: #6c6c6c;
 }
+
+.inputText {
+  width: 100%;
+  padding: 8px 48px 8px 16px;
+  margin-top: 4px;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-accent);
+  font: var(--font-body);
+  border: 1px solid var(--color-shadow);
+  border-radius: 5px;
+}
+
+select.inputText {
+  /* Arrow */
+  appearance: none;
+  background-image: url("../assets/dropArrow.svg");
+  background-repeat: no-repeat;
+  background-position: right top 50%;
+  cursor: pointer;
+}
+.selectInput {
+  border: 0;
+  vertical-align: middle;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  padding-left: 5px;
+}

frontend/src/components/FormSection.tsx

@@ -2,25 +2,48 @@ import React, { ReactNode } from "react";
 
 import styles from "./FormSection.module.css"; // Import CSS styles for Pathway component
 
+export type FormInput = {
+  inputTitle: string;
+  defaultMessage: string;
+  inputType: "text" | "dropdown" | "checkbox"; // Add other input types as needed
+  dropdownOptions?: string[];
+};
+
 export type FormSectionProps = {
   sectionName: string;
-  formTitles: string[];
+  formInputs: FormInput[];
   children?: ReactNode;
 };
 
-export const FormSection: React.FC<FormSectionProps> = ({ sectionName, formTitles }) => {
+export const FormSection: React.FC<FormSectionProps> = ({ sectionName, formInputs }) => {
   return (
     <div>
       <h3 className={styles.sectionName}>{sectionName}</h3>
       <div className={styles.formSectionContainer}>
-        <div>
-          {formTitles.map((inputTitle, index) => (
-            <React.Fragment key={index}>
-              <div className={styles.inputTitle}>{inputTitle}</div>
-              <input type="text" defaultValue={} />
-            </React.Fragment>
-          ))}
-        </div>
+        {formInputs.map((formInput, index) => (
+          <div className={styles.inputBox} key={index}>
+            <div className={styles.inputTitle}>{formInput.inputTitle}</div>
+            {formInput.inputType === "text" && (
+              <input
+                type="text"
+                className={styles.inputText}
+                defaultValue={formInput.defaultMessage}
+              />
+            )}
+            {formInput.inputType === "dropdown" && formInput.dropdownOptions && (
+              <select className={styles.inputText} id="drop">
+                <option value="none" selected disabled hidden>
+                  Select One
+                </option>
+                {formInput.dropdownOptions.map((dropOption, dropIndex) => (
+                  <option key={dropIndex} value={dropOption}>
+                    {dropOption}
+                  </option>
+                ))}
+              </select>
+            )}
+          </div>
+        ))}
       </div>
     </div>
   );

frontend/src/components/InfoForm.module.css

@@ -3,15 +3,26 @@
 }
 
 .formContainer {
-  width: 80%;
+  /* width: 80%; */
+  margin: 3rem 10rem !important;
+  background-color: var(--color-text-secondary);
+}
+
+.formSection {
   margin: 3rem auto !important;
+  width: 80%;
 }
 
 .applyFacts {
   width: 80%;
   margin: 3rem auto !important;
 }
+.listText {
+  color: black;
+  margin: 0;
+}
 
-li::marker {
+.bulletPoint {
+  list-style-type: disc;
   color: var(--color-ccidc-red);
 }

frontend/src/components/InfoForm.tsx

@@ -7,52 +7,151 @@ export function InfoForm() {
       <p className={styles.applyFacts}>
         <strong>Important Facts For Applicants BEFORE YOU APPLY:</strong>
         <ul>
-          <li className={styles.red}>
-            <strong>
-              Do NOT submit an application until ready to begin sitting for the IDEX California®
-              Examination.
-            </strong>
+          <li className={styles.bulletPoint}>
+            <p className={styles.listText}>
+              <strong className={styles.red}>
+                Do NOT submit an application until ready to begin sitting for the IDEX California®
+                Examination.
+              </strong>
+            </p>
           </li>
-          <li>
-            Applications received after an application deadline will be held until the next
-            application review window opens.
+          <li className={styles.bulletPoint}>
+            <p className={styles.listText}>
+              Applications received after an application deadline will be held until the next
+              application review window opens.
+            </p>
           </li>
-          <li>
-            Fees are <strong>non-refundable</strong>.
+          <li className={styles.bulletPoint}>
+            <p className={styles.listText}>
+              Fees are <strong>non-refundable</strong>.
+            </p>
           </li>
-          <li>
-            Applicants have <strong>1 year from submission</strong> to sit for the IDEX California
-            Exam or applications will be nullified and the full process will have to be repeated
-            successfully to gain certification.
+          <li className={styles.bulletPoint}>
+            <p className={styles.listText}>
+              Applicants have <strong>1 year from submission</strong> to sit for the IDEX California
+              Exam or applications will be nullified and the full process will have to be repeated
+              successfully to gain certification.
+            </p>
           </li>
-          <li>
-            Only <strong>eligible applicants</strong> with the required education (Minimum 40 Core
-            Units) or work experience (Minimum 5 Years) will be allowed to sit for the IDEX
-            California® Examination. Specific details on eligible combinations can be found in the
-            Application Categories - Requirements for Certification.
+          <li className={styles.bulletPoint}>
+            <p className={styles.listText}>
+              Only <strong>eligible applicants</strong> with the required education (Minimum 40 Core
+              Units) or work experience (Minimum 5 Years) will be allowed to sit for the IDEX
+              California® Examination. Specific details on eligible combinations can be found in
+              the Application Categories - Requirements for Certification.
+            </p>
           </li>
-          <li>
-            <strong>Submit complete applications</strong>. Incomplete applications are automatically
-            placed on hold, and will be removed if not complete. When a previously incomplete
-            application has been completed, CCIDC then will release the hold and review the
-            application.
+          <li className={styles.bulletPoint}>
+            <p className={styles.listText}>
+              <strong>Submit complete applications</strong>. Incomplete applications are
+              automatically placed on hold, and will be removed if not complete. When a previously
+              incomplete application has been completed, CCIDC then will release the hold and review
+              the application.
+            </p>
           </li>
         </ul>
       </p>
       <hr />
 
-      <div>
+      <div className={styles.formSection}>
         <FormSection
           sectionName="Personal Information"
-          formTitles={[
-            "First Name",
-            "Middle Name",
-            "Last Name",
-            "Maiden/Other Name Used",
-            "Gender",
+          formInputs={[
+            {
+              inputTitle: "First Name",
+              defaultMessage: "Enter First Name Here",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Middle Name",
+              defaultMessage: "Enter Middle Name Here",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Last Name",
+              defaultMessage: "Enter Last Name Here",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Maiden/Other Name Used",
+              defaultMessage: "Enter 2nd Last Name Here",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Gender",
+              defaultMessage: "Select One",
+              inputType: "dropdown",
+              dropdownOptions: ["female", "male", "non-binary", "transgender", "Prefer not to say"],
+            },
+          ]}
+        />
+      </div>
+      <hr />
+      <div className={styles.formSection}>
+        <FormSection
+          sectionName="Contact Information"
+          formInputs={[
+            {
+              inputTitle: "Email Address",
+              defaultMessage: "Enter Email Address",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Confirm Email Address",
+              defaultMessage: "Enter Email Address",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Phone Device Type",
+              defaultMessage: "Select One",
+              inputType: "dropdown",
+              dropdownOptions: ["mobile", "cell", "work"],
+            },
+            {
+              inputTitle: "Phone Number",
+              defaultMessage: "Enter Phone Number",
+              inputType: "text",
+            },
+          ]}
+        />
+      </div>
+      <hr />
+      <div className={styles.formSection}>
+        <FormSection
+          sectionName="Mailing Address"
+          formInputs={[
+            {
+              inputTitle: "Address",
+              defaultMessage: "Enter Address",
+              inputType: "text",
+            },
+            {
+              inputTitle: "City",
+              defaultMessage: "Enter City",
+              inputType: "text",
+            },
+            {
+              inputTitle: "State",
+              defaultMessage: "Enter State",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Zip Code",
+              defaultMessage: "Enter Zip Code",
+              inputType: "text",
+            },
+            {
+              inputTitle: "County",
+              defaultMessage: "Enter County",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Country",
+              defaultMessage: "Enter Country",
+              inputType: "text",
+            },
           ]}
         />
-        {/* Additional form sections or components */}
       </div>
     </div>
   );

frontend/src/components/index.ts

@@ -1,9 +1,10 @@
 import { Accordion } from "./Accordion.tsx";
 import { Button } from "./Button.tsx";
-import { FormSection } from "./FormSection.tsx";
 import { FAQs } from "./FAQs.tsx";
+import { FormSection } from "./FormSection.tsx";
+import { InfoForm } from "./InfoForm.tsx";
 import { NavBar } from "./NavBar.tsx";
 import { Page } from "./Page.tsx";
 import { Pathway } from "./Pathway.tsx";
 
-export { Page, Button, FormSection, NavBar, Accordion, Pathway, FAQs };
+export { Page, Button, FormSection, NavBar, Accordion, Pathway, FAQs, InfoForm };