From 7029f17be14a54281be20453537c8cf4d7b6c255 Mon Sep 17 00:00:00 2001
From: Terence Ho <>
Date: Sun, 23 Oct 2022 21:53:21 +0800
Subject: [PATCH] [resumes][refactor] update comments ui

---
 .../comments/ResumeCommentListItem.tsx        | 37 +++++++++--------
 .../resumes/comments/ResumeCommentsList.tsx   | 41 +++++++++++++------
 .../comment/ResumeCommentVoteButtons.tsx      |  2 +-
 3 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
index dd44d4b4..98384595 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { formatDistanceToNow } from 'date-fns';
 import { useState } from 'react';
 import { ChevronUpIcon } from '@heroicons/react/20/solid';
 import { FaceSmileIcon } from '@heroicons/react/24/outline';
@@ -26,12 +27,7 @@ export default function ResumeCommentListItem({
   const [showReplies, setShowReplies] = useState(true);
 
   return (
-    <div
-      className={clsx(
-        'min-w-fit rounded-md bg-white ',
-        !comment.parentId &&
-          'border-primary-300 w-11/12 border-2 p-2 drop-shadow-md',
-      )}>
+    <div className="min-w-fit">
       <div className="flex flex-row space-x-2 p-1 align-top">
         {/* Image Icon */}
         {comment.user.image ? (
@@ -58,7 +54,7 @@ export default function ResumeCommentListItem({
             <div className="flex flex-row items-center space-x-1">
               <p
                 className={clsx(
-                  'font-medium text-black',
+                  'font-medium text-gray-800',
                   !!comment.parentId && 'text-sm',
                 )}>
                 {comment.user.name ?? 'Reviewer ABC'}
@@ -72,9 +68,8 @@ export default function ResumeCommentListItem({
             </div>
 
             <div className="px-2 text-xs text-slate-600">
-              {comment.createdAt.toLocaleString('en-US', {
-                dateStyle: 'medium',
-                timeStyle: 'short',
+              {formatDistanceToNow(comment.createdAt, {
+                addSuffix: true,
               })}
             </div>
           </div>
@@ -86,10 +81,12 @@ export default function ResumeCommentListItem({
               setIsEditingComment={setIsEditingComment}
             />
           ) : (
-            <ResumeExpandableText
-              key={comment.description}
-              text={comment.description}
-            />
+            <div className="text-gray-800">
+              <ResumeExpandableText
+                key={comment.description}
+                text={comment.description}
+              />
+            </div>
           )}
 
           {/* Upvote and edit */}
@@ -143,7 +140,15 @@ export default function ResumeCommentListItem({
                     !showReplies && 'rotate-180 transform',
                   )}
                 />
-                <span>{showReplies ? 'Hide replies' : 'Show replies'}</span>
+                <span>
+                  {showReplies
+                    ? `Hide ${
+                        comment.children.length === 1 ? 'reply' : 'replies'
+                      }`
+                    : `Show ${comment.children.length} ${
+                        comment.children.length === 1 ? 'reply' : 'replies'
+                      }`}
+                </span>
               </button>
 
               {showReplies && (
@@ -152,7 +157,7 @@ export default function ResumeCommentListItem({
                     <div className="flex-grow border-r border-slate-300" />
                   </div>
 
-                  <div className="flex flex-col space-y-1">
+                  <div className="flex flex-1 flex-col space-y-1">
                     {comment.children.map((child) => {
                       return (
                         <ResumeCommentListItem
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
index b0435cda..a9aeb8ab 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
@@ -2,6 +2,7 @@ import { useSession } from 'next-auth/react';
 import {
   BookOpenIcon,
   BriefcaseIcon,
+  ChatBubbleLeftRightIcon,
   CodeBracketSquareIcon,
   FaceSmileIcon,
   IdentificationIcon,
@@ -91,19 +92,33 @@ export default function ResumeCommentsList({
                   <div className="w-fit text-lg font-medium">{label}</div>
                 </div>
 
-                {commentCount > 0 ? (
-                  comments.map((comment) => {
-                    return (
-                      <ResumeCommentListItem
-                        key={comment.id}
-                        comment={comment}
-                        userId={sessionData?.user?.id}
-                      />
-                    );
-                  })
-                ) : (
-                  <div>There are no comments for this section yet!</div>
-                )}
+                <div className="w-11/12 space-y-4">
+                  <div className=" space-y-2 rounded-md border-2 border-indigo-300 bg-white px-4 py-3 drop-shadow-md">
+                    {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-indigo-400" />
+
+                        <div className="text-gray-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>
               </div>
             );
           })}
diff --git a/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx b/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
index d29ebd18..4faf1397 100644
--- a/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
+++ b/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
@@ -97,7 +97,7 @@ export default function ResumeCommentVoteButtons({
         />
       </button>
 
-      <div className="flex min-w-[1rem] justify-center text-xs">
+      <div className="flex min-w-[1rem] justify-center text-xs font-semibold text-gray-700">
         {commentVotesQuery.data?.numVotes ?? 0}
       </div>