From 64bc8158c12d1d48b96bddb640caab38ca110f8c Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Tue, 1 Nov 2022 11:11:10 +0800
Subject: [PATCH] [offers][fix] tweak submit offer job type selector (#487)

---
 .../src/components/offers/JobTypeTabs.tsx     | 50 +++++++++++++++++++
 .../submissionForm/OfferDetailsForm.tsx       | 43 +++++-----------
 apps/portal/src/pages/offers/index.tsx        |  2 +
 packages/ui/src/Tabs/Tabs.tsx                 |  2 +-
 4 files changed, 66 insertions(+), 31 deletions(-)
 create mode 100644 apps/portal/src/components/offers/JobTypeTabs.tsx

diff --git a/apps/portal/src/components/offers/JobTypeTabs.tsx b/apps/portal/src/components/offers/JobTypeTabs.tsx
new file mode 100644
index 00000000..8ea87bc6
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
index 63abe7d1..34a65829 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
+++ b/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,35 +528,17 @@ 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 className="mx-5 w-1/3">
-          <Button
-            display="block"
-            label={JobTypeLabel.FULLTIME}
-            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>
+        <JobTypeTabs
+          value={jobType}
+          onChange={(newJobType) => {
+            if (newJobType === jobType) {
+              return;
+            }
+
+            setDialogOpen(true);
+          }}
+        />
       </div>
       <OfferDetailsFormArray
         fieldArrayValues={fieldArrayValues}
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index 962feb66..aa235c81 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/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);
diff --git a/packages/ui/src/Tabs/Tabs.tsx b/packages/ui/src/Tabs/Tabs.tsx
index ac34722e..d387424b 100644
--- a/packages/ui/src/Tabs/Tabs.tsx
+++ b/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',
               ),