[resumes][feat] add required fields and update UI

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

@@ -283,7 +283,10 @@ export default function ResumeHomePage() {
                 <ul role="list">
                   {resumes.map((resumeObj) => (
                     <li key={resumeObj.id}>
-                      <BrowseListItem href="#" resumeInfo={resumeObj} />
+                      <BrowseListItem
+                        href={`resumes/${resumeObj.id}`}
+                        resumeInfo={resumeObj}
+                      />
                     </li>
                   ))}
                 </ul>

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

@@ -1,10 +1,11 @@
+import clsx from 'clsx';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useMemo, useState } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { PaperClipIcon } from '@heroicons/react/24/outline';
-import { Button, Select, TextInput } from '@tih/ui';
+import { Button, Select, TextArea, TextInput } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
@@ -13,7 +14,7 @@ const TITLE_PLACEHOLDER =
 const ADDITIONAL_INFO_PLACEHOLDER = `e.g. I’m applying for company XYZ. I have been resume-rejected by N companies that I have applied for. Please help me to review so company XYZ gives me an interview!`;
 const FILE_UPLOAD_ERROR = 'Please upload a PDF file that is less than 10MB.';
 
-const MAX_FILE_SIZE_LIMIT = 10485760;
+const MAX_FILE_SIZE_LIMIT = 10000000;
 
 type IFormInput = {
   additionalInfo?: string;
@@ -139,6 +140,7 @@ export default function SubmitResumeForm() {
                   errorMessage={errors?.title && 'Title cannot be empty!'}
                   label="Title"
                   placeholder={TITLE_PLACEHOLDER}
+                  required={true}
                   onChange={(val) => setValue('title', val)}
                 />
               </div>
@@ -147,6 +149,7 @@ export default function SubmitResumeForm() {
                   {...register('role', { required: true })}
                   label="Role"
                   options={roleItems}
+                  required={true}
                   onChange={(val) => setValue('role', val)}
                 />
               </div>
@@ -155,6 +158,7 @@ export default function SubmitResumeForm() {
                   {...register('experience', { required: true })}
                   label="Experience Level"
                   options={experienceItems}
+                  required={true}
                   onChange={(val) => setValue('experience', val)}
                 />
               </div>
@@ -164,26 +168,38 @@ export default function SubmitResumeForm() {
                   label="Location"
                   name="location"
                   options={locationItems}
+                  required={true}
                   onChange={(val) => setValue('location', val)}
                 />
               </div>
               <p className="text-sm font-medium text-slate-700">
                 Upload resume (PDF format)
+                <span aria-hidden="true" className="text-danger-500">
+                  {' '}
+                  *
+                </span>
               </p>
               <div className="mb-4">
-                <div className="mt-2 flex justify-center rounded-md border-2 border-dashed border-gray-300 px-6 pt-5 pb-6">
+                <div
+                  className={clsx(
+                    fileUploadError ? 'border-danger-600' : 'border-gray-300',
+                    'mt-2 flex justify-center rounded-md border-2 border-dashed  px-6 pt-5 pb-6',
+                  )}>
                   <div className="space-y-1 text-center">
                     <div className="flex gap-2">
                       <PaperClipIcon className="m-auto h-8 w-8 text-gray-600" />
                       {resumeFile && <p>{resumeFile.name}</p>}
                     </div>
-                    <div className="flex text-sm text-gray-600">
+                    <div className="flex justify-center text-sm">
                       <label
-                        className="relative cursor-pointer rounded-md bg-white font-medium text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:text-indigo-500"
+                        className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
                         htmlFor="file-upload">
-                        <span>Upload a file</span>
+                        <p className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-500">
+                          Upload a file
+                        </p>
                         <input
                           {...register('file', { required: true })}
+                          accept="application/pdf"
                           className="sr-only"
                           id="file-upload"
                           name="file-upload"
@@ -191,7 +207,6 @@ export default function SubmitResumeForm() {
                           onChange={onUploadFile}
                         />
                       </label>
-                      <p className="pl-1">or drag and drop</p>
                     </div>
                     <p className="text-xs text-gray-500">PDF up to 10MB</p>
                   </div>
@@ -201,8 +216,7 @@ export default function SubmitResumeForm() {
                 )}
               </div>
               <div className="mb-4">
-                {/* TODO: Use TextInputArea instead */}
+                <TextArea
-                <TextInput
                   {...register('additionalInfo')}
                   label="Additional Information"
                   placeholder={ADDITIONAL_INFO_PLACEHOLDER}