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

feat(styling): colors, btns, etc

Browse source
This commit is contained in:
Mike 2024-06-23 14:53:04 -04:00
parent 10e4fb79d8
commit eb98bc2905
4 changed files with 83 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
cv-project/src/App.jsx
View file

@ -7,6 +7,7 @@ import ExperienceDisplay from "./components/experienceDisplay";
import "./App.css"; import "./App.css";
import { useState } from "react"; import { useState } from "react";
import Button from "./components/button";
function App() { function App() {
const [basicInfo, setBasicInfo] = useState({ const [basicInfo, setBasicInfo] = useState({
@ -26,16 +27,18 @@ function App() {
<div className="form"> <div className="form">
<GeneralInfoForm setBasicInfo={setBasicInfo} basicInfo={basicInfo} /> <GeneralInfoForm setBasicInfo={setBasicInfo} basicInfo={basicInfo} />
<div className="btn-group"> <div className="btn-group">
<button <Button
onClick={() => { onClick={() => {
setEducationItemActive(!educationItemActive); setEducationItemActive(!educationItemActive);
}} }}
> text="Add Education"
Add Education Info className="normal-btn"
</button> />
<button onClick={() => setShowJobForm(!showJobForm)}> <Button
Add Employer Info onClick={() => setShowJobForm(!showJobForm)}
</button> text="Add Employment"
className="normal-btn"
/>
</div> </div>
<EducationInfoForm <EducationInfoForm
educationInfo={educationInfo} educationInfo={educationInfo}

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

@ -1,5 +1,6 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import Input from "./input"; import Input from "./input";
import Button from "./button";
export default function EducationInfoForm(props) { export default function EducationInfoForm(props) {
return ( return (
@ -78,48 +79,49 @@ function EducationForm({
value={fieldOfStudy} value={fieldOfStudy}
onChange={(e) => setFieldOfStudy(e.target.value)} onChange={(e) => setFieldOfStudy(e.target.value)}
/> />
<button <div className="btn-group">
type="submit" <Button
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
const updatedSchools = [...educationInfo]; setGraduationDate("");
if (schoolId !== -1 && schoolId !== null) { setSchoolName("");
updatedSchools[schoolId] = { setFieldOfStudy("");
schoolName: schoolName, schoolId = null;
graduationDate: graduationDate, }}
fieldOfStudy: fieldOfStudy, text="Clear"
}; />
setEducationInfo(updatedSchools); <Button
} else { type="submit"
setEducationInfo([ className="submit-btn"
...educationInfo, onClick={(e) => {
{ e.preventDefault();
const updatedSchools = [...educationInfo];
if (schoolId !== -1 && schoolId !== null) {
updatedSchools[schoolId] = {
schoolName: schoolName, schoolName: schoolName,
fieldOfStudy: fieldOfStudy,
graduationDate: graduationDate, graduationDate: graduationDate,
id: crypto.randomUUID(), fieldOfStudy: fieldOfStudy,
}, };
]); setEducationInfo(updatedSchools);
} } else {
setEducationInfo([
...educationInfo,
{
schoolName: schoolName,
fieldOfStudy: fieldOfStudy,
graduationDate: graduationDate,
id: crypto.randomUUID(),
},
]);
}
setGraduationDate(""); setGraduationDate("");
setSchoolName(""); setSchoolName("");
setFieldOfStudy(""); setFieldOfStudy("");
}} }}
> text="Submit"
Submit />
</button> </div>
<button
onClick={(e) => {
e.preventDefault();
setGraduationDate("");
setSchoolName("");
setFieldOfStudy("");
schoolId = null;
}}
>
Clear
</button>
</form> </form>
</div> </div>
) : null} ) : null}

44
cv-project/src/components/experienceForm.jsx
View file

@ -1,5 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import Input from "./input"; import Input from "./input";
import Button from "./button";
export default function ExperienceForm(props) { export default function ExperienceForm(props) {
return ( return (
@ -94,27 +95,28 @@ function JobForm({ isActive, jobs, setJobs }) {
onChange={(e) => setJobDescription(e.target.value)} onChange={(e) => setJobDescription(e.target.value)}
/> />
</div> </div>
<button <div className="btn-group">
onClick={(e) => { <Button
e.preventDefault(); onClick={(e) => {
clear(); e.preventDefault();
}} clear();
> }}
Clear text="Clear"
</button> />
<button <Button
onClick={(e) => onClick={(e) =>
handleSubmit(e, { handleSubmit(e, {
employer, employer,
jobTitle, jobTitle,
jobDescription, jobDescription,
employmentStart, employmentStart,
employmentEnd, employmentEnd,
}) })
} }
> className="submit-btn"
Submit text="Submit"
</button> />
</div>
</form> </form>
</div> </div>
) : null} ) : null}

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

@ -15,5 +15,13 @@
} }
.input input { .input input {
font-size: 1.3rem; font-size: 1.1rem;
padding: 0.5rem;
border-radius: 0.4rem;
outline: 1px solid hsl(var(--light-gray));
border: none;
}
.input input:focus {
outline: 2px solid hsl(var(--dark-gray));
} }