smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-27 06:40:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: remove unneccessary divs

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
cv-project/index.html
View file

@ -3,6 +3,12 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CV-Creator</title> <title>CV-Creator</title>
</head> </head>

13
cv-project/src/App.css
View file

@ -51,6 +51,13 @@ body {
background: hsl(var(--white-color)); 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 { .basic-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -66,3 +73,9 @@ body {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
} }
.education-info-form {
padding: 20px;
margin-bottom: 1rem;
background: hsl(var(--white-color));
}

43
cv-project/src/components/educationInfoForm.jsx
View file

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

4
cv-project/src/styles/input.css
View file

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