From 01b207e52fc68cb9c03de6fe72bb9086bf8fc929 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Thu, 27 Oct 2022 01:28:26 +0800
Subject: [PATCH] [resumes][feat] use primary buttons (#441)

---
 .../resumes/comments/ResumeCommentsList.tsx   | 104 +++++++++---------
 apps/portal/src/pages/resumes/[resumeId].tsx  |  55 ++++-----
 apps/portal/src/pages/resumes/browse.tsx      |  75 ++++++-------
 3 files changed, 111 insertions(+), 123 deletions(-)

diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
index 3f3dc3c2..271fdd44 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
@@ -48,64 +48,64 @@ export default function ResumeCommentsList({
     }
   };
 
+  if (commentsQuery.isLoading) {
+    return (
+      <div className="col-span-10 pt-4">
+        <Spinner display="block" size="lg" />
+      </div>
+    );
+  }
+
   return (
-    <div className="space-y-3">
-      {commentsQuery.isLoading ? (
-        <div className="col-span-10 pt-4">
-          <Spinner display="block" size="lg" />
-        </div>
-      ) : (
-        <div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-10 overflow-y-auto overflow-x-hidden pb-16">
-          {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
-            const comments = commentsQuery.data
-              ? commentsQuery.data.filter((comment: ResumeComment) => {
-                  return (comment.section as string) === value;
-                })
-              : [];
-            const commentCount = comments.length;
+    <div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-10 overflow-y-auto overflow-x-hidden pb-16">
+      {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
+        const comments = commentsQuery.data
+          ? commentsQuery.data.filter((comment: ResumeComment) => {
+              return (comment.section as string) === value;
+            })
+          : [];
+        const commentCount = comments.length;
 
-            return (
-              <div key={value} className="space-y-4 pr-4">
-                {/* CommentHeader Section */}
-                <div className="text-primary-800 flex items-center space-x-2">
-                  <hr className="flex-grow border-slate-800" />
-                  {renderIcon(value)}
+        return (
+          <div key={value} className="space-y-4 pr-4">
+            {/* CommentHeader Section */}
+            <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-lg font-medium">{label}</span>
-                  <hr className="flex-grow border-slate-800" />
-                </div>
+              <span className="w-fit text-lg font-medium">{label}</span>
+              <hr className="flex-grow border-slate-800" />
+            </div>
 
-                {/* Comment Section */}
-                <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" />
+            {/* Comment Section */}
+            <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>
-                  )}
+                  <div className="text-slate-500">
+                    There are no comments for this section yet!
+                  </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
+              )}
+            </div>
+          </div>
+        );
+      })}
     </div>
   );
 }
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index beb8c793..15d50e83 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -3,7 +3,7 @@ import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import Error from 'next/error';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { signIn, useSession } from 'next-auth/react';
+import { useSession } from 'next-auth/react';
 import { useState } from 'react';
 import {
   AcademicCapIcon,
@@ -142,24 +142,21 @@ export default function ResumeReviewPage() {
   const renderReviewButton = () => {
     if (session === null) {
       return (
-        <div className=" flex h-10 justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-[400] hover:cursor-pointer hover:bg-slate-50">
-          <a
-            href="/api/auth/signin"
-            onClick={(event) => {
-              event.preventDefault();
-              signIn();
-            }}>
-            Sign in to join discussion
-          </a>
-        </div>
+        <Button
+          className="h-10 shadow-md"
+          display="block"
+          href="/api/auth/signin"
+          label="Sign in to join discussion"
+          variant="primary"
+        />
       );
     }
     return (
       <Button
-        className="h-10 py-2 shadow-md"
+        className="h-10 shadow-md"
         display="block"
         label="Add your review"
-        variant="tertiary"
+        variant="primary"
         onClick={() => setShowCommentsForm(true)}
       />
     );
@@ -209,14 +206,15 @@ export default function ResumeReviewPage() {
               </h1>
               <div className="flex gap-3 xl:pr-4">
                 {userIsOwner && (
-                  <button
-                    className="h-10 rounded-md border border-slate-300 bg-white py-1 px-2 text-center shadow-md hover:bg-slate-50"
-                    type="button"
-                    onClick={onEditButtonClick}>
-                    <PencilSquareIcon className="text-primary-600 h-6 w-6" />
-                  </button>
+                  <Button
+                    addonPosition="start"
+                    className="h-10 shadow-md"
+                    icon={PencilSquareIcon}
+                    label="Edit"
+                    variant="tertiary"
+                    onClick={onEditButtonClick}
+                  />
                 )}
-
                 <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  disabled:hover:bg-white"
                   disabled={starMutation.isLoading || unstarMutation.isLoading}
@@ -239,13 +237,12 @@ export default function ResumeReviewPage() {
                         />
                       )}
                     </div>
-                    Star
+                    {detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
                   </span>
                   <span className="relative -ml-px inline-flex">
                     {detailsQuery.data?._count.stars}
                   </span>
                 </button>
-
                 <div className="hidden xl:block">{renderReviewButton()}</div>
               </div>
             </div>
@@ -326,21 +323,17 @@ export default function ResumeReviewPage() {
                 <ResumePdf url={detailsQuery.data.url} />
               </div>
               <div className="grow">
-                <div className="relative p-2 xl:hidden">
-                  <div
-                    aria-hidden="true"
-                    className="absolute inset-0 flex items-center">
-                    <div className="w-full border-t border-slate-300" />
-                  </div>
-                  <div className="relative flex justify-center">
+                <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>
                 </div>
 
-                <div className="mb-4 xl:hidden">{renderReviewButton()}</div>
-
                 {showCommentsForm ? (
                   <ResumeCommentsForm
                     resumeId={resumeId as string}
diff --git a/apps/portal/src/pages/resumes/browse.tsx b/apps/portal/src/pages/resumes/browse.tsx
index 72c248a2..c0f6349b 100644
--- a/apps/portal/src/pages/resumes/browse.tsx
+++ b/apps/portal/src/pages/resumes/browse.tsx
@@ -10,6 +10,7 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline';
 import {
+  Button,
   CheckboxInput,
   CheckboxList,
   DropdownMenu,
@@ -540,16 +541,14 @@ export default function ResumeHomePage() {
                     onChange={onTabChange}
                   />
                 </div>
-                <div>
-                  <button
-                    className="bg-primary-500 ml-4 rounded-md py-2 px-3 text-sm font-medium text-white lg:hidden"
-                    type="button"
-                    onClick={onSubmitResume}>
-                    Submit Resume
-                  </button>
-                </div>
+                <Button
+                  className="lg:hidden"
+                  label="Submit Resume"
+                  variant="primary"
+                  onClick={onSubmitResume}
+                />
               </div>
-              <div className="flex flex-wrap items-center justify-start gap-8">
+              <div className="flex flex-wrap items-center justify-start gap-6">
                 <div className="w-64">
                   <TextInput
                     isLabelHidden={true}
@@ -562,37 +561,33 @@ export default function ResumeHomePage() {
                     onChange={setSearchValue}
                   />
                 </div>
-                <div>
-                  <DropdownMenu
-                    align="end"
-                    label={
-                      SORT_OPTIONS.find(({ value }) => value === sortOrder)
-                        ?.label
-                    }>
-                    {SORT_OPTIONS.map(({ label, value }) => (
-                      <DropdownMenu.Item
-                        key={value}
-                        isSelected={sortOrder === value}
-                        label={label}
-                        onClick={() => setSortOrder(value)}></DropdownMenu.Item>
-                    ))}
-                  </DropdownMenu>
-                </div>
-                <button
-                  className="-m-2 text-slate-400 hover:text-slate-500 lg:hidden"
-                  type="button"
-                  onClick={() => setMobileFiltersOpen(true)}>
-                  <span className="sr-only">Filters</span>
-                  <FunnelIcon aria-hidden="true" className="h-6 w-6" />
-                </button>
-                <div>
-                  <button
-                    className="bg-primary-500 hidden w-36 rounded-md py-2 px-3 text-sm font-medium text-white lg:block"
-                    type="button"
-                    onClick={onSubmitResume}>
-                    Submit Resume
-                  </button>
-                </div>
+                <Button
+                  className="lg:hidden"
+                  icon={FunnelIcon}
+                  isLabelHidden={true}
+                  label="Filters"
+                  variant="tertiary"
+                  onClick={() => setMobileFiltersOpen(true)}
+                />
+                <DropdownMenu
+                  align="end"
+                  label={
+                    SORT_OPTIONS.find(({ value }) => value === sortOrder)?.label
+                  }>
+                  {SORT_OPTIONS.map(({ label, value }) => (
+                    <DropdownMenu.Item
+                      key={value}
+                      isSelected={sortOrder === value}
+                      label={label}
+                      onClick={() => setSortOrder(value)}></DropdownMenu.Item>
+                  ))}
+                </DropdownMenu>
+                <Button
+                  className="hidden lg:block"
+                  label="Submit Resume"
+                  variant="primary"
+                  onClick={onSubmitResume}
+                />
               </div>
             </div>
             {isFetchingResumes ? (