[resumes][feat] remove resume title, clean up submit form (#415)

* [resumes][refactor] clean up submit form

* [resumes][feat] remove resume title

* [resumes][feat] remove resume title

apps/portal/src/components/resumes/ResumeReviewsTitle.tsx

@@ -1,13 +0,0 @@
-import { Badge } from '@tih/ui';
-
-export default function ResumeReviewsTitle() {
-  return (
-    <div>
-      <h1 className="mb-1 text-2xl font-bold">Resume Reviews</h1>
-      <Badge
-        label="Check out reviewed resumes or look for resumes to review"
-        variant="info"
-      />
-    </div>
-  );
-}

apps/portal/src/components/resumes/browse/ResumeListItem.tsx

@@ -65,7 +65,7 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
           </div>
           <div className="mt-2 text-slate-400">{resumeInfo.location}</div>
         </div>
-        <ChevronRightIcon className="col-span-1 w-8 self-center justify-self-center" />
+        <ChevronRightIcon className="col-span-1 w-8 self-center justify-self-center text-slate-400" />
       </div>
     </Link>
   );

apps/portal/src/components/resumes/submit-form/SubmissionGuidelines.tsx

@@ -1,22 +1,21 @@
 export default function SubmissionGuidelines() {
   return (
-    <div className="mb-4 text-left text-sm text-slate-700">
+    <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 acknolwedge our
+        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
+        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
+        Ensure that you do not divulge any{' '}
         <span className="font-bold">
-          {' '}
           company's proprietary and confidential information
         </span>
         .

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

@@ -4,10 +4,10 @@ import { useSession } from 'next-auth/react';
 import { Fragment, useEffect, useState } from 'react';
 import { Dialog, Disclosure, Transition } from '@headlessui/react';
 import { FunnelIcon, MinusIcon, PlusIcon } from '@heroicons/react/20/solid';
-import { XMarkIcon } from '@heroicons/react/24/outline';
 import {
   MagnifyingGlassIcon,
   NewspaperIcon,
+  XMarkIcon,
 } from '@heroicons/react/24/outline';
 import {
   CheckboxInput,
@@ -36,7 +36,6 @@ import {
   SORT_OPTIONS,
 } from '~/components/resumes/browse/resumeFilters';
 import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
-import ResumeReviewsTitle from '~/components/resumes/ResumeReviewsTitle';
 import ResumeSignInButton from '~/components/resumes/shared/ResumeSignInButton';
 
 import useDebounceValue from '~/utils/resumes/useDebounceValue';
@@ -369,12 +368,8 @@ export default function ResumeHomePage() {
         </Transition.Root>
       </div>
 
-      <main className="h-[calc(100vh-4rem)] flex-1 overflow-y-scroll">
+      <main className="h-[calc(100vh-4rem)] flex-auto overflow-y-scroll px-8 pt-6 pb-4">
-        <div className="ml-8 py-4">
+        <div className="flex justify-start">
-          <ResumeReviewsTitle />
-        </div>
-
-        <div className="mx-8 mt-4 flex justify-start">
           <div className="hidden w-1/6 pt-2 lg:block">
             <h3 className="text-md font-medium tracking-tight text-gray-900">
               Shortcuts
@@ -535,14 +530,12 @@ export default function ResumeHomePage() {
                 </div>
               </div>
             </div>
-            <div className="mb-6">
             {isFetchingResumes ? (
               <div className="w-full pt-4">
                 {' '}
                 <Spinner display="block" size="lg" />{' '}
               </div>
-              ) : sessionData === null &&
+            ) : sessionData === null && tabsValue !== BROWSE_TABS_VALUES.ALL ? (
-                tabsValue !== BROWSE_TABS_VALUES.ALL ? (
               <ResumeSignInButton
                 className="mt-8"
                 text={getLoggedOutText(tabsValue)}
@@ -560,7 +553,7 @@ export default function ResumeHomePage() {
               <>
                 <ResumeListItems resumes={getTabResumes()} />
                 {getTabTotalPages() > 1 && (
-                    <div className="my-4 flex justify-center">
+                  <div className="mt-4 flex justify-center">
                     <Pagination
                       current={currentPage}
                       end={getTabTotalPages()}
@@ -574,7 +567,6 @@ export default function ResumeHomePage() {
             )}
           </div>
         </div>
-        </div>
       </main>
     </>
   );

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

@@ -46,6 +46,8 @@ type IFormInput = {
   title: string;
 };
 
+type InputKeys = keyof IFormInput;
+
 type InitFormDetails = {
   additionalInfo?: string;
   experience: string;
@@ -218,6 +220,10 @@ export default function SubmitResumeForm({
     }
   }, [errors?.file, invalidFileUploadError]);
 
+  const onValueChange = (section: InputKeys, value: string) => {
+    setValue(section, value.trim(), { shouldTouch: false });
+  };
+
   return (
     <>
       <Head>
@@ -269,7 +275,7 @@ export default function SubmitResumeForm({
               required={true}
               onChange={(val) => setValue('title', val)}
             />
-            <div className="flex gap-12">
+            <div className="flex gap-8">
               <Select
                 {...register('role', { required: true })}
                 defaultValue={undefined}
@@ -301,7 +307,7 @@ export default function SubmitResumeForm({
             />
             {/* Upload resume form */}
             {isNewForm && (
-              <>
+              <div className="space-y-2">
                 <p className="text-sm font-medium text-slate-700">
                   Upload resume (PDF format)
                   <span aria-hidden="true" className="text-danger-500">
@@ -309,12 +315,11 @@ export default function SubmitResumeForm({
                     *
                   </span>
                 </p>
-                <div className="mb-4">
                 <div
                   {...getRootProps()}
                   className={clsx(
                     fileUploadError ? 'border-danger-600' : 'border-gray-300',
-                      'mt-2 flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-gray-100 px-6 pt-5 pb-6',
+                    'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-gray-100 py-4',
                   )}>
                   <div className="space-y-1 text-center">
                     {resumeFile == null ? (
@@ -330,14 +335,10 @@ export default function SubmitResumeForm({
                       <label
                         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 className="mt-2 font-medium">
+                        <span className="font-medium">Drop file here</span>
-                            Drop file here
-                          </span>
                         <span className="mr-1 ml-1 font-light">or</span>
                         <span className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-400">
-                            {resumeFile == null
+                          {resumeFile == null ? 'Select file' : 'Replace file'}
-                              ? 'Select file'
-                              : 'Replace file'}
                         </span>
                         <input
                           {...register('file', { required: true })}
@@ -360,15 +361,14 @@ export default function SubmitResumeForm({
                   <p className="text-danger-600 text-sm">{fileUploadError}</p>
                 )}
               </div>
-              </>
             )}
             {/*  Additional Info Section */}
             <TextArea
-              {...register('additionalInfo')}
+              {...(register('additionalInfo'), {})}
               disabled={isLoading}
               label="Additional Information"
               placeholder={ADDITIONAL_INFO_PLACEHOLDER}
-              onChange={(val) => setValue('additionalInfo', val)}
+              onChange={(val) => onValueChange('additionalInfo', val)}
             />
             {/*  Submission Guidelines */}
             {isNewForm && (