From 6d3c29e6c48f40efc71e471e1fbf4e8c774e7209 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 5 Nov 2022 16:28:03 +0800
Subject: [PATCH] Revert "[resumes][refactor] tweak resume review page UI"

This reverts commit 29abea1cd95056878735777af04391f46a0f48d3.
---
 .../portal/src/components/global/AppShell.tsx |   2 +-
 .../src/components/resumes/ResumePdf.tsx      |   6 +-
 .../resumes/badges/ResumeUserBadges.tsx       |  24 +-
 .../comments/ResumeCommentListItem.tsx        | 147 ++++----
 .../resumes/comments/ResumeCommentsForm.tsx   |  10 +-
 .../resumes/comments/ResumeCommentsList.tsx   |  29 +-
 .../comment/ResumeCommentReplyForm.tsx        |  58 +--
 .../comment/ResumeCommentVoteButtons.tsx      |  47 +--
 .../resumes/shared/ResumeExpandableText.tsx   |   4 +-
 apps/portal/src/pages/resumes/[resumeId].tsx  | 329 +++++++++---------
 10 files changed, 331 insertions(+), 325 deletions(-)

diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index 1f1979da..b1191d45 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/apps/portal/src/components/global/AppShell.tsx
@@ -194,7 +194,7 @@ export default function AppShell({ children }: Props) {
                 <span className="sr-only">Open sidebar</span>
                 <Bars3BottomLeftIcon aria-hidden="true" className="h-6 w-6" />
               </button>
-              <div className="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
+              <div className="flex flex-1 justify-between px-4 sm:px-6">
                 <div className="flex flex-1 items-center">
                   <ProductNavigation
                     items={currentProductNavigation.navigation}
diff --git a/apps/portal/src/components/resumes/ResumePdf.tsx b/apps/portal/src/components/resumes/ResumePdf.tsx
index 0cada39a..8caf0cb5 100644
--- a/apps/portal/src/components/resumes/ResumePdf.tsx
+++ b/apps/portal/src/components/resumes/ResumePdf.tsx
@@ -36,9 +36,9 @@ export default function ResumePdf({ url }: Props) {
 
   return (
     <div className="w-full" id="pdfView">
-      <div className="group relative bg-slate-100">
+      <div className="group relative">
         <Document
-          className="flex h-[calc(100vh-16rem)] flex-row justify-center overflow-auto py-8"
+          className="flex h-[calc(100vh-16rem)] flex-row justify-center overflow-auto"
           file={url}
           loading={<Spinner display="block" size="lg" />}
           noData=""
@@ -79,7 +79,7 @@ export default function ResumePdf({ url }: Props) {
           </div>
         </Document>
       </div>
-      <div className="flex justify-center border-t border-slate-200 bg-white py-4">
+      <div className="flex justify-center p-4">
         <Pagination
           current={pageNumber}
           end={numPages}
diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx
index 96f464c2..3dfe413b 100644
--- a/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx
+++ b/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx
@@ -39,22 +39,18 @@ export default function ResumeUserBadges({ userId }: Props) {
     topUpvotedCommentCount: userTopUpvotedCommentCountQuery.data ?? 0,
   };
 
-  const badges = RESUME_USER_BADGES.filter((badge) => badge.isValid(payload));
-
-  if (badges.length === 0) {
-    return null;
-  }
-
   return (
     <div className="flex items-center justify-center gap-1">
-      {badges.map((badge) => (
-        <ResumeUserBadge
-          key={badge.id}
-          description={badge.description}
-          icon={badge.icon}
-          title={badge.title}
-        />
-      ))}
+      {RESUME_USER_BADGES.filter((badge) => badge.isValid(payload)).map(
+        (badge) => (
+          <ResumeUserBadge
+            key={badge.id}
+            description={badge.description}
+            icon={badge.icon}
+            title={badge.title}
+          />
+        ),
+      )}
     </div>
   );
 }
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
index 881c4d85..98384595 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
@@ -1,6 +1,7 @@
 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';
 
 import ResumeCommentEditForm from './comment/ResumeCommentEditForm';
@@ -11,10 +12,10 @@ import ResumeExpandableText from '../shared/ResumeExpandableText';
 
 import type { ResumeComment } from '~/types/resume-comments';
 
-type ResumeCommentListItemProps = Readonly<{
+type ResumeCommentListItemProps = {
   comment: ResumeComment;
   userId: string | undefined;
-}>;
+};
 
 export default function ResumeCommentListItem({
   comment,
@@ -27,14 +28,14 @@ export default function ResumeCommentListItem({
 
   return (
     <div className="min-w-fit">
-      <div className="flex flex-row space-x-3 align-top">
+      <div className="flex flex-row space-x-2 p-1 align-top">
         {/* Image Icon */}
         {comment.user.image ? (
           <img
             alt={comment.user.name ?? 'Reviewer'}
             className={clsx(
               'mt-1 rounded-full',
-              comment.parentId ? 'h-8 w-8' : 'h-10 w-10',
+              comment.parentId ? 'h-6 w-6' : 'h-8 w-8 ',
             )}
             src={comment.user.image!}
           />
@@ -49,18 +50,24 @@ export default function ResumeCommentListItem({
 
         <div className="flex w-full flex-col space-y-1">
           {/* Name and creation time */}
-          <div className="flex flex-row items-center space-x-2">
-            <p className={clsx('text-sm font-medium text-slate-800')}>
-              {comment.user.name ?? 'Reviewer ABC'}
-            </p>
-            {isCommentOwner && (
-              <span className="bg-primary-100 text-primary-800 rounded-md py-0.5 px-1 text-xs">
-                Me
-              </span>
-            )}
-            <ResumeUserBadges userId={comment.user.userId} />
-            <span className="font-medium text-slate-500">&middot;</span>
-            <div className="text-xs text-slate-500">
+          <div className="flex flex-row justify-between">
+            <div className="flex flex-row items-center space-x-1">
+              <p
+                className={clsx(
+                  'font-medium text-gray-800',
+                  !!comment.parentId && 'text-sm',
+                )}>
+                {comment.user.name ?? 'Reviewer ABC'}
+              </p>
+
+              <p className="text-primary-800 text-xs font-medium">
+                {isCommentOwner ? '(Me)' : ''}
+              </p>
+
+              <ResumeUserBadges userId={comment.user.userId} />
+            </div>
+
+            <div className="px-2 text-xs text-slate-600">
               {formatDistanceToNow(comment.createdAt, {
                 addSuffix: true,
               })}
@@ -74,7 +81,7 @@ export default function ResumeCommentListItem({
               setIsEditingComment={setIsEditingComment}
             />
           ) : (
-            <div className="text-slate-800">
+            <div className="text-gray-800">
               <ResumeExpandableText
                 key={comment.description}
                 text={comment.description}
@@ -83,54 +90,31 @@ export default function ResumeCommentListItem({
           )}
 
           {/* Upvote and edit */}
-          <div className="flex flex-row space-x-2 pt-1 align-middle">
+          <div className="flex flex-row space-x-1 pt-1 align-middle">
             <ResumeCommentVoteButtons commentId={comment.id} userId={userId} />
+
             {/* Action buttons; only present for authenticated user when not editing/replying */}
             {userId && !isEditingComment && !isReplyingComment && (
               <>
                 {isCommentOwner && (
-                  <>
-                    <span className="font-medium text-slate-500">&middot;</span>{' '}
-                    <button
-                      className="px-1 text-xs font-medium text-slate-500 hover:text-slate-600"
-                      type="button"
-                      onClick={() => setIsEditingComment(true)}>
-                      Edit
-                    </button>
-                  </>
+                  <button
+                    className="text-primary-800 hover:text-primary-400 px-1 text-xs"
+                    type="button"
+                    onClick={() => setIsEditingComment(true)}>
+                    Edit
+                  </button>
                 )}
+
                 {!comment.parentId && (
-                  <>
-                    <span className="font-medium text-slate-500">&middot;</span>{' '}
-                    <button
-                      className="px-1 text-xs font-medium text-slate-500 hover:text-slate-600"
-                      type="button"
-                      onClick={() => setIsReplyingComment(true)}>
-                      Reply
-                    </button>
-                  </>
+                  <button
+                    className="text-primary-800 hover:text-primary-400 px-1 text-xs"
+                    type="button"
+                    onClick={() => setIsReplyingComment(true)}>
+                    Reply
+                  </button>
                 )}
               </>
             )}
-            {comment.children.length > 0 && (
-              <>
-                <span className="font-medium text-slate-500">&middot;</span>{' '}
-                <button
-                  className="flex items-center space-x-1 rounded-md text-xs font-medium text-slate-500 hover:text-slate-600"
-                  type="button"
-                  onClick={() => setShowReplies(!showReplies)}>
-                  <span>
-                    {showReplies
-                      ? `Hide ${
-                          comment.children.length === 1 ? 'reply' : 'replies'
-                        }`
-                      : `Show ${comment.children.length} ${
-                          comment.children.length === 1 ? 'reply' : 'replies'
-                        }`}
-                  </span>
-                </button>
-              </>
-            )}
           </div>
 
           {/* Reply Form */}
@@ -144,21 +128,48 @@ export default function ResumeCommentListItem({
           )}
 
           {/* Replies */}
-          {comment.children.length > 0 && showReplies && (
+          {comment.children.length > 0 && (
             <div className="min-w-fit space-y-1 pt-2">
-              <div className="flex flex-row border-l-2 border-slate-200 pl-2">
-                <div className="flex flex-1 flex-col space-y-1">
-                  {comment.children.map((child) => {
-                    return (
-                      <ResumeCommentListItem
-                        key={child.id}
-                        comment={child}
-                        userId={userId}
-                      />
-                    );
-                  })}
+              <button
+                className="text-primary-800 hover:text-primary-300 flex items-center space-x-1 rounded-md text-xs font-medium"
+                type="button"
+                onClick={() => setShowReplies(!showReplies)}>
+                <ChevronUpIcon
+                  className={clsx(
+                    'h-5 w-5 ',
+                    !showReplies && 'rotate-180 transform',
+                  )}
+                />
+                <span>
+                  {showReplies
+                    ? `Hide ${
+                        comment.children.length === 1 ? 'reply' : 'replies'
+                      }`
+                    : `Show ${comment.children.length} ${
+                        comment.children.length === 1 ? 'reply' : 'replies'
+                      }`}
+                </span>
+              </button>
+
+              {showReplies && (
+                <div className="flex flex-row">
+                  <div className="relative flex flex-col px-2 py-2">
+                    <div className="flex-grow border-r border-slate-300" />
+                  </div>
+
+                  <div className="flex flex-1 flex-col space-y-1">
+                    {comment.children.map((child) => {
+                      return (
+                        <ResumeCommentListItem
+                          key={child.id}
+                          comment={child}
+                          userId={userId}
+                        />
+                      );
+                    })}
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
           )}
         </div>
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
index 2f78aec6..d15cf82a 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
@@ -115,12 +115,10 @@ export default function ResumeCommentsForm({
   };
 
   return (
-    <div className="overflow-y-auto py-8 px-4 lg:h-[calc(100vh-13rem)]">
-      <h2 className="text-xl font-medium text-slate-800">
-        Contribute a review
-      </h2>
-      <p className="mt-1 text-slate-600">
-        Please fill in at least one section to submit a review.
+    <div className="h-[calc(100vh-13rem)] overflow-y-auto pb-4">
+      <h2 className="text-xl font-semibold text-slate-800">Add your review</h2>
+      <p className="text-slate-800">
+        Please fill in at least one section to submit your review
       </p>
 
       <form
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
index 74ff159b..b4af9089 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
@@ -1,7 +1,9 @@
+import clsx from 'clsx';
 import { useSession } from 'next-auth/react';
 import {
   BookOpenIcon,
   BriefcaseIcon,
+  ChatBubbleLeftRightIcon,
   CodeBracketSquareIcon,
   FaceSmileIcon,
   IdentificationIcon,
@@ -29,7 +31,7 @@ export default function ResumeCommentsList({
   const commentsQuery = trpc.useQuery(['resumes.comments.list', { resumeId }]);
 
   const renderIcon = (section: ResumesSection) => {
-    const className = 'h-5 w-5';
+    const className = 'h-7 w-7';
     switch (section) {
       case ResumesSection.GENERAL:
         return <IdentificationIcon className={className} />;
@@ -55,7 +57,7 @@ export default function ResumeCommentsList({
   }
 
   return (
-    <div className="flow-root w-full space-y-4 overflow-y-auto overflow-x-hidden px-4 lg:h-[calc(100vh-12rem)] lg:py-8">
+    <div className="flow-root w-full flex-col space-y-10 overflow-y-auto overflow-x-hidden lg:h-[calc(100vh-13rem)]">
       {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
         const comments = commentsQuery.data
           ? commentsQuery.data.filter((comment: ResumeComment) => {
@@ -65,19 +67,22 @@ export default function ResumeCommentsList({
         const commentCount = comments.length;
 
         return (
-          <div
-            key={value}
-            className="rounded-lg border border-slate-200 bg-white shadow-sm">
+          <div key={value} className="space-y-4 pr-4">
             {/* CommentHeader Section */}
-            <div className="flex items-center space-x-2 border-b border-slate-200 px-4 py-3 font-medium text-slate-700">
+            <div className="text-primary-800 flex items-center space-x-2">
+              <hr className="flex-grow border-slate-800" />
               {renderIcon(value)}
-              <span className="w-fit text-sm font-medium uppercase tracking-wide">
-                {label}
-              </span>
+
+              <span className="w-fit text-lg font-medium">{label}</span>
+              <hr className="flex-grow border-slate-800" />
             </div>
 
             {/* Comment Section */}
-            <div className="space-y-4 px-4 py-3">
+            <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 (
@@ -90,8 +95,10 @@ export default function ResumeCommentsList({
                 })
               ) : (
                 <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.
+                    There are no comments for this section yet!
                   </div>
                 </div>
               )}
diff --git a/apps/portal/src/components/resumes/comments/comment/ResumeCommentReplyForm.tsx b/apps/portal/src/components/resumes/comments/comment/ResumeCommentReplyForm.tsx
index ce305050..ef2da04c 100644
--- a/apps/portal/src/components/resumes/comments/comment/ResumeCommentReplyForm.tsx
+++ b/apps/portal/src/components/resumes/comments/comment/ResumeCommentReplyForm.tsx
@@ -77,37 +77,39 @@ export default function ResumeCommentReplyForm({
   };
 
   return (
-    <form className="space-y-2" onSubmit={handleSubmit(onSubmit)}>
-      <TextArea
-        {...(register('description', {
-          required: 'Reply cannot be empty!',
-        }),
-        {})}
-        defaultValue=""
-        disabled={commentReplyMutation.isLoading}
-        errorMessage={errors.description?.message}
-        label=""
-        placeholder="Leave your reply here"
-        onChange={setFormValue}
-      />
-
-      <div className="flex-row space-x-2">
-        <Button
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex-column space-y-2 pt-2">
+        <TextArea
+          {...(register('description', {
+            required: 'Reply cannot be empty!',
+          }),
+          {})}
+          defaultValue=""
           disabled={commentReplyMutation.isLoading}
-          label="Cancel"
-          size="sm"
-          variant="tertiary"
-          onClick={onCancel}
+          errorMessage={errors.description?.message}
+          label=""
+          placeholder="Leave your reply here"
+          onChange={setFormValue}
         />
 
-        <Button
-          disabled={!isDirty || commentReplyMutation.isLoading}
-          isLoading={commentReplyMutation.isLoading}
-          label="Confirm"
-          size="sm"
-          type="submit"
-          variant="primary"
-        />
+        <div className="flex-row space-x-2">
+          <Button
+            disabled={commentReplyMutation.isLoading}
+            label="Cancel"
+            size="sm"
+            variant="tertiary"
+            onClick={onCancel}
+          />
+
+          <Button
+            disabled={!isDirty || commentReplyMutation.isLoading}
+            isLoading={commentReplyMutation.isLoading}
+            label="Confirm"
+            size="sm"
+            type="submit"
+            variant="primary"
+          />
+        </div>
       </div>
     </form>
   );
diff --git a/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx b/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
index 14e38ab7..c7956fbe 100644
--- a/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
+++ b/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
@@ -1,7 +1,10 @@
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
+import {
+  ArrowDownCircleIcon,
+  ArrowUpCircleIcon,
+} from '@heroicons/react/20/solid';
 import { Vote } from '@prisma/client';
 
 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
@@ -89,9 +92,8 @@ export default function ResumeCommentVoteButtons({
   };
 
   return (
-    <div className="flex items-center">
+    <>
       <button
-        className="-m-1 rounded-full p-1 hover:bg-slate-100"
         disabled={
           commentVotesQuery.isLoading ||
           commentVotesUpsertMutation.isLoading ||
@@ -99,36 +101,27 @@ export default function ResumeCommentVoteButtons({
         }
         type="button"
         onClick={() => onVote(Vote.UPVOTE, setUpvoteAnimation)}>
-        <ChevronUpIcon
+        <ArrowUpCircleIcon
           className={clsx(
-            'h-5 w-5',
+            'h-4 w-4',
             commentVotesQuery.data?.userVote?.value === Vote.UPVOTE ||
               upvoteAnimation
-              ? 'text-primary-500'
-              : 'text-slate-400',
+              ? 'fill-primary-500'
+              : 'fill-slate-400',
             userId &&
               !downvoteAnimation &&
               !upvoteAnimation &&
-              'hover:text-primary-500',
+              'hover:fill-primary-500',
             upvoteAnimation && 'animate-[bounce_0.5s_infinite] cursor-default',
           )}
         />
       </button>
-      <div className="mx-1 flex min-w-[1rem] justify-center text-xs font-semibold text-gray-700">
+
+      <div className="flex min-w-[1rem] justify-center text-xs font-semibold text-gray-700">
         {commentVotesQuery.data?.numVotes ?? 0}
       </div>
+
       <button
-        className={clsx(
-          '-m-1 rounded-full p-1 hover:bg-slate-100',
-          commentVotesQuery.data?.userVote?.value === Vote.DOWNVOTE ||
-            downvoteAnimation
-            ? 'text-danger-500'
-            : 'text-slate-400',
-          userId &&
-            !downvoteAnimation &&
-            !upvoteAnimation &&
-            'hover:text-danger-500',
-        )}
         disabled={
           commentVotesQuery.isLoading ||
           commentVotesUpsertMutation.isLoading ||
@@ -136,14 +129,22 @@ export default function ResumeCommentVoteButtons({
         }
         type="button"
         onClick={() => onVote(Vote.DOWNVOTE, setDownvoteAnimation)}>
-        <ChevronDownIcon
+        <ArrowDownCircleIcon
           className={clsx(
-            'h-5 w-5',
+            'h-4 w-4',
+            commentVotesQuery.data?.userVote?.value === Vote.DOWNVOTE ||
+              downvoteAnimation
+              ? 'fill-danger-500'
+              : 'fill-slate-400',
+            userId &&
+              !downvoteAnimation &&
+              !upvoteAnimation &&
+              'hover:fill-danger-500',
             downvoteAnimation &&
               'animate-[bounce_0.5s_infinite] cursor-default',
           )}
         />
       </button>
-    </div>
+    </>
   );
 }
diff --git a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
index 2111d505..bc9f9c0a 100644
--- a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
+++ b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
@@ -29,14 +29,14 @@ export default function ResumeExpandableText({
       <span
         ref={ref}
         className={clsx(
-          'line-clamp-3 whitespace-pre-wrap text-xs sm:text-sm',
+          'line-clamp-3 whitespace-pre-wrap text-sm',
           isExpanded ? 'line-clamp-none' : '',
         )}>
         {text}
       </span>
       {descriptionOverflow && (
         <p
-          className="text-primary-500 hover:text-primary-300 mt-1 cursor-pointer text-xs sm:text-sm"
+          className="text-primary-500 hover:text-primary-300 mt-1 cursor-pointer text-xs"
           onClick={onSeeActionClicked}>
           {isExpanded ? 'See Less' : 'See More'}
         </p>
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index 8de0efd7..2fea9d4f 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -180,9 +180,10 @@ export default function ResumeReviewPage() {
   };
 
   const renderReviewButton = () => {
-    if (session == null) {
+    if (session === null) {
       return (
         <Button
+          className="h-10 shadow-md"
           display="block"
           href={loginPageHref()}
           label="Log in to join discussion"
@@ -190,9 +191,9 @@ export default function ResumeReviewPage() {
         />
       );
     }
-
     return (
       <Button
+        className="h-10 shadow-md"
         display="block"
         label="Add your review"
         variant="primary"
@@ -223,192 +224,182 @@ export default function ResumeReviewPage() {
 
   return (
     <>
-      {(detailsQuery.isError || detailsQuery.data == null) && ErrorPage}
+      {(detailsQuery.isError || detailsQuery.data === null) && ErrorPage}
       {detailsQuery.isLoading && (
         <div className="w-full pt-4">
-          <Spinner display="block" size="lg" />
+          {' '}
+          <Spinner display="block" size="lg" />{' '}
         </div>
       )}
       {detailsQuery.isFetched && detailsQuery.data && (
         <>
           <Head>
-            <title>{`${detailsQuery.data.title} | Resume Review`}</title>
+            <title>{detailsQuery.data.title}</title>
           </Head>
-          <main className="h-full w-full bg-white">
-            <div className="mx-auto space-y-4 border-b border-slate-200 px-4 py-6 sm:px-6 md:space-y-2 lg:px-8">
-              <div className="flex flex-wrap justify-between space-y-4 lg:space-y-0">
-                <h1 className="pr-2 text-xl font-medium leading-7 text-slate-900 sm:text-2xl lg:w-[60%]">
-                  {detailsQuery.data.title}
-                </h1>
-                <div className="flex gap-3">
-                  {userIsOwner && (
-                    <>
-                      <Button
-                        addonPosition="start"
-                        icon={PencilSquareIcon}
-                        label="Edit"
-                        variant="tertiary"
-                        onClick={onEditButtonClick}
-                      />
-                      <button
-                        className="isolate inline-flex items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
-                        disabled={resolveMutation.isLoading}
-                        type="button"
-                        onClick={onResolveButtonClick}>
-                        <div className="-ml-1 mr-2 h-5 w-5">
-                          {resolveMutation.isLoading ? (
-                            <Spinner className="mt-0.5" size="xs" />
-                          ) : (
-                            <CheckCircleIcon
-                              aria-hidden="true"
-                              className={
-                                isResumeResolved
-                                  ? 'text-slate-500'
-                                  : 'text-success-600'
-                              }
-                            />
-                          )}
-                        </div>
-                        {isResumeResolved
-                          ? 'Reopen for review'
-                          : 'Mark as reviewed'}
-                      </button>
-                    </>
-                  )}
-                  <button
-                    className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
-                    disabled={
-                      starMutation.isLoading || unstarMutation.isLoading
-                    }
-                    type="button"
-                    onClick={onStarButtonClick}>
-                    <div className="-ml-1 mr-2 h-5 w-5">
-                      {starMutation.isLoading ||
-                      unstarMutation.isLoading ||
-                      detailsQuery.isLoading ? (
-                        <Spinner className="mt-0.5" size="xs" />
-                      ) : (
-                        <StarIcon
-                          aria-hidden="true"
-                          className={clsx(
-                            detailsQuery.data?.stars.length
-                              ? 'text-orange-400'
-                              : 'text-slate-400',
-                          )}
-                        />
-                      )}
-                    </div>
-                    {detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
-                    <span className="relative -ml-px inline-flex">
-                      {detailsQuery.data?._count.stars}
-                    </span>
-                  </button>
-                  <div className="hidden xl:block">{renderReviewButton()}</div>
-                </div>
-              </div>
-              <div className="space-y-2">
-                <div className="grid grid-cols-2 gap-2 md:flex md:flex-wrap md:space-x-8">
-                  <div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
-                    <BriefcaseIcon
-                      aria-hidden="true"
-                      className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
+          <main className="h-full flex-1 space-y-2 py-4 px-8 xl:px-12 2xl:pr-16">
+            <div className="flex flex-wrap justify-between">
+              <h1 className="w-[60%] pr-2 text-2xl font-semibold leading-7 text-slate-900">
+                {detailsQuery.data.title}
+              </h1>
+              <div className="flex gap-3 xl:pr-4">
+                {userIsOwner && (
+                  <>
+                    <Button
+                      addonPosition="start"
+                      className="h-10 shadow-md"
+                      icon={PencilSquareIcon}
+                      label="Edit"
+                      variant="tertiary"
+                      onClick={onEditButtonClick}
                     />
                     <button
-                      className="hover:text-primary-800 underline"
+                      className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-md hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
+                      disabled={resolveMutation.isLoading}
                       type="button"
-                      onClick={() =>
-                        onInfoTagClick({
-                          roleLabel: detailsQuery.data?.role,
-                        })
-                      }>
-                      {getFilterLabel(
-                        ROLES,
-                        detailsQuery.data.role as RoleFilter,
-                      )}
+                      onClick={onResolveButtonClick}>
+                      <div className="-ml-1 mr-2 h-5 w-5">
+                        {resolveMutation.isLoading ? (
+                          <Spinner className="mt-0.5" size="xs" />
+                        ) : (
+                          <CheckCircleIcon
+                            aria-hidden="true"
+                            className={
+                              isResumeResolved
+                                ? 'text-slate-500'
+                                : 'text-success-600'
+                            }
+                          />
+                        )}
+                      </div>
+                      {isResumeResolved
+                        ? 'Reopen for review'
+                        : 'Mark as reviewed'}
                     </button>
-                  </div>
-                  <div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
-                    <MapPinIcon
-                      aria-hidden="true"
-                      className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
-                    />
-                    <button
-                      className="hover:text-primary-800 underline"
-                      type="button"
-                      onClick={() =>
-                        onInfoTagClick({
-                          locationLabel: detailsQuery.data?.location,
-                        })
-                      }>
-                      {getFilterLabel(
-                        LOCATIONS,
-                        detailsQuery.data.location as LocationFilter,
-                      )}
-                    </button>
-                  </div>
-                  <div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
-                    <AcademicCapIcon
-                      aria-hidden="true"
-                      className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
-                    />
-                    <button
-                      className="hover:text-primary-800 underline"
-                      type="button"
-                      onClick={() =>
-                        onInfoTagClick({
-                          experienceLabel: detailsQuery.data?.experience,
-                        })
-                      }>
-                      {getFilterLabel(
-                        EXPERIENCES,
-                        detailsQuery.data.experience as ExperienceFilter,
-                      )}
-                    </button>
-                  </div>
-                  <div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
-                    <CalendarIcon
-                      aria-hidden="true"
-                      className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
-                    />
-                    {`Uploaded ${formatDistanceToNow(
-                      detailsQuery.data.createdAt,
-                      {
-                        addSuffix: true,
-                      },
-                    )} by ${detailsQuery.data.user.name}`}
-                  </div>
-                </div>
-                {detailsQuery.data.additionalInfo && (
-                  <div className="col-span-2 flex items-start whitespace-pre-wrap pt-2 text-slate-600 xl:pt-1">
-                    <InformationCircleIcon
-                      aria-hidden="true"
-                      className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
-                    />
-                    <ResumeExpandableText
-                      key={detailsQuery.data.additionalInfo}
-                      text={detailsQuery.data.additionalInfo}
-                    />
-                  </div>
+                  </>
                 )}
+                <button
+                  className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-md hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
+                  disabled={starMutation.isLoading || unstarMutation.isLoading}
+                  type="button"
+                  onClick={onStarButtonClick}>
+                  <div className="-ml-1 mr-2 h-5 w-5">
+                    {starMutation.isLoading ||
+                    unstarMutation.isLoading ||
+                    detailsQuery.isLoading ? (
+                      <Spinner className="mt-0.5" size="xs" />
+                    ) : (
+                      <StarIcon
+                        aria-hidden="true"
+                        className={clsx(
+                          detailsQuery.data?.stars.length
+                            ? 'text-orange-400'
+                            : 'text-slate-400',
+                        )}
+                      />
+                    )}
+                  </div>
+                  {detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
+                  <span className="relative -ml-px inline-flex">
+                    {detailsQuery.data?._count.stars}
+                  </span>
+                </button>
+                <div className="hidden xl:block">{renderReviewButton()}</div>
+              </div>
+            </div>
+            <div className="flex flex-col lg:mt-0 lg:flex-row lg:flex-wrap lg:space-x-8">
+              <div className="mt-2 flex items-center text-sm text-slate-600 xl:mt-1">
+                <BriefcaseIcon
+                  aria-hidden="true"
+                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
+                />
+                <button
+                  className="hover:text-primary-800 underline"
+                  type="button"
+                  onClick={() =>
+                    onInfoTagClick({
+                      roleLabel: detailsQuery.data?.role,
+                    })
+                  }>
+                  {getFilterLabel(ROLES, detailsQuery.data.role as RoleFilter)}
+                </button>
+              </div>
+              <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
+                <MapPinIcon
+                  aria-hidden="true"
+                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
+                />
+                <button
+                  className="hover:text-primary-800 underline"
+                  type="button"
+                  onClick={() =>
+                    onInfoTagClick({
+                      locationLabel: detailsQuery.data?.location,
+                    })
+                  }>
+                  {getFilterLabel(
+                    LOCATIONS,
+                    detailsQuery.data.location as LocationFilter,
+                  )}
+                </button>
+              </div>
+              <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
+                <AcademicCapIcon
+                  aria-hidden="true"
+                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
+                />
+                <button
+                  className="hover:text-primary-800 underline"
+                  type="button"
+                  onClick={() =>
+                    onInfoTagClick({
+                      experienceLabel: detailsQuery.data?.experience,
+                    })
+                  }>
+                  {getFilterLabel(
+                    EXPERIENCES,
+                    detailsQuery.data.experience as ExperienceFilter,
+                  )}
+                </button>
+              </div>
+              <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
+                <CalendarIcon
+                  aria-hidden="true"
+                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
+                />
+                {`Uploaded ${formatDistanceToNow(detailsQuery.data.createdAt, {
+                  addSuffix: true,
+                })} by ${detailsQuery.data.user.name}`}
               </div>
             </div>
-            <div className="flex w-full flex-col divide-x divide-slate-200 py-4 lg:flex-row xl:py-0">
-              <div className="w-full bg-slate-100 lg:w-1/2">
+            {detailsQuery.data.additionalInfo && (
+              <div className="flex items-start whitespace-pre-wrap pt-2 text-sm text-slate-600 xl:pt-1">
+                <InformationCircleIcon
+                  aria-hidden="true"
+                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
+                />
+                <ResumeExpandableText
+                  key={detailsQuery.data.additionalInfo}
+                  text={detailsQuery.data.additionalInfo}
+                />
+              </div>
+            )}
+
+            <div className="flex w-full flex-col gap-6 py-4 xl:flex-row xl:py-0">
+              <div className="w-full xl:w-1/2">
                 <ResumePdf url={detailsQuery.data.url} />
               </div>
-              <div className="grow border-t border-slate-200 bg-slate-50 lg:border-none">
-                <div className="divide-y divide-slate-200 lg:hidden">
-                  <div className="bg-white p-4 lg:p-0">
-                    {renderReviewButton()}
+              <div className="grow">
+                <div className="mb-6 space-y-4 xl:hidden">
+                  {renderReviewButton()}
+                  <div className="flex items-center space-x-2">
+                    <hr className="flex-grow border-slate-300" />
+                    <span className="bg-slate-50 px-3 text-lg font-medium text-slate-900">
+                      Reviews
+                    </span>
+                    <hr className="flex-grow border-slate-300" />
                   </div>
-                  {!showCommentsForm && (
-                    <div className="p-4 lg:p-0">
-                      <h2 className="text-xl font-medium text-slate-900">
-                        Reviews
-                      </h2>
-                    </div>
-                  )}
                 </div>
+
                 {showCommentsForm ? (
                   <ResumeCommentsForm
                     resumeId={resumeId as string}