Info section UI enhancement (#206)

* changes made: added *pt* to sub headers added rounded borders to sub sections * Changes made added byline highlighting the maximum vector score possible darkened vector score color to highlight it added rounded corners to each section added hover state to buttons changed border-dotted to dashed * removed spaces from className typo * removed whitespace from className class * fixed changes which occured due to formatting issues --------- Co-authored-by: sandip <[email protected]>
srbhr · Oct 25, 2023 · f61a9bf · f61a9bf
1 parent e359e0a
commit f61a9bf
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 28 deletions.
diff --git a/webapp/app/_components/common-words/common-words.tsx b/webapp/app/_components/common-words/common-words.tsx
@@ -22,14 +22,15 @@ const CommonWords = () => {
 
           return (
             <li key={commonWord.jobId}>
-              <article className="flex flex-col gap-2 p-4 border-2 border-dotted border-blue-400 bg-[#f9f2f2]">
+              <article className="flex flex-col rounded-md gap-2 p-4 border-2 border-dashed border-blue-400 bg-[#f9f2f2]">
                 <h3 className="text-lg text-center text-gray-500">
                   Common Words for Job ID:{" "}
                   <span className="px-2 bg-gray-500 text-white rounded-md">
                     {commonWord.jobId}
                   </span>
                 </h3>
                 <div
+                  className="pt-4"
                   dangerouslySetInnerHTML={{ __html: sanitisedHtmlText }}
                 ></div>
               </article>
@@ -41,13 +42,13 @@ const CommonWords = () => {
   }
 
   return (
-    <section className="flex flex-col gap-12 px-32 py-10">
+    <section className="flex flex-col  gap-12 px-32 py-12">
       <h2 className="text-4xl font-normal leading-normal">
         Common Words between Job Descriptions and Resumes Highlighted
       </h2>
       {isBackendProcessing && <p>Processing common words...</p>}
       <ProcessingError />
-      <div className="flex flex-col gap-8 text-black p-8 bg-[#FFF5F5]">
+      <div className="flex flex-col rounded-md gap-8 text-black p-8 bg-[#FFF5F5]">
         {renderCommonWords()}
       </div>
     </section>

diff --git a/webapp/app/_components/job-descriptions/add-jobs/add-jobs.tsx b/webapp/app/_components/job-descriptions/add-jobs/add-jobs.tsx
@@ -71,7 +71,7 @@ const AddJobs = ({ numMaxJobs = 1 }: AddJobsProps) => {
               Job {`#${jobNumber}`} - [{jobDetailType}]
             </label>
             <Button
-              className="inline-block bg-red-600 px-2 py-1 text-white text-xs"
+              className="inline-block bg-red-500 px-3 py-2 text-white text-xs hover:bg-red-700 shadow-lg"
               aria-label={`Remove job ${jobNumber}`}
               onClick={() => removeJobDetail(job.id)}
             >
@@ -96,6 +96,7 @@ const AddJobs = ({ numMaxJobs = 1 }: AddJobsProps) => {
           )}
           {"description" in job && (
             <textarea
+              className="px-3 py-4 rounded-md mt-6"
               required
               name={inputName}
               onChange={handleClearOutdatedResults}
@@ -159,12 +160,12 @@ const AddJobs = ({ numMaxJobs = 1 }: AddJobsProps) => {
           />
         </Button> */}
         <Button
-          className="text-white bg-[#302442] disabled:opacity-50"
+          className="text-white bg-[#302442]  disabled:opacity-50 mt-6 hover:shadow-lg bg-[#2D213F]"
           data-job-detail-type={JOB_DETAIL_TYPE.DESCRIPTION}
           disabled={jobs.length >= numMaxJobs}
           onClick={handleAddJobDetail}
         >
-          Add Job Descripton
+          Add Job Description
           <Image
             className="invert"
             src="/icons/file-description.svg"
@@ -174,9 +175,14 @@ const AddJobs = ({ numMaxJobs = 1 }: AddJobsProps) => {
           />
         </Button>
       </div>
-      <p>** Maximum of {numMaxJobs} job(s) allowed</p>
+      <p className="text-slate-500">
+        ** Maximum of {numMaxJobs} job(s) allowed
+      </p>
       {jobs.length ? (
-        <Button type="submit" className="text-white mt-8 bg-[#4c72f9]">
+        <Button
+          type="submit"
+          className="text-white mt-8 bg-[#4c72f9] hover:bg-[#476AE9] shadow-xl"
+        >
           Continue
         </Button>
       ) : null}

diff --git a/webapp/app/_components/job-descriptions/job-descriptions.tsx b/webapp/app/_components/job-descriptions/job-descriptions.tsx
@@ -9,9 +9,11 @@ const JobDescriptions = () => {
   if (!file) return null;
 
   return (
-    <section className="flex flex-col gap-12 px-32 py-10">
-      <h2 className="text-4xl font-normal leading-normal">Job Descriptions</h2>
-      <div className="flex flex-col gap-4 text-black p-8 bg-[#FFF5F5]">
+    <section className="flex flex-col gap-12 px-32 py-8">
+      <h2 className="text-4xl font-normal leading-normal pt-8">
+        Job Descriptions
+      </h2>
+      <div className="flex flex-col gap-4 text-black rounded-md p-8 bg-[#FFF5F5]">
         <AddJobs numMaxJobs={4} />
       </div>
     </section>

diff --git a/webapp/app/_components/resume/resume-glance/resume-glance.tsx b/webapp/app/_components/resume/resume-glance/resume-glance.tsx
@@ -10,10 +10,10 @@ const ResumeGlance = () => {
 
   return (
     <section className="flex flex-col gap-12 px-32 py-10">
-      <h2 className="text-4xl font-normal leading-normal">
+      <h2 className="text-4xl font-normal leading-normal pt-16">
         Resume at a Glance
       </h2>
-      <div className="flex flex-col gap-4 items-center text-black p-8 bg-[#FFF5F5]">
+      <div className="flex flex-col gap-4 items-center rounded-md text-black p-8 bg-[#FFF5F5]">
         <PDFViewer />
       </div>
     </section>

diff --git a/webapp/app/_components/suggestions/suggestions.tsx b/webapp/app/_components/suggestions/suggestions.tsx
@@ -20,20 +20,20 @@ const Suggestions = () => {
           return (
             <li
               key={suggestions.jobId}
-              className="flex flex-col gap-2 p-4 pl-8 border-2 border-dotted border-blue-400 bg-[#f9f2f2]"
+              className="flex flex-col rounded-md gap-2 p-4 pl-8 border-2 border-dashed border-blue-400 bg-[#f9f2f2]"
             >
-              <h3 className="text-lg text-center text-gray-500">
+              <h3 className="text-lg text-center text-gray-500 pt-4">
                 Suggestions for Job ID:{" "}
                 <span className="px-2 bg-gray-500 text-white rounded-md">
                   {suggestions.jobId}
                 </span>
               </h3>
-              <ul className="flex flex-col gap-3" role="list">
+              <ul className="flex flex-col gap-3 p-2 pt-6" role="list">
                 {suggestions.changes.map((change, index) => {
                   return (
                     <li
                       key={index}
-                      className="border-b-2 border-dotted border-gray-200"
+                      className="border-b-2 border-dotted border-gray-200 pl-4"
                     >
                       <ul
                         className="flex gap-8 justify-between list-disc list-outside-"
@@ -58,11 +58,11 @@ const Suggestions = () => {
   }
 
   return (
-    <section className="flex flex-col gap-12 px-32 py-10">
+    <section className="flex flex-col gap-12 px-32 py-12">
       <h2 className="text-4xl font-normal leading-normal">Suggestions</h2>
       {isBackendProcessing && <p>Processing suggestions...</p>}
       <ProcessingError />
-      <div className="flex flex-col gap-8 text-black p-8 bg-[#FFF5F5]">
+      <div className="flex flex-col rounded-md gap-8 text-black p-8 bg-[#FFF5F5]">
         {renderSuggestions()}
       </div>
     </section>

diff --git a/webapp/app/_components/vector-scores/vector-scores.tsx b/webapp/app/_components/vector-scores/vector-scores.tsx
@@ -28,7 +28,7 @@ const VectorScore = () => {
         {vectorScoresSet.map((vectorScore) => {
           return (
             <li
-              className="flex flex-col gap-2 p-4 border-2 border-dotted border-blue-400 bg-[#f9f2f2]"
+              className="flex flex-col gap-2 p-4 rounded-md border-2 border-dashed border-blue-400 bg-[#f9f2f2]"
               key={vectorScore.jobId}
             >
               <h3 className="text-lg text-center text-gray-500">
@@ -37,7 +37,7 @@ const VectorScore = () => {
                   {vectorScore.jobId}
                 </span>
               </h3>
-              <p className="text-7xl text-center font-bold text-blue-500">
+              <p className="text-7xl pt-4 text-center font-bold text-blue-900">
                 {vectorScore.score}
               </p>
             </li>
@@ -48,18 +48,21 @@ const VectorScore = () => {
   }
 
   return (
-    <section ref={componentRef} className="flex flex-col gap-12 px-32 py-10">
+    <section ref={componentRef} className="flex flex-col gap-12 px-32 py-16">
       <h2 className="text-4xl font-normal leading-normal">
         Vector Similarity Score
       </h2>
       {isBackendProcessing && <p>Processing vector scores...</p>}
       <ProcessingError />
-      <div className="flex flex-col gap-8 text-black p-8 bg-[#FFF5F5]">
-        <p>
-          The Vector Similarity Score is a measure of how similar your resume is
-          to the job description. The higher the score, the more similar your
-          resume is to the job description.
-        </p>
+      <div className="flex flex-col rounded-md gap-8 text-black p-8 bg-[#FFF5F5]">
+        <div>
+          <p>
+            The Vector Similarity Score is a measure of how similar your resume
+            is to the job description. The higher the score, the more similar
+            your resume is to the job description.
+          </p>
+          <p className="text-slate-500 pt-4">**Maximum vector score is 100</p>
+        </div>
         {renderVectorScores()}
       </div>
     </section>