[resumes][feat] change tabs

apps/portal/src/components/resumes/browse/ResumeListItem.tsx

@@ -32,18 +32,18 @@ type Props = Readonly<{
 export default function ResumeListItem({ href, resumeInfo }: Props) {
   return (
     <Link href={href}>
-      <div
+      <div className="grid grid-cols-8">
-        className={clsx(
-          resumeInfo.isResolved ? 'opacity-50' : '',
-          'grid grid-cols-8',
-        )}>
         <div className="col-span-7 grid gap-4 border-b border-slate-200 p-4 hover:bg-slate-100 sm:grid-cols-7">
           <div className="sm:col-span-4">
             <div className="flex items-center gap-3">
-              <p>{resumeInfo.title}</p>
+              {resumeInfo.title}
-              {/* <p className="rounded-xl border border-slate-400 p-1 text-xs text-slate-500">
+              <p
+                className={clsx(
+                  'w-auto items-center space-x-4 rounded-xl border border-slate-300 px-2 py-1 text-xs font-medium text-white opacity-70',
+                  resumeInfo.isResolved ? 'bg-slate-400' : 'bg-success-500',
+                )}>
                 {resumeInfo.isResolved ? 'Reviewed' : 'Unreviewed'}
-              </p> */}
+              </p>
             </div>
             <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
               <div className="flex">

apps/portal/src/pages/resumes/[resumeId].tsx

@@ -214,7 +214,7 @@ export default function ResumeReviewPage() {
           </Head>
           <main className="h-full flex-1 space-y-2 overflow-y-auto py-4 px-8 xl:px-12 2xl:pr-16">
             <div className="flex justify-between">
-              <h1 className="pr-2 text-2xl font-semibold leading-7 text-slate-900 sm:truncate sm:text-3xl sm:tracking-tight">
+              <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">
@@ -258,25 +258,23 @@ export default function ResumeReviewPage() {
                   disabled={starMutation.isLoading || unstarMutation.isLoading}
                   type="button"
                   onClick={onStarButtonClick}>
-                  <span className="relative inline-flex">
+                  <div className="-ml-1 mr-2 h-5 w-5">
-                    <div className="-ml-1 mr-2 h-5 w-5">
+                    {starMutation.isLoading ||
-                      {starMutation.isLoading ||
+                    unstarMutation.isLoading ||
-                      unstarMutation.isLoading ||
+                    detailsQuery.isLoading ? (
-                      detailsQuery.isLoading ? (
+                      <Spinner className="mt-0.5" size="xs" />
-                        <Spinner className="mt-0.5" size="xs" />
+                    ) : (
-                      ) : (
+                      <StarIcon
-                        <StarIcon
+                        aria-hidden="true"
-                          aria-hidden="true"
+                        className={clsx(
-                          className={clsx(
+                          detailsQuery.data?.stars.length
-                            detailsQuery.data?.stars.length
+                            ? 'text-orange-400'
-                              ? 'text-orange-400'
+                            : 'text-slate-400',
-                              : 'text-slate-400',
+                        )}
-                          )}
+                      />
-                        />
+                    )}
-                      )}
+                  </div>
-                    </div>
+                  {detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
-                    {detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
-                  </span>
                   <span className="relative -ml-px inline-flex">
                     {detailsQuery.data?._count.stars}
                   </span>

apps/portal/src/pages/resumes/index.tsx

@@ -92,7 +92,7 @@ const getEmptyDataText = (
   }
   switch (tabsValue) {
     case BROWSE_TABS_VALUES.ALL:
-      return 'Looks like SWEs are feeling lucky!';
+      return "There's nothing to see here...";
     case BROWSE_TABS_VALUES.STARRED:
       return 'You have not starred any resumes. Star one to see it here!';
     case BROWSE_TABS_VALUES.MY: