feat(styling): yep

cv-project/src/App.css

@@ -74,8 +74,37 @@ body {
   gap: 1rem;
 }
 
-.education-info-form {
+.education-info-form,
+.job-info-form {
   padding: 20px;
   margin-bottom: 1rem;
   background: hsl(var(--white-color));
+  border-radius: var(--default-border-radius);
+}
+
+.education-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.education-info h2 {
+  align-self: center;
+}
+
+.education-item {
+  padding: 10px 25px 10px 25px;
+}
+
+.education-item h2,
+p {
+  padding: 0;
+  margin: 0;
+}
+
+.btn-group {
+  display: flex;
+  justify-content: center;
+  margin: 30px 0 20px 0;
+  gap: 10px;
 }

cv-project/src/App.jsx

@@ -18,22 +18,39 @@ function App() {
   const [educationInfo, setEducationInfo] = useState([]);
   const [editEducation, setEditEducation] = useState(null);
   const [employmentHistory, setEmploymentHistory] = useState([]);
+  const [showJobForm, setShowJobForm] = useState(false);
+  const [educationItemActive, setEducationItemActive] = useState(false);
 
   return (
     <div className="container">
       <div className="form">
         <GeneralInfoForm setBasicInfo={setBasicInfo} basicInfo={basicInfo} />
+        <div className="btn-group">
+          <button
+            onClick={() => {
+              setEducationItemActive(!educationItemActive);
+            }}
+          >
+            Add Education Info
+          </button>
+          <button onClick={() => setShowJobForm(!showJobForm)}>
+            Add Employer Info
+          </button>
+        </div>
         <EducationInfoForm
           educationInfo={educationInfo}
           setEducationInfo={setEducationInfo}
           setEditEducation={setEditEducation}
           editEducation={editEducation}
+          educationItemActive={educationItemActive}
         />
         <ExperienceForm
           employmentHistory={employmentHistory}
           setEmploymentHistory={setEmploymentHistory}
+          showJobForm={showJobForm}
         />
       </div>
+
       <div className="resume">
         <GeneralInfoDisplay basicInfo={basicInfo} />
         <EducationInfoDisplay

cv-project/src/components/educationInfoDisplay.jsx

@@ -1,12 +1,13 @@
 export default function EducationInfoDisplay(props) {
   return (
-    <>
+    <div className="education-info">
+      <h2>Education</h2>
       <EducationDisplay
         educationInfo={props.educationInfo}
         setEducationInfo={props.setEducationInfo}
         setEditEducation={props.setEditEducation}
       />
-    </>
+    </div>
   );
 }
 
@@ -15,11 +16,12 @@ function EducationDisplay(props) {
     <>
       {props.educationInfo.map((item) => {
         return (
-          <div key={item.schoolName} className="education-info">
+          <div key={item.schoolName} className="education-item">
-            <h2>School: {item.schoolName}</h2>
+            <h2>{item.schoolName}</h2>
             <p>
               Graduation: {item.graduationDate + " "}
-              Degree: {item.fieldOfStudy}
+              {item.fieldOfStudy}
+            </p>
             <button onClick={() => props.setEditEducation(item)}>edit</button>
             <button
               onClick={() =>
@@ -32,7 +34,6 @@ function EducationDisplay(props) {
             >
               remove
             </button>
-            </p>
           </div>
         );
       })}

cv-project/src/components/educationInfoForm.jsx

@@ -2,20 +2,10 @@ import { useState, useEffect } from "react";
 import Input from "./input";
 
 export default function EducationInfoForm(props) {
-  const [educationItemActive, setEducationItemActive] = useState(false);
-
   return (
     <>
-      <button
-        onClick={() => {
-          setEducationItemActive(!educationItemActive);
-        }}
-      >
-        Add Education Info
-      </button>
-
       <EducationForm
-        isActive={educationItemActive}
+        isActive={props.educationItemActive}
         educationInfo={props.educationInfo}
         setEducationInfo={props.setEducationInfo}
         editSchool={props.editEducation}
@@ -59,22 +49,32 @@ function EducationForm({
     <>
       {isActive ? (
         <div className="education-info-form">
+          <h2 className="general-info-header">Education History</h2>
           <form action="" style={contactFormStyle}>
             <Input
+              label={true}
+              labelName="School"
+              name="School"
               type="text"
-              placeholder="Enter university/school"
+              placeholder=""
               value={schoolName}
               onChange={(e) => setSchoolName(e.target.value)}
             />
             <Input
+              label={true}
+              labelName="Graduation date"
+              name="graduationDate"
               type="text"
-              placeholder="Enter graduation date"
+              placeholder=""
               value={graduationDate}
               onChange={(e) => setGraduationDate(e.target.value)}
             />
             <Input
+              label={true}
+              labelName="Degree/Field of study"
+              name="degree"
               type="text"
-              placeholder="Enter degree/field of study"
+              placeholder=""
               value={fieldOfStudy}
               onChange={(e) => setFieldOfStudy(e.target.value)}
             />

cv-project/src/components/experienceForm.jsx

@@ -1,20 +1,15 @@
 import { useState } from "react";
+import Input from "./input";
 
 export default function ExperienceForm(props) {
-  // const [jobs, setJobs] = useState([]);
-  const [showJobForm, setShowJobForm] = useState(false);
-
   return (
-    <div className="Job-info-form">
+    <>
-      <button onClick={() => setShowJobForm(!showJobForm)}>
-        Add Employer Info
-      </button>
       <JobForm
         setJobs={props.setEmploymentHistory}
         jobs={props.employmentHistory}
-        isActive={showJobForm}
+        isActive={props.showJobForm}
       />
-    </div>
+    </>
   );
 }
 
@@ -52,35 +47,53 @@ function JobForm({ isActive, jobs, setJobs }) {
   return (
     <>
       {isActive ? (
+        <div className="job-info-form">
+          <h2 className="general-info-header">Employment History</h2>
           <form action="" style={formStyle}>
-          <input
+            <Input
+              name="employer"
+              label={true}
+              labelName="Employer"
               type="text"
-            placeholder="Employer"
+              placeholder=""
               value={employer}
               onChange={(e) => setEmployer(e.target.value)}
             />
-          <input
+            <Input
+              name="jobTitle"
+              label={true}
+              labelName="Job title"
               type="text"
-            placeholder="Job title"
+              placeholder=""
               value={jobTitle}
               onChange={(e) => setJobTitle(e.target.value)}
             />
-          <input
+            <Input
+              name="startDate"
+              label={true}
+              labelName="Start date"
               type="text"
-            placeholder="Employment Start Date"
+              placeholder=""
               value={employmentStart}
               onChange={(e) => setEmploymentStart(e.target.value)}
             />
-          <input
+            <Input
+              name="endDate"
+              label={true}
+              labelName="End date"
               type="text"
-            placeholder="Employment End Date"
+              placeholder=""
               value={employmentEnd}
               onChange={(e) => setEmploymentEnd(e.target.value)}
             />
+            <div className="input">
+              <label>Description</label>
               <textarea
+                name="jobDescription"
                 value={jobDescription}
                 onChange={(e) => setJobDescription(e.target.value)}
               />
+            </div>
             <button
               onClick={(e) => {
                 e.preventDefault();
@@ -103,6 +116,7 @@ function JobForm({ isActive, jobs, setJobs }) {
               Submit
             </button>
           </form>
+        </div>
       ) : null}
     </>
   );