[resumes][feat] use primary buttons (#441)

apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx

@@ -48,13 +48,15 @@ export default function ResumeCommentsList({
     }
   };
 
+  if (commentsQuery.isLoading) {
     return (
-    <div className="space-y-3">
-      {commentsQuery.isLoading ? (
       <div className="col-span-10 pt-4">
         <Spinner display="block" size="lg" />
       </div>
-      ) : (
+    );
+  }
+
+  return (
     <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
@@ -105,7 +107,5 @@ export default function ResumeCommentsList({
         );
       })}
     </div>
-      )}
-    </div>
   );
 }

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">
+        <Button
-          <a
+          className="h-10 shadow-md"
+          display="block"
           href="/api/auth/signin"
-            onClick={(event) => {
+          label="Sign in to join discussion"
-              event.preventDefault();
+          variant="primary"
-              signIn();
+        />
-            }}>
-            Sign in to join discussion
-          </a>
-        </div>
       );
     }
     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
+                  <Button
-                    className="h-10 rounded-md border border-slate-300 bg-white py-1 px-2 text-center shadow-md hover:bg-slate-50"
+                    addonPosition="start"
-                    type="button"
+                    className="h-10 shadow-md"
-                    onClick={onEditButtonClick}>
+                    icon={PencilSquareIcon}
-                    <PencilSquareIcon className="text-primary-600 h-6 w-6" />
+                    label="Edit"
-                  </button>
+                    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 className="mb-6 space-y-4 xl:hidden">
-                  <div
+                  {renderReviewButton()}
-                    aria-hidden="true"
+                  <div className="flex items-center space-x-2">
-                    className="absolute inset-0 flex items-center">
+                    <hr className="flex-grow border-slate-300" />
-                    <div className="w-full border-t border-slate-300" />
-                  </div>
-                  <div className="relative flex justify-center">
                     <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}

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
-                  <button
+                  className="lg:hidden"
-                    className="bg-primary-500 ml-4 rounded-md py-2 px-3 text-sm font-medium text-white lg:hidden"
+                  label="Submit Resume"
-                    type="button"
+                  variant="primary"
-                    onClick={onSubmitResume}>
+                  onClick={onSubmitResume}
-                    Submit Resume
+                />
-                  </button>
               </div>
-              </div>
+              <div className="flex flex-wrap items-center justify-start gap-6">
-              <div className="flex flex-wrap items-center justify-start gap-8">
                 <div className="w-64">
                   <TextInput
                     isLabelHidden={true}
@@ -562,12 +561,18 @@ export default function ResumeHomePage() {
                     onChange={setSearchValue}
                   />
                 </div>
-                <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)
+                    SORT_OPTIONS.find(({ value }) => value === sortOrder)?.label
-                        ?.label
                   }>
                   {SORT_OPTIONS.map(({ label, value }) => (
                     <DropdownMenu.Item
@@ -577,22 +582,12 @@ export default function ResumeHomePage() {
                       onClick={() => setSortOrder(value)}></DropdownMenu.Item>
                   ))}
                 </DropdownMenu>
-                </div>
+                <Button
-                <button
+                  className="hidden lg:block"
-                  className="-m-2 text-slate-400 hover:text-slate-500 lg:hidden"
+                  label="Submit Resume"
-                  type="button"
+                  variant="primary"
-                  onClick={() => setMobileFiltersOpen(true)}>
+                  onClick={onSubmitResume}
-                  <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>
               </div>
             </div>
             {isFetchingResumes ? (