Skip to content

Commit 7bd6b0e

Browse files
keanecjykeanecjy
authored
[resumes][feat] update submit form to be more compact (yangshun#414)
1 parent 77d0714 commit 7bd6b0e

File tree

4 files changed

+155
-147
lines changed

4 files changed

+155
-147
lines changed

‎apps/portal/src/components/resumes/browse/resumeFilters.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const SORT_OPTIONS: Record<string, string> = {
6060
topComments: 'Most Comments',
6161
};
6262

63-
export const ROLE: Array<FilterOption<RoleFilter>> = [
63+
export const ROLES: Array<FilterOption<RoleFilter>> = [
6464
{
6565
label: 'Full-Stack Engineer',
6666
value: 'Full-Stack Engineer',
@@ -72,7 +72,7 @@ export const ROLE: Array<FilterOption<RoleFilter>> = [
7272
{ label: 'Android Engineer', value: 'Android Engineer' },
7373
];
7474

75-
export const EXPERIENCE: Array<FilterOption<ExperienceFilter>> = [
75+
export const EXPERIENCES: Array<FilterOption<ExperienceFilter>> = [
7676
{ label: 'Freshman', value: 'Freshman' },
7777
{ label: 'Sophomore', value: 'Sophomore' },
7878
{ label: 'Junior', value: 'Junior' },
@@ -91,16 +91,16 @@ export const EXPERIENCE: Array<FilterOption<ExperienceFilter>> = [
9191
},
9292
];
9393

94-
export const LOCATION: Array<FilterOption<LocationFilter>> = [
94+
export const LOCATIONS: Array<FilterOption<LocationFilter>> = [
9595
{ label: 'Singapore', value: 'Singapore' },
9696
{ label: 'United States', value: 'United States' },
9797
{ label: 'India', value: 'India' },
9898
];
9999

100100
export const INITIAL_FILTER_STATE: FilterState = {
101-
experience: Object.values(EXPERIENCE).map(({ value }) => value),
102-
location: Object.values(LOCATION).map(({ value }) => value),
103-
role: Object.values(ROLE).map(({ value }) => value),
101+
experience: Object.values(EXPERIENCES).map(({ value }) => value),
102+
location: Object.values(LOCATIONS).map(({ value }) => value),
103+
role: Object.values(ROLES).map(({ value }) => value),
104104
};
105105

106106
export const SHORTCUTS: Array<Shortcut> = [

‎apps/portal/src/pages/resumes/browse.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ import type {
2727
} from '~/components/resumes/browse/resumeFilters';
2828
import {
2929
BROWSE_TABS_VALUES,
30-
EXPERIENCE,
30+
EXPERIENCES,
3131
INITIAL_FILTER_STATE,
3232
isInitialFilterState,
33-
LOCATION,
34-
ROLE,
33+
LOCATIONS,
34+
ROLES,
3535
SHORTCUTS,
3636
SORT_OPTIONS,
3737
} from '~/components/resumes/browse/resumeFilters';
@@ -51,17 +51,17 @@ const filters: Array<Filter> = [
5151
{
5252
id: 'role',
5353
label: 'Role',
54-
options: ROLE,
54+
options: ROLES,
5555
},
5656
{
5757
id: 'experience',
5858
label: 'Experience',
59-
options: EXPERIENCE,
59+
options: EXPERIENCES,
6060
},
6161
{
6262
id: 'location',
6363
label: 'Location',
64-
options: LOCATION,
64+
options: LOCATIONS,
6565
},
6666
];
6767

‎apps/portal/src/pages/resumes/submit.tsx

+142-134
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,10 @@ import {
1818
TextInput,
1919
} from '@tih/ui';
2020

21-
import type { Filter } from '~/components/resumes/browse/resumeFilters';
2221
import {
23-
EXPERIENCE,
24-
LOCATION,
25-
ROLE,
22+
EXPERIENCES,
23+
LOCATIONS,
24+
ROLES,
2625
} from '~/components/resumes/browse/resumeFilters';
2726
import SubmissionGuidelines from '~/components/resumes/submit-form/SubmissionGuidelines';
2827

@@ -47,12 +46,6 @@ type IFormInput = {
4746
title: string;
4847
};
4948

50-
const selectors: Array<Filter> = [
51-
{ id: 'role', label: 'Role', options: ROLE },
52-
{ id: 'experience', label: 'Experience Level', options: EXPERIENCE },
53-
{ id: 'location', label: 'Location', options: LOCATION },
54-
];
55-
5649
type InitFormDetails = {
5750
additionalInfo?: string;
5851
experience: string;
@@ -261,138 +254,153 @@ export default function SubmitResumeForm({
261254
onClose={() => setIsDialogShown(false)}>
262255
Note that your current input will not be saved!
263256
</Dialog>
264-
<div className="mx-20 space-y-4 py-8">
265-
<form onSubmit={handleSubmit(onSubmit)}>
266-
<h1 className="mb-4 text-2xl font-bold">Upload a resume</h1>
267-
{/* Title Section */}
268-
<div className="mb-4">
269-
<TextInput
270-
{...register('title', { required: true })}
271-
disabled={isLoading}
272-
label="Title"
273-
placeholder={TITLE_PLACEHOLDER}
274-
required={true}
275-
onChange={(val) => setValue('title', val)}
276-
/>
277-
</div>
278-
{/* Selectors */}
279-
{selectors.map((item) => (
280-
<div key={item.id} className="mb-4">
281-
<Select
282-
{...register(item.id, { required: true })}
283-
disabled={isLoading}
284-
label={item.label}
285-
options={item.options}
286-
required={true}
287-
onChange={(val) => setValue(item.id, val)}
288-
/>
289-
</div>
290-
))}
291-
{/* Upload resume form */}
292-
{isNewForm && (
293-
<>
294-
<p className="text-sm font-medium text-slate-700">
295-
Upload resume (PDF format)
296-
<span aria-hidden="true" className="text-danger-500">
297-
{' '}
298-
*
299-
</span>
300-
</p>
301-
<div className="mb-4">
302-
<div
303-
{...getRootProps()}
304-
className={clsx(
305-
fileUploadError
306-
? 'border-danger-600'
307-
: 'border-gray-300',
308-
'mt-2 flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-gray-100 px-6 pt-5 pb-6',
309-
)}>
310-
<div className="space-y-1 text-center">
311-
{resumeFile == null ? (
312-
<ArrowUpCircleIcon className="m-auto h-10 w-10 text-indigo-500" />
313-
) : (
314-
<p
315-
className="cursor-pointer underline underline-offset-1 hover:text-indigo-600"
316-
onClick={onClickDownload}>
317-
{resumeFile.name}
318-
</p>
319-
)}
320-
<div className="flex items-center text-sm">
321-
<label
322-
className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
323-
htmlFor="file-upload">
324-
<span className="mt-2 font-medium">
325-
Drop file here
326-
</span>
327-
<span className="mr-1 ml-1 font-light">or</span>
328-
<span className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-400">
329-
{resumeFile == null
330-
? 'Select file'
331-
: 'Replace file'}
332-
</span>
333-
<input
334-
{...register('file', { required: true })}
335-
{...getInputProps()}
336-
accept="application/pdf"
337-
className="sr-only"
338-
disabled={isLoading}
339-
id="file-upload"
340-
name="file-upload"
341-
type="file"
342-
/>
343-
</label>
344-
</div>
345-
<p className="text-xs text-gray-500">
346-
PDF up to {FILE_SIZE_LIMIT_MB}MB
257+
<form
258+
className="mt-8 w-full max-w-screen-lg space-y-6 self-center rounded-lg bg-white p-10 shadow-lg"
259+
onSubmit={handleSubmit(onSubmit)}>
260+
<h1 className="mb-4 text-center text-2xl font-semibold">
261+
{isNewForm ? 'Upload a resume' : 'Update details'}
262+
</h1>
263+
{/* Title Section */}
264+
<TextInput
265+
{...register('title', { required: true })}
266+
disabled={isLoading}
267+
label="Title"
268+
placeholder={TITLE_PLACEHOLDER}
269+
required={true}
270+
onChange={(val) => setValue('title', val)}
271+
/>
272+
<div className="flex gap-12">
273+
<Select
274+
{...register('role', { required: true })}
275+
defaultValue={undefined}
276+
disabled={isLoading}
277+
label="Role"
278+
options={ROLES}
279+
placeholder=" "
280+
required={true}
281+
onChange={(val) => setValue('role', val)}
282+
/>
283+
<Select
284+
{...register('experience', { required: true })}
285+
disabled={isLoading}
286+
label="Experience Level"
287+
options={EXPERIENCES}
288+
placeholder=" "
289+
required={true}
290+
onChange={(val) => setValue('experience', val)}
291+
/>
292+
</div>
293+
<Select
294+
{...register('location', { required: true })}
295+
disabled={isLoading}
296+
label="Location"
297+
options={LOCATIONS}
298+
placeholder=" "
299+
required={true}
300+
onChange={(val) => setValue('location', val)}
301+
/>
302+
{/* Upload resume form */}
303+
{isNewForm && (
304+
<>
305+
<p className="text-sm font-medium text-slate-700">
306+
Upload resume (PDF format)
307+
<span aria-hidden="true" className="text-danger-500">
308+
{' '}
309+
*
310+
</span>
311+
</p>
312+
<div className="mb-4">
313+
<div
314+
{...getRootProps()}
315+
className={clsx(
316+
fileUploadError ? 'border-danger-600' : 'border-gray-300',
317+
'mt-2 flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-gray-100 px-6 pt-5 pb-6',
318+
)}>
319+
<div className="space-y-1 text-center">
320+
{resumeFile == null ? (
321+
<ArrowUpCircleIcon className="m-auto h-10 w-10 text-indigo-500" />
322+
) : (
323+
<p
324+
className="cursor-pointer underline underline-offset-1 hover:text-indigo-600"
325+
onClick={onClickDownload}>
326+
{resumeFile.name}
347327
</p>
328+
)}
329+
<div className="flex items-center text-sm">
330+
<label
331+
className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
332+
htmlFor="file-upload">
333+
<span className="mt-2 font-medium">
334+
Drop file here
335+
</span>
336+
<span className="mr-1 ml-1 font-light">or</span>
337+
<span className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-400">
338+
{resumeFile == null
339+
? 'Select file'
340+
: 'Replace file'}
341+
</span>
342+
<input
343+
{...register('file', { required: true })}
344+
{...getInputProps()}
345+
accept="application/pdf"
346+
className="sr-only"
347+
disabled={isLoading}
348+
id="file-upload"
349+
name="file-upload"
350+
type="file"
351+
/>
352+
</label>
348353
</div>
349-
</div>
350-
{fileUploadError && (
351-
<p className="text-danger-600 text-sm">
352-
{fileUploadError}
354+
<p className="text-xs text-gray-500">
355+
PDF up to {FILE_SIZE_LIMIT_MB}MB
353356
</p>
354-
)}
357+
</div>
355358
</div>
356-
</>
357-
)}
358-
{/* Additional Info Section */}
359-
<div className="mb-8">
360-
<TextArea
361-
{...register('additionalInfo')}
359+
{fileUploadError && (
360+
<p className="text-danger-600 text-sm">{fileUploadError}</p>
361+
)}
362+
</div>
363+
</>
364+
)}
365+
{/* Additional Info Section */}
366+
<TextArea
367+
{...register('additionalInfo')}
368+
disabled={isLoading}
369+
label="Additional Information"
370+
placeholder={ADDITIONAL_INFO_PLACEHOLDER}
371+
onChange={(val) => setValue('additionalInfo', val)}
372+
/>
373+
{/* Submission Guidelines */}
374+
{isNewForm && (
375+
<>
376+
<SubmissionGuidelines />
377+
<CheckboxInput
378+
{...register('isChecked', { required: true })}
362379
disabled={isLoading}
363-
label="Additional Information"
364-
placeholder={ADDITIONAL_INFO_PLACEHOLDER}
365-
onChange={(val) => setValue('additionalInfo', val)}
380+
label="I have read and will follow the guidelines stated."
381+
onChange={(val) => setValue('isChecked', val)}
366382
/>
367-
</div>
368-
{/* Submission Guidelines */}
369-
<SubmissionGuidelines />
370-
<CheckboxInput
371-
{...register('isChecked', { required: true })}
383+
</>
384+
)}
385+
{/* Clear and Submit Buttons */}
386+
<div className="flex justify-end gap-4">
387+
<Button
388+
addonPosition="start"
372389
disabled={isLoading}
373-
label="I have read and will follow the guidelines stated."
374-
onChange={(val) => setValue('isChecked', val)}
390+
label={isNewForm ? 'Clear' : 'Cancel'}
391+
variant="tertiary"
392+
onClick={onClickClear}
375393
/>
376-
{/* Clear and Submit Buttons */}
377-
<div className="mt-4 flex justify-end gap-4">
378-
<Button
379-
addonPosition="start"
380-
disabled={isLoading}
381-
label={isNewForm ? 'Clear' : 'Cancel'}
382-
variant="tertiary"
383-
onClick={onClickClear}
384-
/>
385-
<Button
386-
addonPosition="start"
387-
disabled={isLoading}
388-
isLoading={isLoading}
389-
label="Submit"
390-
type="submit"
391-
variant="primary"
392-
/>
393-
</div>
394-
</form>
395-
</div>
394+
<Button
395+
addonPosition="start"
396+
disabled={isLoading}
397+
isLoading={isLoading}
398+
label="Submit"
399+
type="submit"
400+
variant="primary"
401+
/>
402+
</div>
403+
</form>
396404
</section>
397405
</main>
398406
</>

‎packages/tailwind-config/tailwind.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module.exports = {
1010
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
1111
},
1212
colors: {
13-
primary: colors.purple,
13+
primary: colors.indigo,
1414
danger: colors.rose,
1515
info: colors.sky,
1616
success: colors.emerald,

0 commit comments

Comments
 (0)