From f123ffa7e2fd052b40a8b8639a0c6629618d55db Mon Sep 17 00:00:00 2001
From: Terence <45381509+Vielheim@users.noreply.github.com>
Date: Fri, 21 Oct 2022 17:56:35 +0800
Subject: [PATCH] [resumes][refactor] Comment UI touchup (#405)

* [resumes][refactor] add vertical line to replies

* [resumes][refactor] sort replies ascending

Co-authored-by: Terence Ho <>
---
 .../comments/ResumeCommentListItem.tsx        | 29 ++++++++++++-------
 .../comment/ResumeCommentVoteButtons.tsx      |  4 ++-
 .../router/resumes/resumes-comments-router.ts |  2 +-
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
index abf00a62..5561a49e 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
@@ -144,16 +144,25 @@ export default function ResumeCommentListItem({
                 <span>{showReplies ? 'Hide replies' : 'Show replies'}</span>
               </button>
 
-              {showReplies &&
-                comment.children.map((child) => {
-                  return (
-                    <ResumeCommentListItem
-                      key={child.id}
-                      comment={child}
-                      userId={userId}
-                    />
-                  );
-                })}
+              {showReplies && (
+                <div className="flex flex-row">
+                  <div className="relative flex flex-col px-2 py-2">
+                    <div className="flex-grow border-r border-gray-300" />
+                  </div>
+
+                  <div className="flex flex-col space-y-1">
+                    {comment.children.map((child) => {
+                      return (
+                        <ResumeCommentListItem
+                          key={child.id}
+                          comment={child}
+                          userId={userId}
+                        />
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
             </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 ac633e92..e17e2546 100644
--- a/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
+++ b/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
@@ -97,7 +97,9 @@ export default function ResumeCommentVoteButtons({
         />
       </button>
 
-      <div className="text-xs">{commentVotesQuery.data?.numVotes ?? 0}</div>
+      <div className="flex min-w-[1rem] justify-center text-xs">
+        {commentVotesQuery.data?.numVotes ?? 0}
+      </div>
 
       <button
         disabled={
diff --git a/apps/portal/src/server/router/resumes/resumes-comments-router.ts b/apps/portal/src/server/router/resumes/resumes-comments-router.ts
index d6d12177..548b4a06 100644
--- a/apps/portal/src/server/router/resumes/resumes-comments-router.ts
+++ b/apps/portal/src/server/router/resumes/resumes-comments-router.ts
@@ -25,7 +25,7 @@ export const resumeCommentsRouter = createRouter().query('list', {
             },
           },
           orderBy: {
-            createdAt: 'desc',
+            createdAt: 'asc',
           },
         },
         user: {