refactor: remove unneccessary divs

This commit is contained in:
Mike 2024-06-22 18:35:58 -04:00
parent 148d037942
commit 69d31af19e
4 changed files with 44 additions and 22 deletions

View file

@ -3,6 +3,12 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CV-Creator</title>
</head>

View file

@ -51,6 +51,13 @@ body {
background: hsl(var(--white-color));
}
.general-info-header {
font-family: "Inter Tight", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
.basic-info {
display: flex;
flex-direction: column;
@ -66,3 +73,9 @@ body {
display: flex;
gap: 1rem;
}
.education-info-form {
padding: 20px;
margin-bottom: 1rem;
background: hsl(var(--white-color));
}

View file

@ -1,27 +1,26 @@
import { useState, useEffect } from "react";
import Input from "./input";
export default function EducationInfoForm(props) {
const [educationItemActive, setEducationItemActive] = useState(false);
return (
<div className="education-info section">
<div>
<button
onClick={() => {
setEducationItemActive(!educationItemActive);
}}
>
Add Education Info
</button>
<>
<button
onClick={() => {
setEducationItemActive(!educationItemActive);
}}
>
Add Education Info
</button>
<EducationForm
isActive={educationItemActive}
educationInfo={props.educationInfo}
setEducationInfo={props.setEducationInfo}
editSchool={props.editEducation}
/>
</div>
</div>
<EducationForm
isActive={educationItemActive}
educationInfo={props.educationInfo}
setEducationInfo={props.setEducationInfo}
editSchool={props.editEducation}
/>
</>
);
}
@ -57,23 +56,23 @@ function EducationForm({
};
return (
<div>
<>
{isActive ? (
<div className="education-info-form">
<form action="" style={contactFormStyle}>
<input
<Input
type="text"
placeholder="Enter university/school"
value={schoolName}
onChange={(e) => setSchoolName(e.target.value)}
/>
<input
<Input
type="text"
placeholder="Enter graduation date"
value={graduationDate}
onChange={(e) => setGraduationDate(e.target.value)}
/>
<input
<Input
type="text"
placeholder="Enter degree/field of study"
value={fieldOfStudy}
@ -124,6 +123,6 @@ function EducationForm({
</form>
</div>
) : null}
</div>
</>
);
}

View file

@ -3,6 +3,10 @@
flex-direction: column;
font-size: 1.3rem;
line-height: 1.3;
font-family: "Inter Tight", sans-serif;
font-optical-sizing: auto;
/* font-weight: <weight>; */
font-style: normal;
}
.input label {