From de28a300287f829cb0fb10922c3f50cf14fd78b9 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Tue, 25 Oct 2022 09:40:58 +0800
Subject: [PATCH] [resumes][feat] shift badge to bottom

---
 .../resumes/badges/ResumeUserBadge.tsx        | 10 ++--
 .../resumes/comments/ResumeCommentsList.tsx   | 56 +++++++++----------
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
index 5f45adbb..2fcbf21f 100644
--- a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
+++ b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
@@ -14,15 +14,15 @@ export default function ResumeUserBadge({
   return (
     <div className="group relative flex items-center justify-center">
       <div
-        className="h-34 absolute left-6 z-10 hidden w-48 flex-col justify-center
+        className="absolute top-7 z-10 hidden h-36 w-48 flex-col justify-center
         gap-1 rounded-xl bg-white pb-2 text-center drop-shadow-lg
 
-        before:absolute before:top-14 before:-translate-x-4
-        before:border-8 before:border-y-transparent before:border-l-transparent
-        before:border-r-white before:drop-shadow-lg before:content-['']
+        after:absolute after:left-1/2 after:top-[-11%] after:-translate-x-1/2
+        after:border-8 after:border-x-transparent after:border-t-transparent
+        after:border-b-slate-200 after:drop-shadow-sm after:content-['']
         group-hover:flex">
         <Icon className="h-16 w-full self-center rounded-t-xl bg-slate-200 py-2" />
-        <div className="px-2">
+        <div className="flex h-20 flex-col justify-evenly px-2">
           <p className="font-medium">{title}</p>
           <p className="text-sm">{description}.</p>
         </div>
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
index b7cf69af..2f31d874 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
@@ -55,7 +55,7 @@ export default function ResumeCommentsList({
           <Spinner display="block" size="lg" />
         </div>
       ) : (
-        <div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-4 overflow-y-auto overflow-x-hidden">
+        <div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-4 overflow-y-auto overflow-x-hidden pb-16">
           {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
             const comments = commentsQuery.data
               ? commentsQuery.data.filter((comment: ResumeComment) => {
@@ -65,44 +65,40 @@ export default function ResumeCommentsList({
             const commentCount = comments.length;
 
             return (
-              <div key={value} className="mb-4 space-y-4">
-                <div className="text-primary-800 flex flex-row items-center space-x-2">
+              <div key={value} className="space-y-6 pr-4">
+                <div className="text-primary-800 -mb-2 flex flex-row items-center space-x-2">
                   {renderIcon(value)}
 
                   <div className="w-fit text-lg font-medium">{label}</div>
                 </div>
 
-                <div className="w-full space-y-4 pr-4">
-                  <div
-                    className={clsx(
-                      'space-y-2 rounded-md border-2 bg-white px-4 py-3 drop-shadow-md',
-                      commentCount ? 'border-slate-300' : 'border-slate-300',
-                    )}>
-                    {commentCount > 0 ? (
-                      comments.map((comment) => {
-                        return (
-                          <ResumeCommentListItem
-                            key={comment.id}
-                            comment={comment}
-                            userId={sessionData?.user?.id}
-                          />
-                        );
-                      })
-                    ) : (
-                      <div className="flex flex-row items-center text-sm">
-                        <ChatBubbleLeftRightIcon className="mr-2 h-6 w-6 text-slate-500" />
+                <div
+                  className={clsx(
+                    'space-y-2 rounded-md border-2 bg-white px-4 py-3 drop-shadow-md',
+                    commentCount ? 'border-slate-300' : 'border-slate-300',
+                  )}>
+                  {commentCount > 0 ? (
+                    comments.map((comment) => {
+                      return (
+                        <ResumeCommentListItem
+                          key={comment.id}
+                          comment={comment}
+                          userId={sessionData?.user?.id}
+                        />
+                      );
+                    })
+                  ) : (
+                    <div className="flex flex-row items-center text-sm">
+                      <ChatBubbleLeftRightIcon className="mr-2 h-6 w-6 text-slate-500" />
 
-                        <div className="text-slate-500">
-                          There are no comments for this section yet!
-                        </div>
+                      <div className="text-slate-500">
+                        There are no comments for this section yet!
                       </div>
-                    )}
-                  </div>
+                    </div>
+                  )}
                 </div>
 
-                <div className="relative flex flex-row pr-6 pt-2">
-                  <div className="flex-grow border-t border-gray-300" />
-                </div>
+                <hr className="border-gray-300" />
               </div>
             );
           })}