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,24 +16,24 @@ function EducationDisplay(props) {
     <>
       {props.educationInfo.map((item) => {
         return (
-          <div key={item.schoolName} className="education-info">
-            <h2>School: {item.schoolName}</h2>
+          <div key={item.schoolName} className="education-item">
+            <h2>{item.schoolName}</h2>
             <p>
               Graduation: {item.graduationDate + " "}
-              Degree: {item.fieldOfStudy}
-              <button onClick={() => props.setEditEducation(item)}>edit</button>
-              <button
-                onClick={() =>
-                  deleteEducationItem(
-                    props.educationInfo,
-                    item.schoolName,
-                    props.setEducationInfo,
-                  )
-                }
-              >
-                remove
-              </button>
+              {item.fieldOfStudy}
             </p>
+            <button onClick={() => props.setEditEducation(item)}>edit</button>
+            <button
+              onClick={() =>
+                deleteEducationItem(
+                  props.educationInfo,
+                  item.schoolName,
+                  props.setEducationInfo,
+                )
+              }
+            >
+              remove
+            </button>
           </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,57 +47,76 @@ function JobForm({ isActive, jobs, setJobs }) {
   return (
     <>
       {isActive ? (
-        <form action="" style={formStyle}>
-          <input
-            type="text"
-            placeholder="Employer"
-            value={employer}
-            onChange={(e) => setEmployer(e.target.value)}
-          />
-          <input
-            type="text"
-            placeholder="Job title"
-            value={jobTitle}
-            onChange={(e) => setJobTitle(e.target.value)}
-          />
-          <input
-            type="text"
-            placeholder="Employment Start Date"
-            value={employmentStart}
-            onChange={(e) => setEmploymentStart(e.target.value)}
-          />
-          <input
-            type="text"
-            placeholder="Employment End Date"
-            value={employmentEnd}
-            onChange={(e) => setEmploymentEnd(e.target.value)}
-          />
-          <textarea
-            value={jobDescription}
-            onChange={(e) => setJobDescription(e.target.value)}
-          />
-          <button
-            onClick={(e) => {
-              e.preventDefault();
-              clear();
-            }}
-          >
-            Clear
-          </button>
-          <button
-            onClick={(e) =>
-              handleSubmit(e, {
-                employer,
-                jobTitle,
-                jobDescription,
-                employmentStart,
-                employmentEnd,
-              })
-            }
-          >
-            Submit
-          </button>
-        </form>
+        <div className="job-info-form">
+          <h2 className="general-info-header">Employment History</h2>
+          <form action="" style={formStyle}>
+            <Input
+              name="employer"
+              label={true}
+              labelName="Employer"
+              type="text"
+              placeholder=""
+              value={employer}
+              onChange={(e) => setEmployer(e.target.value)}
+            />
+            <Input
+              name="jobTitle"
+              label={true}
+              labelName="Job title"
+              type="text"
+              placeholder=""
+              value={jobTitle}
+              onChange={(e) => setJobTitle(e.target.value)}
+            />
+            <Input
+              name="startDate"
+              label={true}
+              labelName="Start date"
+              type="text"
+              placeholder=""
+              value={employmentStart}
+              onChange={(e) => setEmploymentStart(e.target.value)}
+            />
+            <Input
+              name="endDate"
+              label={true}
+              labelName="End date"
+              type="text"
+              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();
+                clear();
+              }}
+            >
+              Clear
+            </button>
+            <button
+              onClick={(e) =>
+                handleSubmit(e, {
+                  employer,
+                  jobTitle,
+                  jobDescription,
+                  employmentStart,
+                  employmentEnd,
+                })
+              }
+            >
+              Submit
+            </button>
+          </form>
+        </div>
       ) : null}
     </>
   );