feat(styling): colors, btns, etc

cv-project/src/App.jsx

@@ -7,6 +7,7 @@ import ExperienceDisplay from "./components/experienceDisplay";
 
 import "./App.css";
 import { useState } from "react";
+import Button from "./components/button";
 
 function App() {
   const [basicInfo, setBasicInfo] = useState({
@@ -26,16 +27,18 @@ function App() {
       <div className="form">
         <GeneralInfoForm setBasicInfo={setBasicInfo} basicInfo={basicInfo} />
         <div className="btn-group">
-          <button
+          <Button
             onClick={() => {
               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>
         <EducationInfoForm
           educationInfo={educationInfo}

cv-project/src/components/educationInfoForm.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import Input from "./input";
+import Button from "./button";
 
 export default function EducationInfoForm(props) {
   return (
@@ -78,8 +79,20 @@ function EducationForm({
               value={fieldOfStudy}
               onChange={(e) => setFieldOfStudy(e.target.value)}
             />
-            <button
+            <div className="btn-group">
+              <Button
+                onClick={(e) => {
+                  e.preventDefault();
+                  setGraduationDate("");
+                  setSchoolName("");
+                  setFieldOfStudy("");
+                  schoolId = null;
+                }}
+                text="Clear"
+              />
+              <Button
                 type="submit"
+                className="submit-btn"
                 onClick={(e) => {
                   e.preventDefault();
                   const updatedSchools = [...educationInfo];
@@ -106,20 +119,9 @@ function EducationForm({
                   setSchoolName("");
                   setFieldOfStudy("");
                 }}
-            >
+                text="Submit"
-              Submit
+              />
-            </button>
+            </div>
-            <button
-              onClick={(e) => {
-                e.preventDefault();
-                setGraduationDate("");
-                setSchoolName("");
-                setFieldOfStudy("");
-                schoolId = null;
-              }}
-            >
-              Clear
-            </button>
           </form>
         </div>
       ) : null}

cv-project/src/components/experienceForm.jsx

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

cv-project/src/styles/input.css

@@ -15,5 +15,13 @@
 }
 
 .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));
 }