[offers][feat] tweak offer details submission form (#488)

apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx

@@ -275,16 +275,17 @@ export default function OffersSubmissionForm({
             />
           </div>
           <FormProvider {...formMethods}>
-            <form className="text-sm" onSubmit={handleSubmit(onSubmit)}>
+            <form
+              className="space-y-6 text-sm"
+              onSubmit={handleSubmit(onSubmit)}>
               {steps[step]}
-              {/* <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre> */}
               {step === 0 && (
                 <div className="flex justify-end">
                   <Button
                     disabled={false}
                     icon={ArrowRightIcon}
                     label="Next"
-                    variant="secondary"
+                    variant="primary"
                     onClick={() => {
                       goToNextStep(step);
                       gaEvent({

apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx

@@ -10,7 +10,7 @@ import { useFieldArray } from 'react-hook-form';
 import { PlusIcon } from '@heroicons/react/20/solid';
 import { TrashIcon } from '@heroicons/react/24/outline';
 import { JobType } from '@prisma/client';
-import { Button, Dialog } from '@tih/ui';
+import { Button, Dialog, HorizontalDivider } from '@tih/ui';
 
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import type { JobTitleType } from '~/components/shared/JobTitles';
@@ -45,6 +45,23 @@ type FullTimeOfferDetailsFormProps = Readonly<{
   remove: UseFieldArrayRemove;
 }>;
 
+function Section({
+  children,
+  title,
+}: Readonly<{ children: React.ReactNode; title: string }>) {
+  return (
+    <div>
+      <div className="mb-4">
+        <h3 className="text-lg font-medium leading-6 text-slate-900">
+          {title}
+        </h3>
+        <HorizontalDivider />
+      </div>
+      <div className="space-y-4 sm:space-y-6">{children}</div>
+    </div>
+  );
+}
+
 function FullTimeOfferDetailsForm({
   index,
   remove,
@@ -77,9 +94,9 @@ function FullTimeOfferDetailsForm({
   }, [watchCurrency, index, setValue]);
 
   return (
-    <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <div>
+    <div className="space-y-8 rounded-lg border border-slate-200 p-6 sm:space-y-16 sm:p-8">
+      <Section title="Company & Title Information">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
           <JobTitlesTypeahead
             required={true}
             value={{
@@ -93,7 +110,6 @@ function FullTimeOfferDetailsForm({
               }
             }}
           />
-        </div>
           <FormTextInput
             errorMessage={offerFields?.offersFullTime?.level?.message}
             label="Level"
@@ -104,8 +120,7 @@ function FullTimeOfferDetailsForm({
             })}
           />
         </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <div>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
           <CompaniesTypeahead
             required={true}
             value={{
@@ -120,7 +135,6 @@ function FullTimeOfferDetailsForm({
               }
             }}
           />
-        </div>
           <FormSelect
             display="block"
             errorMessage={offerFields?.location?.message}
@@ -133,7 +147,9 @@ function FullTimeOfferDetailsForm({
             })}
           />
         </div>
-      <div className="mb-5 flex grid grid-cols-2 items-start space-x-3">
+      </Section>
+      <Section title="Compensation Details">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
           <FormMonthYearPicker
             monthLabel="Date Received"
             monthRequired={true}
@@ -142,8 +158,6 @@ function FullTimeOfferDetailsForm({
               required: FieldError.REQUIRED,
             })}
           />
-      </div>
-      <div className="mb-5">
           <FormTextInput
             endAddOn={
               <FormSelect
@@ -180,7 +194,7 @@ function FullTimeOfferDetailsForm({
             )}
           />
         </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
           <FormTextInput
             endAddOn={
               <FormSelect
@@ -195,7 +209,9 @@ function FullTimeOfferDetailsForm({
               />
             }
             endAddOnType="element"
-          errorMessage={offerFields?.offersFullTime?.baseSalary?.value?.message}
+            errorMessage={
+              offerFields?.offersFullTime?.baseSalary?.value?.message
+            }
             label="Base Salary (Annual)"
             placeholder="0"
             startAddOn="$"
@@ -229,8 +245,6 @@ function FullTimeOfferDetailsForm({
               valueAsNumber: true,
             })}
           />
-      </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
           <FormTextInput
             endAddOn={
               <FormSelect
@@ -255,31 +269,35 @@ function FullTimeOfferDetailsForm({
             })}
           />
         </div>
-      <div className="mb-5">
+      </Section>
+      <Section title="Additional Information">
         <FormTextArea
           label="Negotiation Strategy / Interview Performance"
           placeholder="e.g. Did well in the behavioral interview / Used competing offers to negotiate for a higher salary"
           {...register(`offers.${index}.negotiationStrategy`)}
         />
-      </div>
-      <div className="mb-5">
         <FormTextArea
           label="Comments"
           placeholder="e.g. Benefits offered by the company"
           {...register(`offers.${index}.comments`)}
         />
-      </div>
-      <div className="flex justify-end">
         {index > 0 && (
+          <div className="space-y-4 sm:space-y-6">
+            <HorizontalDivider />
+            <div className="flex justify-end">
               <Button
                 icon={TrashIcon}
                 label="Delete"
-            variant="secondary"
-            onClick={() => remove(index)}
+                variant="tertiary"
+                onClick={() => {
+                  remove(index);
+                }}
               />
-        )}
             </div>
           </div>
+        )}
+      </Section>
+    </div>
   );
 }
 
@@ -308,9 +326,8 @@ function InternshipOfferDetailsForm({
   });
 
   return (
-    <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <div>
+    <div className="space-y-8 rounded-lg border border-slate-200 p-6 sm:space-y-16 sm:p-8">
+      <Section title="Company & Title Information">
         <JobTitlesTypeahead
           required={true}
           value={{
@@ -324,10 +341,8 @@ function InternshipOfferDetailsForm({
             }
           }}
         />
-        </div>
-      </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <div>
+
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
           <CompaniesTypeahead
             required={true}
             value={{
@@ -342,7 +357,6 @@ function InternshipOfferDetailsForm({
               }
             }}
           />
-        </div>
           <FormSelect
             display="block"
             errorMessage={offerFields?.location?.message}
@@ -355,7 +369,7 @@ function InternshipOfferDetailsForm({
             })}
           />
         </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
           <FormSelect
             display="block"
             errorMessage={offerFields?.offersIntern?.internshipCycle?.message}
@@ -380,7 +394,9 @@ function InternshipOfferDetailsForm({
             })}
           />
         </div>
-      <div className="mb-5">
+      </Section>
+      <Section title="Compensation Details">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
           <FormMonthYearPicker
             monthLabel="Date Received"
             monthRequired={true}
@@ -389,8 +405,6 @@ function InternshipOfferDetailsForm({
               required: FieldError.REQUIRED,
             })}
           />
-      </div>
-      <div className="mb-5">
           <FormTextInput
             endAddOn={
               <FormSelect
@@ -424,33 +438,35 @@ function InternshipOfferDetailsForm({
             })}
           />
         </div>
-      <div className="mb-5">
+      </Section>
+      <Section title="Additional Information">
         <FormTextArea
           label="Negotiation Strategy / Interview Performance"
           placeholder="e.g. Did well in the behavioral interview. Used competing offers to negotiate for a higher salary."
           {...register(`offers.${index}.negotiationStrategy`)}
         />
-      </div>
-      <div className="mb-5">
         <FormTextArea
           label="Comments"
           placeholder="e.g. Encountered similar questions using the Technical Interview Handbook."
           {...register(`offers.${index}.comments`)}
         />
-      </div>
-      <div className="flex justify-end">
+      </Section>
       {index > 0 && (
+        <div className="space-y-4 sm:space-y-6">
+          <HorizontalDivider />
+          <div className="flex justify-end">
             <Button
               icon={TrashIcon}
               label="Delete"
-            variant="secondary"
+              variant="tertiary"
               onClick={() => {
                 remove(index);
               }}
             />
-        )}
           </div>
         </div>
+      )}
+    </div>
   );
 }
 
@@ -466,7 +482,7 @@ function OfferDetailsFormArray({
   const { append, remove, fields } = fieldArrayValues;
 
   return (
-    <div>
+    <div className="space-y-8">
       {fields.map((item, index) => {
         return (
           <div key={item.id}>
@@ -483,7 +499,7 @@ function OfferDetailsFormArray({
         icon={PlusIcon}
         label="Add another offer"
         size="lg"
-        variant="tertiary"
+        variant="secondary"
         onClick={() =>
           append(
             jobType === JobType.FULLTIME
@@ -524,7 +540,7 @@ export default function OfferDetailsForm({
     jobType === JobType.FULLTIME ? JobTypeLabel.INTERN : JobTypeLabel.FULLTIME;
 
   return (
-    <div className="mb-5">
+    <div className="space-y-6">
       <h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
         Fill in your offer details
       </h5>

packages/ui/src/HorizontalDivider/HorizontalDivider.tsx

@@ -8,7 +8,7 @@ export default function HorizontalDivider({ className }: Props) {
   return (
     <hr
       aria-hidden={true}
-      className={clsx('my-2 h-0 border-t border-slate-100', className)}
+      className={clsx('my-2 h-0 border-t border-slate-200', className)}
     />
   );
 }