[resumes][refactor] Update app UI (#434)

* [resumes][refactor] Update marketing page tabs

* [resumes][feat] mobile responsive resume rows on browse

* [resumes][fix] padding on pdf view in mobile

* [resumes][chore] add uni years to labels

Co-authored-by: Terence Ho <>
Co-authored-by: peirong.wu <wupeirong294@gmail.com>

apps/portal/src/components/resumes/ResumePdf.tsx

@@ -24,23 +24,18 @@ export default function ResumePdf({ url }: Props) {
     setNumPages(pdf.numPages);
   };
 
-  useEffect(() => {
   const onPageResize = () => {
     setComponentWidth(
-        document.querySelector('#pdfView')?.getBoundingClientRect().width ??
-          780,
+      document.querySelector('#pdfView')?.getBoundingClientRect().width ?? 780,
     );
   };
 
-    window.addEventListener('resize', onPageResize);
-
-    return () => {
-      window.removeEventListener('resize', onPageResize);
-    };
-  }, []);
+  useEffect(() => {
+    onPageResize();
+  }, [pageWidth]);
 
   return (
-    <div id="pdfView">
+    <div className="w-full" id="pdfView">
       <div className="group relative">
         <Document
           className="flex h-[calc(100vh-16rem)] flex-row justify-center overflow-auto"
@@ -84,7 +79,6 @@ export default function ResumePdf({ url }: Props) {
           </div>
         </Document>
       </div>
-      {numPages > 1 && (
       <div className="flex justify-center p-4">
         <Pagination
           current={pageNumber}
@@ -94,7 +88,6 @@ export default function ResumePdf({ url }: Props) {
           onSelect={(page) => setPageNumber(page)}
         />
       </div>
-      )}
     </div>
   );
 }

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

@@ -9,6 +9,18 @@ import {
 } from '@heroicons/react/20/solid';
 import { ChatBubbleLeftIcon, StarIcon } from '@heroicons/react/24/outline';
 
+import type {
+  ExperienceFilter,
+  LocationFilter,
+  RoleFilter,
+} from '~/utils/resumes/resumeFilters';
+import {
+  EXPERIENCES,
+  getFilterLabel,
+  LOCATIONS,
+  ROLES,
+} from '~/utils/resumes/resumeFilters';
+
 import type { Resume } from '~/types/resume';
 
 type Props = Readonly<{
@@ -19,8 +31,9 @@ type Props = Readonly<{
 export default function ResumeListItem({ href, resumeInfo }: Props) {
   return (
     <Link href={href}>
-      <div className="grid grid-cols-8 gap-4 border-b border-slate-200 p-4 hover:bg-slate-100">
-        <div className="col-span-4">
+      <div className="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">
             {resumeInfo.title}
             <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
               <div className="flex">
@@ -28,14 +41,17 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
                   aria-hidden="true"
                   className="mr-1.5 h-4 w-4 flex-shrink-0"
                 />
-              {resumeInfo.role}
+                {getFilterLabel(ROLES, resumeInfo.role as RoleFilter)}
               </div>
               <div className="ml-4 flex">
                 <AcademicCapIcon
                   aria-hidden="true"
                   className="mr-1.5 h-4 w-4 flex-shrink-0"
                 />
-              {resumeInfo.experience}
+                {getFilterLabel(
+                  EXPERIENCES,
+                  resumeInfo.experience as ExperienceFilter,
+                )}
               </div>
             </div>
             <div className="mt-4 flex justify-start text-xs text-slate-500">
@@ -57,13 +73,16 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
               </div>
             </div>
           </div>
-        <div className="col-span-3 self-center text-sm text-slate-500">
+          <div className="self-center text-sm text-slate-500 sm:col-span-3">
             <div>
               {`Uploaded ${formatDistanceToNow(resumeInfo.createdAt, {
                 addSuffix: true,
               })} by ${resumeInfo.user}`}
             </div>
-          <div className="mt-2 text-slate-400">{resumeInfo.location}</div>
+            <div className="mt-2 text-slate-400">
+              {getFilterLabel(LOCATIONS, resumeInfo.location as LocationFilter)}
+            </div>
+          </div>
         </div>
         <ChevronRightIcon className="col-span-1 w-8 self-center justify-self-center text-slate-400" />
       </div>

apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx

@@ -69,7 +69,7 @@ export function PrimaryFeatures() {
                     <div
                       key={feature.title}
                       className={clsx(
-                        'group relative rounded-full py-1 px-4 lg:rounded-r-none lg:rounded-l-xl lg:p-6',
+                        'group relative rounded-full lg:rounded-r-none lg:rounded-l-xl lg:p-6',
                         selectedIndex === featureIndex
                           ? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10'
                           : 'hover:bg-white/10 lg:hover:bg-white/5',
@@ -77,6 +77,7 @@ export function PrimaryFeatures() {
                       <h3>
                         <Tab
                           className={clsx(
+                            'rounded-full py-1 px-4',
                             'font-display text-lg [&:not(:focus-visible)]:focus:outline-none',
                             selectedIndex === featureIndex
                               ? 'text-blue-600 lg:text-white'
@@ -88,7 +89,7 @@ export function PrimaryFeatures() {
                       </h3>
                       <p
                         className={clsx(
-                          'mt-2 hidden text-sm lg:block',
+                          'mt-2 hidden px-4 text-sm lg:block',
                           selectedIndex === featureIndex
                             ? 'text-white'
                             : 'text-blue-100 group-hover:text-white',

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

@@ -23,12 +23,15 @@ import ResumePdf from '~/components/resumes/ResumePdf';
 import ResumeExpandableText from '~/components/resumes/shared/ResumeExpandableText';
 
 import type {
+  ExperienceFilter,
   FilterOption,
   LocationFilter,
+  RoleFilter,
 } from '~/utils/resumes/resumeFilters';
 import {
   BROWSE_TABS_VALUES,
   EXPERIENCES,
+  getFilterLabel,
   INITIAL_FILTER_STATE,
   LOCATIONS,
   ROLES,
@@ -36,10 +39,6 @@ import {
 import { trpc } from '~/utils/trpc';
 
 import SubmitResumeForm from './submit';
-import type {
-  ExperienceFilter,
-  RoleFilter,
-} from '../../utils/resumes/resumeFilters';
 
 export default function ResumeReviewPage() {
   const ErrorPage = (
@@ -213,7 +212,7 @@ export default function ResumeReviewPage() {
           <Head>
             <title>{detailsQuery.data.title}</title>
           </Head>
-          <main className="h-[calc(100vh-2rem)] flex-1 space-y-2 overflow-y-auto py-4 px-8 xl:px-12 2xl:pr-16">
+          <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">
                 {detailsQuery.data.title}
@@ -293,7 +292,7 @@ export default function ResumeReviewPage() {
                       roleLabel: detailsQuery.data?.role,
                     })
                   }>
-                  {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">
@@ -309,7 +308,10 @@ export default function ResumeReviewPage() {
                       locationLabel: detailsQuery.data?.location,
                     })
                   }>
-                  {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">
@@ -325,7 +327,10 @@ export default function ResumeReviewPage() {
                       experienceLabel: detailsQuery.data?.experience,
                     })
                   }>
-                  {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">

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

@@ -10,7 +10,6 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline';
 import {
-  Button,
   CheckboxInput,
   CheckboxList,
   DropdownMenu,
@@ -28,6 +27,7 @@ import type { Filter, FilterId, Shortcut } from '~/utils/resumes/resumeFilters';
 import {
   BROWSE_TABS_VALUES,
   EXPERIENCES,
+  getFilterLabel,
   INITIAL_FILTER_STATE,
   isInitialFilterState,
   LOCATIONS,
@@ -432,7 +432,7 @@ export default function ResumeHomePage() {
         </Transition.Root>
       </div>
 
-      <main className="h-[calc(100vh-4rem)] flex-auto px-8 pb-4">
+      <main className="h-full flex-auto px-8 pb-4">
         <div className="flex justify-start">
           <div className="fixed top-0 bottom-0 mt-24 hidden w-64 overflow-auto lg:block">
             <h3 className="text-md font-medium tracking-tight text-gray-900">
@@ -518,7 +518,7 @@ export default function ResumeHomePage() {
             </div>
           </div>
           <div className="relative lg:left-64 lg:w-[calc(100%-16rem)]">
-            <div className="lg:border-grey-200 sticky top-0 z-0 flex flex-wrap items-center justify-between pt-6 pb-2 lg:border-b">
+            <div className="lg:border-grey-200 sticky top-0 z-10 flex flex-wrap items-center justify-between pt-6 pb-2 lg:border-b">
               <div className="border-grey-200 mb-4 flex w-full justify-between border-b pb-2 lg:mb-0 lg:w-auto lg:border-none lg:pb-0">
                 <div>
                   <Tabs
@@ -541,12 +541,6 @@ export default function ResumeHomePage() {
                     onChange={onTabChange}
                   />
                 </div>
-                <Button
-                  className="whitespace-pre-wrap px-2 lg:hidden"
-                  label="Submit Resume"
-                  variant="primary"
-                  onClick={onSubmitResume}
-                />
               </div>
               <div className="flex flex-wrap items-center justify-start gap-6">
                 <div className="w-64">
@@ -561,19 +555,10 @@ export default function ResumeHomePage() {
                     onChange={setSearchValue}
                   />
                 </div>
-                <Button
-                  className="lg:hidden"
-                  icon={FunnelIcon}
-                  isLabelHidden={true}
-                  label="Filters"
-                  variant="tertiary"
-                  onClick={() => setMobileFiltersOpen(true)}
-                />
+                <div>
                   <DropdownMenu
                     align="end"
-                  label={
-                    SORT_OPTIONS.find(({ value }) => value === sortOrder)?.label
-                  }>
+                    label={getFilterLabel(SORT_OPTIONS, sortOrder)}>
                     {SORT_OPTIONS.map(({ label, value }) => (
                       <DropdownMenu.Item
                         key={value}
@@ -582,12 +567,22 @@ export default function ResumeHomePage() {
                         onClick={() => setSortOrder(value)}></DropdownMenu.Item>
                     ))}
                   </DropdownMenu>
-                <Button
-                  className="hidden lg:block"
-                  label="Submit Resume"
-                  variant="primary"
-                  onClick={onSubmitResume}
-                />
+                </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 block w-36 rounded-md py-2 px-3 text-sm font-medium text-white"
+                    type="button"
+                    onClick={onSubmitResume}>
+                    Submit Resume
+                  </button>
+                </div>
               </div>
             </div>
             {isFetchingResumes ? (

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

@@ -11,7 +11,7 @@ export default function Home() {
         <title>Resume Review</title>
       </Head>
 
-      <main className="h-[calc(100vh-2rem)] w-full overflow-y-auto">
+      <main className="h-full w-full overflow-y-auto">
         <Hero />
         <PrimaryFeatures />
         <CallToAction />

apps/portal/src/utils/resumes/resumeFilters.ts

@@ -51,12 +51,6 @@ export const BROWSE_TABS_VALUES = {
   STARRED: 'starred',
 };
 
-// Export const SORT_OPTIONS: Record<string, SortOrder> = {
-//   LATEST: 'latest',
-//   POPULAR: 'popular',
-//   TOPCOMMENTS: 'topComments',
-// };
-
 export const SORT_OPTIONS: Array<FilterOption<SortOrder>> = [
   { label: 'Latest', value: 'latest' },
   { label: 'Popular', value: 'popular' },
@@ -149,3 +143,10 @@ export const isInitialFilterState = (filters: FilterState) =>
       filters[filter as FilterId].includes(value),
     );
   });
+
+export const getFilterLabel = (
+  filters: Array<
+    FilterOption<ExperienceFilter | LocationFilter | RoleFilter | SortOrder>
+  >,
+  filterValue: ExperienceFilter | LocationFilter | RoleFilter | SortOrder,
+) => filters.find(({ value }) => value === filterValue)?.label ?? filterValue;

packages/ui/src/Pagination/Pagination.tsx

@@ -85,7 +85,7 @@ export default function Pagination({
   }
 
   if (lastAddedPage < current - pagePadding - 1) {
-    elements.push(<PaginationEllipsis />);
+    elements.push(<PaginationEllipsis key="ellipse-1" />);
   }
 
   for (let i = current - pagePadding; i <= current + pagePadding; i++) {
@@ -93,7 +93,7 @@ export default function Pagination({
   }
 
   if (lastAddedPage < end - pagePadding - 1) {
-    elements.push(<PaginationEllipsis />);
+    elements.push(<PaginationEllipsis key="ellipse-2" />);
   }
 
   for (let i = end - pagePadding; i <= end; i++) {