Added component for Step 3

Made Temporary path called Step 3 for visualization, Added WorkExperienceForm and Step 3 Components.
TritonSE · Nov 21, 2024 · 006852b · 006852b
1 parent 3a47891
commit 006852b
Show file tree

Hide file tree

Showing 7 changed files with 444 additions and 2 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import { Outlet, Route, Routes } from "react-router-dom";
 
-import { NavBar } from "./components/index.ts";
+import { NavBar, Step3 } from "./components/index.ts";
 import { AuthProvider, FormProvider } from "./contexts/index.ts";
 import {
   Application,

diff --git a/frontend/src/components/Step3.module.css b/frontend/src/components/Step3.module.css
@@ -0,0 +1,76 @@
+.red {
+    color: var(--color-ccidc-red);
+  }
+
+  .formContainer {
+    /* width: 100%;
+    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;
+  }
+
+  .bulletPoint {
+    list-style-type: disc;
+    color: var(--color-ccidc-red);
+  }
+
+  .warningText {
+    color: #ad281f;
+    margin: 3rem 10rem !important;
+  }
+
+  .upload {
+    font-family: "Rubik";
+    font-size: 15px;
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 4px;
+    height: 48px;
+    width: 290px;
+    text-align: left;
+    align-items: center;
+    display: flex;
+    margin-top: 2rem;
+    padding: 16px;
+    justify-content: space-between;
+  }
+
+  .uploadButton {
+    width: 24px;
+    height: 24px;
+  }
+
+  .uploadTwo {
+    font-family: "Rubik";
+    font-size: 15px;
+    background-color: white;
+    color: black;
+    border: 1px solid black;
+    border-radius: 4px;
+    height: 40px;
+    width: 285px;
+    text-align: left;
+    align-items: center;
+    display: flex;
+    margin-left: 100px;
+    background-image: url("../assets/uploadIcon.svg");
+    background-repeat: no-repeat, repeat;
+    background-position:
+      right 2em top 50%,
+      0 0;
+    margin-bottom: 2em;
+  }
+
diff --git a/frontend/src/components/Step3.tsx b/frontend/src/components/Step3.tsx
@@ -0,0 +1,169 @@
+import styles from "./Step3.module.css";
+import { WorkExperienceForm } from "./index.ts";
+import { Button } from "./Button.tsx";
+
+export function Step3() {
+  return (
+    <div className={styles.formContainer}>
+
+      <hr />
+
+      <div className={styles.formSection}>
+        <WorkExperienceForm
+          sectionName="Current Company Info"
+          formInputs={[
+            {
+              inputTitle: "Company Name",
+              defaultMessage: "Add Company Name",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Website",
+              defaultMessage: "Add your Company's Website",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Profession",
+              defaultMessage: "Add Profession Here",
+              inputType: "text",
+            },
+            {
+              inputTitle: "Specialization",
+              defaultMessage: "Add Specialization Here",
+              inputType: "text",
+            },
+          ]}
+        />
+      </div>
+      <hr />
+      <div className={styles.formSection}>
+        <WorkExperienceForm
+          sectionName="Work Experience"
+          formInputs={[
+            {
+              inputTitle: "Recent diversified design experience",
+              defaultMessage: "Design Experience",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "How many hours per week did you work (on average)?",
+              defaultMessage: "Number of Hours",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Name of Superviser to Contact",
+              defaultMessage: "Superviser Name",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Supervisor’s Phone Number",
+              defaultMessage: "Enter Phone Number",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Supervisor’s Email Address",
+              defaultMessage: "Enter Supervisor’s Email Address",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Company Name",
+              defaultMessage: "Add Company Name",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Address",
+              defaultMessage: "Enter Address",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "City",
+              defaultMessage: "Enter City",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "State",
+              defaultMessage: "Enter State",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Zip",
+              defaultMessage: "Enter Zip",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Country",
+              defaultMessage: "Enter Country",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Hire Date",
+              defaultMessage: "mm/dd/yyyy",
+              inputType: "text",
+              required: false,
+            },
+            {
+              inputTitle: "Last Date Worked",
+              defaultMessage: "mm/dd/yyyy",
+              inputType: "text",
+              required: false,
+            },
+          ]}
+          add={true}
+        />
+      </div>
+      <hr />
+      <div className={styles.formSection}>
+        <WorkExperienceForm
+          sectionName="Total Work Experience"
+          formInputs={[
+            {
+              inputTitle: "Total Hours Work Experience",
+              defaultMessage: "Number of Hours",
+              inputType: "text",
+              required: true,
+            },
+            {
+              inputTitle: "Total Years Work Experience",
+              defaultMessage: "Number of Years",
+              inputType: "text",
+              required: true,
+            },
+
+          ]}
+        />
+      </div>
+      <hr />
+      <div className={styles.formSection}>
+        <WorkExperienceForm
+          sectionName="Upload Proof of Diversified Interior Design Experience (5+ years of experience)"
+          formInputs={[
+          ]}
+
+        />
+        <p className={styles.note}>
+        i. IF YOU ARE SELF-EMPLOYED – Complete the _______ and include Tax Returns that claims yourself as an Interior Designer in the occupation section going back the amount of years you are claiming experience for or letter from a CPA or Attorney.
+        </p>
+        <p className={styles.note}>
+        ii. IF YOU ARE NOT SELF-EMPLOYED – Fill out the ________ must be signed by Candidate and Employer.
+        </p>
+
+        <Button onClick={undefined} additionalStyle={styles.uploadTwo}>
+            Upload Employment Verification Form
+        </Button>
+
+      </div>
+
+    </div>
+  );
+}
diff --git a/frontend/src/components/WorkExperienceForm.module.css b/frontend/src/components/WorkExperienceForm.module.css
@@ -0,0 +1,97 @@
+.formSectionContainer {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 4rem;
+  }
+
+  .sectionName {
+    margin: 0;
+    font-size: 18px !important;
+  }
+
+  .inputBox {
+    margin-top: 1rem;
+  }
+
+  .inputTitle {
+    font-size: 12px;
+    color: #6c6c6c;
+  }
+
+  ::placeholder {
+    color: var(--color-accent);
+    opacity: 1; /* Firefox */
+  }
+
+  .inputText {
+    width: 100%;
+    padding: 8px 48px 8px 16px;
+    margin-top: 4px;
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--color-text-primary);
+    font: var(--font-body);
+    border: 1px solid var(--color-shadow);
+    border-radius: 5px;
+  }
+
+  /* .inputTextSelected {
+    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;
+    /* color: var(--color-accent); */
+  }
+  .selectInput {
+    border: 0;
+    vertical-align: middle;
+    background: transparent;
+    -webkit-appearance: none;
+    appearance: none;
+    padding-left: 5px;
+  }
+
+  .optionDefault {
+    color: var(--color-accent);
+  }
+
+  .optionSelected {
+    color: var(--color-text-primary);
+  }
+
+  .nameWithAdd {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .nameWithAdd h2 {
+    align-self: center;
+  }
+
+  .add {
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 4px;
+    height: 40px;
+    width: 94px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 16px;
+    padding: 8px 16px 8px 16px;
+  }