[offers][fix] tweak submit offer job type selector (#487)

apps/portal/src/components/offers/JobTypeTabs.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+import { JobType } from '@prisma/client';
+
+import { JobTypeLabel } from './types';
+
+type Props = Readonly<{
+  onChange: (jobType: JobType) => void;
+  value: JobType;
+}>;
+
+const tabs = [
+  {
+    label: JobTypeLabel.FULLTIME,
+    value: JobType.FULLTIME,
+  },
+  {
+    label: JobTypeLabel.INTERN,
+    value: JobType.INTERN,
+  },
+];
+
+export default function JobTypeTabs({ value, onChange }: Props) {
+  return (
+    <div className="block">
+      <nav
+        aria-label="Job Types"
+        className="isolate flex divide-x divide-slate-200 rounded-lg border border-slate-200 bg-white">
+        {tabs.map((tab, tabIdx) => (
+          <button
+            key={tab.value}
+            aria-current={tab.value === value ? 'page' : undefined}
+            className={clsx(
+              tab.value === value
+                ? 'bg-primary-100 text-primary-700 hover:bg-primary-200'
+                : 'text-slate-500 hover:bg-slate-50 hover:text-slate-700',
+              tabIdx === 0 && 'rounded-l-lg',
+              tabIdx === tabs.length - 1 && 'rounded-r-lg',
+              'focus:ring-primary-500 group relative min-w-0 flex-1 overflow-hidden py-3 px-4 text-center font-medium focus:z-10',
+            )}
+            type="button"
+            onClick={() => {
+              onChange(tab.value);
+            }}>
+            <span>{tab.label}</span>
+          </button>
+        ))}
+      </nav>
+    </div>
+  );
+}

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

@@ -32,6 +32,7 @@ import FormMonthYearPicker from '../../forms/FormMonthYearPicker';
 import FormSelect from '../../forms/FormSelect';
 import FormTextArea from '../../forms/FormTextArea';
 import FormTextInput from '../../forms/FormTextInput';
+import JobTypeTabs from '../../JobTypeTabs';
 import type { OfferFormData } from '../../types';
 import { JobTypeLabel } from '../../types';
 import {
@@ -103,7 +104,7 @@ function FullTimeOfferDetailsForm({
           })}
         />
       </div>
-      <div className="mb-5 flex grid grid-cols-2 space-x-3">
+      <div className="mb-5 grid grid-cols-2 space-x-3">
         <div>
           <CompaniesTypeahead
             required={true}
@@ -527,36 +528,18 @@ export default function OfferDetailsForm({
       <h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
         Fill in your offer details
       </h5>
-      <div className="flex w-full justify-center">
+      <div>
-        <div className="mx-5 w-1/3">
+        <JobTypeTabs
-          <Button
+          value={jobType}
-            display="block"
+          onChange={(newJobType) => {
-            label={JobTypeLabel.FULLTIME}
+            if (newJobType === jobType) {
-            size="md"
-            variant={jobType === JobType.FULLTIME ? 'secondary' : 'tertiary'}
-            onClick={() => {
-              if (jobType === JobType.FULLTIME) {
-                return;
-              }
-              setDialogOpen(true);
-            }}
-          />
-        </div>
-        <div className="mx-5 w-1/3">
-          <Button
-            display="block"
-            label={JobTypeLabel.INTERN}
-            size="md"
-            variant={jobType === JobType.INTERN ? 'secondary' : 'tertiary'}
-            onClick={() => {
-              if (jobType === JobType.INTERN) {
               return;
             }
+
             setDialogOpen(true);
           }}
         />
       </div>
-      </div>
       <OfferDetailsFormArray
         fieldArrayValues={fieldArrayValues}
         jobType={jobType}

apps/portal/src/pages/offers/index.tsx

@@ -39,6 +39,7 @@ export default function OffersHomePage() {
             <JobTitlesTypeahead
               isLabelHidden={true}
               placeholder="Software Engineer"
+              textSize="inherit"
               onSelect={(option) => {
                 if (option) {
                   setjobTitleFilter(option.value);
@@ -56,6 +57,7 @@ export default function OffersHomePage() {
             <CompaniesTypeahead
               isLabelHidden={true}
               placeholder="All Companies"
+              textSize="inherit"
               onSelect={(option) => {
                 if (option) {
                   setCompanyFilter(option.value);

packages/ui/src/Tabs/Tabs.tsx

@@ -28,7 +28,7 @@ export default function Tabs<T>({ label, tabs, value, onChange }: Props<T>) {
               children: tab.label,
               className: clsx(
                 isSelected
-                  ? 'bg-indigo-100 text-indigo-700'
+                  ? 'bg-primary-100 text-primary-700'
                   : 'hover:bg-slate-100 text-slate-500 hover:text-slate-700',
                 'px-3 py-2 font-medium text-sm rounded-md',
               ),