msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[resume][refactor] tweak resume submission UI

Browse Source
pull/511/head
Yangshun Tay 2 years ago
parent 80fd274662
commit b161df0b70
3 changed files with 217 additions and 213 deletions
Show Stats Download Patch File Download Diff File

29
apps/portal/src/components/resumes/submit-form/ResumeSubmissionGuidelines.tsx
Unescape View File

@ -0,0 +1,29 @@
export default function ResumeSubmissionGuidelines() {
return (
<div className="rounded-lg border border-slate-200 bg-slate-50 p-5">
<div className="prose text-sm">
<h2 className="mt-0 text-xl font-medium">Submission Guidelines</h2>
<p>
Before submitting your resume for review, please review and
acknowledge our{' '}
<span className="font-medium">submission guidelines</span> stated
below.
</p>
<ul>
<li>
Ensure that you do not divulge any of your{' '}
<span className="font-medium">personal particulars</span>.
</li>
<li>
Ensure that you do not divulge any{' '}
<span className="font-medium">
company's proprietary and confidential information
</span>
.
</li>
<li>Proofread your resumes for grammatical/spelling errors.</li>
</ul>
</div>
</div>
);
}

29
apps/portal/src/components/resumes/submit-form/SubmissionGuidelines.tsx
Unescape View File

@ -1,29 +0,0 @@
export default function SubmissionGuidelines() {
return (
<div className="text-left text-sm text-slate-700">
<h2 className="mb-2 text-xl font-medium">Submission Guidelines</h2>
<p>
Before you submit, please review and acknowledge our
<span className="font-bold"> submission guidelines </span>
stated below.
</p>
<p>
<span className="text-lg font-bold">• </span>
Ensure that you do not divulge any of your{' '}
<span className="font-bold">personal particulars</span>.
</p>
<p>
<span className="text-lg font-bold">• </span>
Ensure that you do not divulge any{' '}
<span className="font-bold">
company's proprietary and confidential information
</span>
.
</p>
<p>
<span className="text-lg font-bold">• </span>
Proof-read your resumes to look for grammatical/spelling errors.
</p>
</div>
);
}

26
apps/portal/src/pages/resumes/submit.tsx
Unescape View File

@ -20,7 +20,8 @@ import {
} from '@tih/ui'; } from '@tih/ui';
import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
import SubmissionGuidelines from '~/components/resumes/submit-form/SubmissionGuidelines'; import ResumeSubmissionGuidelines from '~/components/resumes/submit-form/ResumeSubmissionGuidelines';
import Container from '~/components/shared/Container';
import loginPageHref from '~/components/shared/loginPageHref'; import loginPageHref from '~/components/shared/loginPageHref';
import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys'; import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
@ -239,10 +240,10 @@ export default function SubmitResumeForm({
<Head> <Head>
<title>Upload a Resume</title> <title>Upload a Resume</title>
</Head> </Head>
<Container variant="xs">
{status === 'loading' && ( {status === 'loading' && (
<div className="w-full pt-4"> <div className="w-full pt-4">
{' '} <Spinner display="block" size="lg" />
<Spinner display="block" size="lg" />{' '}
</div> </div>
)} )}
{status === 'authenticated' && ( {status === 'authenticated' && (
@ -278,9 +279,9 @@ export default function SubmitResumeForm({
Note that your current input will not be saved! Note that your current input will not be saved!
</Dialog> </Dialog>
<form <form
className="mt-8 w-full max-w-screen-lg space-y-6 self-center rounded-lg bg-white p-10 shadow-lg" className="w-full space-y-6 self-center bg-white p-10 md:my-8 md:rounded-lg md:shadow-lg"
onSubmit={handleSubmit(onSubmit)}> onSubmit={handleSubmit(onSubmit)}>
<h1 className="mb-4 text-center text-2xl font-semibold"> <h1 className="mb-8 text-2xl font-bold text-slate-900 sm:text-center sm:text-4xl">
{isNewForm ? 'Upload a resume' : 'Update details'} {isNewForm ? 'Upload a resume' : 'Update details'}
</h1> </h1>
{/* Title Section */} {/* Title Section */}
@ -344,7 +345,7 @@ export default function SubmitResumeForm({
fileUploadError fileUploadError
? 'border-danger-600' ? 'border-danger-600'
: 'border-slate-300', : 'border-slate-300',
'cursor-pointer flex-col items-center space-y-1 rounded-md border-2 border-dashed bg-slate-100 py-4 px-4 text-center', 'cursor-pointer flex-col items-center space-y-1 rounded-md border-2 border-dashed bg-slate-50 py-4 px-4 text-center',
)}> )}>
<input <input
{...register('file', { required: true })} {...register('file', { required: true })}
@ -379,7 +380,9 @@ export default function SubmitResumeForm({
</p> </p>
</div> </div>
{fileUploadError && ( {fileUploadError && (
<p className="text-danger-600 text-sm">{fileUploadError}</p> <p className="text-danger-600 text-sm">
{fileUploadError}
</p>
)} )}
</div> </div>
)} )}
@ -394,8 +397,8 @@ export default function SubmitResumeForm({
/> />
{/* Submission Guidelines */} {/* Submission Guidelines */}
{isNewForm && ( {isNewForm && (
<> <div className="space-y-4">
<SubmissionGuidelines /> <ResumeSubmissionGuidelines />
<CheckboxInput <CheckboxInput
{...register('isChecked', { required: true })} {...register('isChecked', { required: true })}
disabled={isLoading} disabled={isLoading}
@ -404,7 +407,7 @@ export default function SubmitResumeForm({
? 'Please tick the checkbox after reading through the guidelines.' ? 'Please tick the checkbox after reading through the guidelines.'
: undefined : undefined
} }
label="I have read and will follow the guidelines stated." label="I have read and followed the above guidelines."
onChange={(val) => { onChange={(val) => {
if (val) { if (val) {
clearErrors('isChecked'); clearErrors('isChecked');
@ -412,7 +415,7 @@ export default function SubmitResumeForm({
setValue('isChecked', val); setValue('isChecked', val);
}} }}
/> />
</> </div>
)} )}
{/* Clear and Submit Buttons */} {/* Clear and Submit Buttons */}
<div className="flex justify-end gap-4"> <div className="flex justify-end gap-4">
@ -436,6 +439,7 @@ export default function SubmitResumeForm({
</section> </section>
</main> </main>
)} )}
</Container>
</> </>
); );
} }

Write Preview
Loading…
Cancel
Save