add divider to section renamer and add button

saadq · Jan 1, 2024 · 0ede43c · 0ede43c
1 parent a9d6e95
commit 0ede43c
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 31 deletions.
diff --git a/src/components/core/Divider.tsx b/src/components/core/Divider.tsx
@@ -4,6 +4,6 @@ import { colors } from '../../theme'
 export const Divider = styled.hr`
   margin: 24px 0;
   background: ${colors.primary};
-  height: 10px;
+  height: 4px;
   border: none;
 `
diff --git a/src/components/generator/form/sections/AwardsSection.tsx b/src/components/generator/form/sections/AwardsSection.tsx
@@ -11,15 +11,17 @@ export function AwardSection() {
   return (
     <FormSection title="Honors & Awards">
       {fields.length > 0 && (
-        <LabeledInput
-          name="headings.awards"
-          label="Section Heading"
-          placeholder="Awards"
-        />
+        <Fragment>
+          <LabeledInput
+            name="headings.awards"
+            label="Section Heading"
+            placeholder="Awards"
+          />
+          <Divider />
+        </Fragment>
       )}
       {fields.map((field, index) => (
         <Fragment key={field.id}>
-          <Divider />
           <LabeledInput
             name={`awards.${index}.title`}
             label="Award Name"
@@ -40,6 +42,7 @@ export function AwardSection() {
             label="Summary"
             placeholder="Recognized for creating the most awesome project at a hackathon."
           />
+          <Divider />
         </Fragment>
       ))}
       <AddButton type="button" onClick={() => append({})}>

diff --git a/src/components/generator/form/sections/EducationSection.tsx b/src/components/generator/form/sections/EducationSection.tsx
@@ -11,15 +11,17 @@ export function EducationSection() {
   return (
     <FormSection title="Your Educational Background">
       {fields.length > 0 && (
-        <LabeledInput
-          name="headings.education"
-          label="Section Heading"
-          placeholder="Education"
-        />
+        <Fragment>
+          <LabeledInput
+            name="headings.education"
+            label="Section Heading"
+            placeholder="Education"
+          />
+          <Divider />
+        </Fragment>
       )}
       {fields.map((field, index) => (
         <Fragment key={field.id}>
-          <Divider />
           <LabeledInput
             name={`education.${index}.institution`}
             label="School name"
@@ -45,6 +47,7 @@ export function EducationSection() {
             label="End Date"
             placeholder="Jun 2019"
           />
+          <Divider />
         </Fragment>
       ))}
       <AddButton type="button" onClick={() => append({})}>

diff --git a/src/components/generator/form/sections/FormSection.tsx b/src/components/generator/form/sections/FormSection.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 const Container = styled.fieldset`
   width: 100%;
   padding: 0 2rem;
+  padding-bottom: 2rem;
 `
 
 const Title = styled.h2`

diff --git a/src/components/generator/form/sections/SkillsSection.tsx b/src/components/generator/form/sections/SkillsSection.tsx
@@ -13,15 +13,17 @@ export function SkillsSection() {
   return (
     <FormSection title="Your Skills">
       {fields.length > 0 && (
-        <LabeledInput
-          name="headings.skills"
-          label="Section Heading"
-          placeholder="Skills"
-        />
+        <Fragment>
+          <LabeledInput
+            name="headings.skills"
+            label="Section Heading"
+            placeholder="Skills"
+          />
+          <Divider />
+        </Fragment>
       )}
       {fields.map((field, index) => (
         <Fragment key={field.id}>
-          <Divider />
           <LabeledInput
             name={`skills.${index}.name`}
             label="Skill name"
@@ -32,6 +34,7 @@ export function SkillsSection() {
             placeholder="TypeScript"
             name={`skills.${index}.keywords`}
           />
+          <Divider />
         </Fragment>
       ))}
       <AddButton type="button" onClick={() => append({})}>

diff --git a/src/components/generator/form/sections/WorkSection.tsx b/src/components/generator/form/sections/WorkSection.tsx
@@ -13,15 +13,17 @@ export function WorkSection() {
   return (
     <FormSection title="Your Work Experience">
       {fields.length > 0 && (
-        <LabeledInput
-          name="headings.work"
-          label="Section Heading"
-          placeholder="Work"
-        />
+        <Fragment>
+          <LabeledInput
+            name="headings.work"
+            label="Section Heading"
+            placeholder="Work"
+          />
+          <Divider />
+        </Fragment>
       )}
       {fields.map((field, index) => (
         <Fragment key={field.id}>
-          <Divider />
           <LabeledInput
             name={`work.${index}.company`}
             label="Company name"
@@ -52,6 +54,7 @@ export function WorkSection() {
             placeholder="Did cool stuff at company"
             name={`work.${index}.highlights`}
           />
+          <Divider />
         </Fragment>
       ))}
       <AddButton type="button" onClick={() => append({})}>

diff --git a/src/components/generator/form/sections/projectsSection.tsx b/src/components/generator/form/sections/projectsSection.tsx
@@ -13,15 +13,17 @@ export function ProjectsSection() {
   return (
     <FormSection title="Your Projects">
       {fields.length > 0 && (
-        <LabeledInput
-          name="headings.projects"
-          label="Section Heading"
-          placeholder="Projects"
-        />
+        <Fragment>
+          <LabeledInput
+            name="headings.projects"
+            label="Section Heading"
+            placeholder="Projects"
+          />
+          <Divider />
+        </Fragment>
       )}
       {fields.map((field, index) => (
         <Fragment key={field.id}>
-          <Divider />
           <LabeledInput
             name={`projects.${index}.name`}
             label="Project Name"
@@ -42,6 +44,7 @@ export function ProjectsSection() {
             placeholder="TypeScript"
             name={`projects.${index}.keywords`}
           />
+          <Divider />
         </Fragment>
       ))}
       <AddButton type="button" onClick={() => append({})}>