From 720759628dac917e68a44cc87dbf3e8b89c4e574 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Fri, 28 Oct 2022 18:37:01 +0800
Subject: [PATCH] [offers][fix] tweak hero (#445)

* [portal][ui] increase font size of global elements

* [offers] tweak hero

* change some sizes

* tweak again
---
 .../portal/src/components/global/AppShell.tsx |   4 +-
 .../components/global/ProductNavigation.tsx   |  14 +-
 .../src/components/offers/OffersNavigation.ts |   6 +-
 .../src/components/offers/OffersTitle.tsx     |  18 ---
 .../src/components/offers/table/OffersRow.tsx |  14 +-
 .../components/offers/table/OffersTable.tsx   | 132 +++++++++++-------
 .../components/shared/CompaniesTypeahead.tsx  |   1 +
 .../components/shared/JobTitlesTypahead.tsx   |   1 +
 apps/portal/src/pages/offers/browse.tsx       |  56 +++++---
 apps/portal/src/pages/offers/index.tsx        |   2 +-
 10 files changed, 139 insertions(+), 109 deletions(-)
 delete mode 100644 apps/portal/src/components/offers/OffersTitle.tsx

diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index 20306d7f..fbdfa6aa 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/apps/portal/src/components/global/AppShell.tsx
@@ -33,7 +33,7 @@ function ProfileJewel() {
   if (session == null) {
     return (
       <Link
-        className="text-sm font-medium"
+        className="text-base"
         href="/api/auth/signin"
         onClick={(event) => {
           event.preventDefault();
@@ -169,7 +169,6 @@ export default function AppShell({ children }: Props) {
             </div>
           </div>
         )}
-
         {/* Mobile menu */}
         <MobileNavigation
           globalNavigationItems={GlobalNavigation}
@@ -178,7 +177,6 @@ export default function AppShell({ children }: Props) {
           productTitle={currentProductNavigation.title}
           setIsShown={setMobileMenuOpen}
         />
-
         {/* Content area */}
         <div className="flex h-screen flex-1 flex-col overflow-hidden">
           <header className="w-full">
diff --git a/apps/portal/src/components/global/ProductNavigation.tsx b/apps/portal/src/components/global/ProductNavigation.tsx
index effb232c..6b6b857c 100644
--- a/apps/portal/src/components/global/ProductNavigation.tsx
+++ b/apps/portal/src/components/global/ProductNavigation.tsx
@@ -27,10 +27,14 @@ export default function ProductNavigation({ items, title, titleHref }: Props) {
   return (
     <nav aria-label="Global" className="flex h-full items-center space-x-8">
       <Link
-        className="hover:text-primary-700 flex items-center gap-2 text-sm font-medium"
+        className="hover:text-primary-700 flex items-center gap-2 text-base font-medium"
         href={titleHref}>
         {titleHref !== '/' && (
-          <img alt="TIH" className="h-8 w-auto" src="/logo.svg" />
+          <img
+            alt="Tech Interview Handbook"
+            className="h-8 w-auto"
+            src="/logo.svg"
+          />
         )}
         {title}
       </Link>
@@ -39,7 +43,7 @@ export default function ProductNavigation({ items, title, titleHref }: Props) {
           const isActive = router.pathname === item.href;
           return item.children != null && item.children.length > 0 ? (
             <Menu key={item.name} as="div" className="relative text-left">
-              <Menu.Button className="focus:ring-primary-600 flex items-center rounded-md text-sm font-medium text-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
+              <Menu.Button className="focus:ring-primary-600 flex items-center rounded-md text-base font-medium text-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
                 <span>{item.name}</span>
                 <ChevronDownIcon
                   aria-hidden="true"
@@ -62,7 +66,7 @@ export default function ProductNavigation({ items, title, titleHref }: Props) {
                           <Link
                             className={clsx(
                               active ? 'bg-slate-100' : '',
-                              'block px-4 py-2 text-sm text-slate-700',
+                              'block px-4 py-2 text-base text-slate-700',
                             )}
                             href={child.href}
                             rel={
@@ -84,7 +88,7 @@ export default function ProductNavigation({ items, title, titleHref }: Props) {
             <Link
               key={item.name}
               className={clsx(
-                'hover:text-primary-600 inline-flex h-full items-center border-y-2 border-t-transparent text-sm text-slate-900',
+                'hover:text-primary-600 inline-flex h-full items-center border-y-2 border-t-transparent text-base text-slate-900',
                 isActive ? 'border-b-primary-500' : 'border-b-transparent',
               )}
               href={item.href}
diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.ts
index 428df8c2..c1ae24e1 100644
--- a/apps/portal/src/components/offers/OffersNavigation.ts
+++ b/apps/portal/src/components/offers/OffersNavigation.ts
@@ -1,8 +1,8 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  { href: '/offers/browse', name: 'Browse' },
-  { href: '/offers/submit', name: 'Analyse your offers' },
+  { href: '/offers/browse', name: 'Browse all offers' },
+  { href: '/offers/submit', name: 'Analyze your offers' },
 ];
 
 const config = {
@@ -10,7 +10,7 @@ const config = {
   googleAnalyticsMeasurementID: 'G-DBLZDQ2ZZN',
   navigation,
   showGlobalNav: false,
-  title: 'Offer Profile Repository',
+  title: 'Tech Offers Repo',
   titleHref: '/offers',
 };
 
diff --git a/apps/portal/src/components/offers/OffersTitle.tsx b/apps/portal/src/components/offers/OffersTitle.tsx
deleted file mode 100644
index 52798611..00000000
--- a/apps/portal/src/components/offers/OffersTitle.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-export default function OffersTitle() {
-  return (
-    <>
-      <div className="flex items-end justify-center">
-        <h1 className="text-primary-600 mt-16 text-center text-4xl font-bold">
-          Offer Profile Repository
-        </h1>
-      </div>
-      <div className="text-primary-500 mt-2 text-center text-2xl font-normal">
-        Reveal profile stories behind offers
-      </div>
-      <div className="items-top flex justify-center text-xl font-normal">
-        Click into offers to view profiles, benchmark your offers and profiles,
-        and discuss with the community
-      </div>
-    </>
-  );
-}
diff --git a/apps/portal/src/components/offers/table/OffersRow.tsx b/apps/portal/src/components/offers/table/OffersRow.tsx
index 1f4d8856..dbde12a8 100644
--- a/apps/portal/src/components/offers/table/OffersRow.tsx
+++ b/apps/portal/src/components/offers/table/OffersRow.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import Link from 'next/link';
 
 import type { JobTitleType } from '~/components/shared/JobTitles';
@@ -14,12 +15,8 @@ export default function OfferTableRow({
   row: { company, id, income, monthYearReceived, profileId, title, totalYoe },
 }: OfferTableRowProps) {
   return (
-    <tr
-      key={id}
-      className="border-b bg-white hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-600">
-      <th
-        className="whitespace-nowrap py-4 px-6 font-medium text-slate-900 dark:text-white"
-        scope="row">
+    <tr key={id} className="divide-x divide-slate-200 border-b bg-white">
+      <th className="whitespace-nowrap py-4 px-6 font-medium" scope="row">
         {company.name}
       </th>
       <td className="py-4 px-6">
@@ -28,7 +25,10 @@ export default function OfferTableRow({
       <td className="py-4 px-6">{totalYoe}</td>
       <td className="py-4 px-6">{convertMoneyToString(income)}</td>
       <td className="py-4 px-6">{formatDate(monthYearReceived)}</td>
-      <td className="space-x-4 py-4 px-6">
+      <td
+        className={clsx(
+          'sticky right-0 bg-white py-4 px-6 drop-shadow md:drop-shadow-none',
+        )}>
         <Link
           className="text-primary-600 dark:text-primary-500 font-medium hover:underline"
           href={`/offers/profile/${profileId}`}>
diff --git a/apps/portal/src/components/offers/table/OffersTable.tsx b/apps/portal/src/components/offers/table/OffersTable.tsx
index 3801d7b0..4ce1e0f9 100644
--- a/apps/portal/src/components/offers/table/OffersTable.tsx
+++ b/apps/portal/src/components/offers/table/OffersTable.tsx
@@ -1,5 +1,6 @@
+import clsx from 'clsx';
 import { useEffect, useState } from 'react';
-import { HorizontalDivider, Select, Spinner, Tabs } from '@tih/ui';
+import { DropdownMenu, Spinner } from '@tih/ui';
 
 import OffersTablePagination from '~/components/offers/table/OffersTablePagination';
 import {
@@ -71,55 +72,84 @@ export default function OffersTable({
     },
   );
 
-  function renderTabs() {
-    return (
-      <div className="flex justify-center">
-        <div className="w-fit">
-          <Tabs
-            label="Table Navigation"
-            tabs={OfferTableTabOptions}
-            value={selectedTab}
-            onChange={(value) => setSelectedTab(value)}
-          />
-        </div>
-      </div>
-    );
-  }
-
   function renderFilters() {
     return (
       <div className="m-4 flex items-center justify-between">
-        <div className="justify-left flex items-center space-x-2">
-          <span>All offers in</span>
-          <CurrencySelector
-            handleCurrencyChange={(value: string) => setCurrency(value)}
-            selectedCurrency={currency}
-          />
+        <DropdownMenu
+          align="start"
+          label={
+            OfferTableTabOptions.filter(
+              ({ value: itemValue }) => itemValue === selectedTab,
+            )[0].label
+          }
+          size="inherit">
+          {OfferTableTabOptions.map(({ label: itemLabel, value }) => (
+            <DropdownMenu.Item
+              key={value}
+              isSelected={value === selectedTab}
+              label={itemLabel}
+              onClick={() => {
+                setSelectedTab(value);
+              }}
+            />
+          ))}
+        </DropdownMenu>
+        <div className="divide-x-slate-200 flex items-center space-x-4 divide-x">
+          <div className="justify-left flex items-center space-x-2">
+            <span>All offers in</span>
+            <CurrencySelector
+              handleCurrencyChange={(value: string) => setCurrency(value)}
+              selectedCurrency={currency}
+            />
+          </div>
+          <div className="pl-4">
+            <DropdownMenu
+              align="end"
+              label={
+                OfferTableFilterOptions.filter(
+                  ({ value: itemValue }) => itemValue === selectedFilter,
+                )[0].label
+              }
+              size="inherit">
+              {OfferTableFilterOptions.map(({ label: itemLabel, value }) => (
+                <DropdownMenu.Item
+                  key={value}
+                  isSelected={value === selectedFilter}
+                  label={itemLabel}
+                  onClick={() => {
+                    setSelectedFilter(value);
+                  }}
+                />
+              ))}
+            </DropdownMenu>
+          </div>
         </div>
-        <Select
-          isLabelHidden={true}
-          label=""
-          options={OfferTableFilterOptions}
-          value={selectedFilter}
-          onChange={(value) => setSelectedFilter(value)}
-        />
       </div>
     );
   }
 
   function renderHeader() {
+    const columns = [
+      'Company',
+      'Title',
+      'YOE',
+      selectedTab === YOE_CATEGORY.INTERN ? 'Monthly Salary' : 'Annual TC',
+      'Date Offered',
+      'Actions',
+    ];
     return (
-      <thead className="bg-slate-50 text-xs uppercase text-slate-700">
-        <tr>
-          {[
-            'Company',
-            'Title',
-            'YOE',
-            selectedTab === YOE_CATEGORY.INTERN ? 'Monthly Salary' : 'TC/year',
-            'Date offered',
-            'Actions',
-          ].map((header) => (
-            <th key={header} className="py-3 px-6" scope="col">
+      <thead className="text-slate-700">
+        <tr className="divide-x divide-slate-200">
+          {columns.map((header, index) => (
+            <th
+              key={header}
+              className={clsx(
+                'bg-slate-100 py-3 px-6',
+                // Make last column sticky.
+                index === columns.length - 1 &&
+                  'sticky right-0 drop-shadow md:drop-shadow-none',
+              )}
+              scope="col">
               {header}
             </th>
           ))}
@@ -136,23 +166,23 @@ export default function OffersTable({
 
   return (
     <div className="w-5/6">
-      {renderTabs()}
-      <HorizontalDivider />
-      <div className="relative w-full overflow-x-auto shadow-md sm:rounded-lg">
+      <div className="relative w-full border border-slate-200">
         {renderFilters()}
         {offersQuery.isLoading ? (
           <div className="col-span-10 pt-4">
             <Spinner display="block" size="lg" />
           </div>
         ) : (
-          <table className="w-full text-left text-sm text-slate-500">
-            {renderHeader()}
-            <tbody>
-              {offers.map((offer) => (
-                <OffersRow key={offer.id} row={offer} />
-              ))}
-            </tbody>
-          </table>
+          <div className="overflow-x-auto">
+            <table className="w-full divide-y divide-slate-200 border-y border-slate-200 text-left text-slate-600">
+              {renderHeader()}
+              <tbody>
+                {offers.map((offer) => (
+                  <OffersRow key={offer.id} row={offer} />
+                ))}
+              </tbody>
+            </table>
+          </div>
         )}
         <OffersTablePagination
           endNumber={
diff --git a/apps/portal/src/components/shared/CompaniesTypeahead.tsx b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
index ffc90f52..23d9c276 100644
--- a/apps/portal/src/components/shared/CompaniesTypeahead.tsx
+++ b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
@@ -45,6 +45,7 @@ export default function CompaniesTypeahead({
       }
       placeholder={placeHolder}
       required={required}
+      textSize="inherit"
       onQueryChange={setQuery}
       onSelect={onSelect}
     />
diff --git a/apps/portal/src/components/shared/JobTitlesTypahead.tsx b/apps/portal/src/components/shared/JobTitlesTypahead.tsx
index 036af8f1..b2e80fe9 100644
--- a/apps/portal/src/components/shared/JobTitlesTypahead.tsx
+++ b/apps/portal/src/components/shared/JobTitlesTypahead.tsx
@@ -41,6 +41,7 @@ export default function JobTitlesTypeahead({
       options={options}
       placeholder={placeHolder}
       required={required}
+      textSize="inherit"
       onQueryChange={setQuery}
       onSelect={onSelect}
     />
diff --git a/apps/portal/src/pages/offers/browse.tsx b/apps/portal/src/pages/offers/browse.tsx
index 31a9ab3c..dbfe6323 100644
--- a/apps/portal/src/pages/offers/browse.tsx
+++ b/apps/portal/src/pages/offers/browse.tsx
@@ -1,6 +1,7 @@
+import Link from 'next/link';
 import { useState } from 'react';
+import { Banner } from '@tih/ui';
 
-import OffersTitle from '~/components/offers/OffersTitle';
 import OffersTable from '~/components/offers/table/OffersTable';
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
@@ -11,26 +12,39 @@ export default function OffersHomePage() {
 
   return (
     <main className="flex-1 overflow-y-auto">
-      <div className="grid-rows grid h-1/2 bg-slate-100">
-        <OffersTitle />
-        <div className="flex items-start justify-center">
-          <div className="mt-4 flex items-center">
-            Viewing offers for
-            <div className="mx-4">
-              <JobTitlesTypeahead
-                isLabelHidden={true}
-                placeHolder="Software Engineer"
-                onSelect={({ value }) => setjobTitleFilter(value)}
-              />
-            </div>
-            in
-            <div className="ml-4">
-              <CompaniesTypeahead
-                isLabelHidden={true}
-                placeHolder="All Companies"
-                onSelect={({ value }) => setCompanyFilter(value)}
-              />
-            </div>
+      <Banner size="sm">
+        ⭐ Check if your offer is competitive by submitting it{' '}
+        <Link className="underline" href="/offers/submit">
+          here
+        </Link>
+        . ⭐
+      </Banner>
+      <div className="bg-slate-100 py-16 px-4">
+        <div>
+          <div>
+            <h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
+              Tech Offers Repo
+            </h1>
+          </div>
+          <div className="mt-4 text-center text-lg text-slate-600 sm:text-2xl">
+            Find out how good your offer is. Discover how others got their
+            offers.
+          </div>
+        </div>
+        <div className="mt-6 flex flex-col items-center justify-center space-y-2 text-base text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg">
+          <span>Viewing offers for</span>
+          <div className="flex items-center space-x-4">
+            <JobTitlesTypeahead
+              isLabelHidden={true}
+              placeHolder="Software Engineer"
+              onSelect={({ value }) => setjobTitleFilter(value)}
+            />
+            <span>in</span>
+            <CompaniesTypeahead
+              isLabelHidden={true}
+              placeHolder="All Companies"
+              onSelect={({ value }) => setCompanyFilter(value)}
+            />
           </div>
         </div>
       </div>
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index 11218b77..75471156 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -96,7 +96,7 @@ export default function LandingPage() {
             <div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
               <div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
                 <a
-                  className="border-grey-600 flex items-center justify-center rounded-md border bg-white bg-white px-4 py-3 text-base font-medium text-indigo-700 shadow-sm hover:bg-indigo-50 sm:px-8"
+                  className="border-grey-600 flex items-center justify-center rounded-md border bg-white px-4 py-3 text-base font-medium text-indigo-700 shadow-sm hover:bg-indigo-50 sm:px-8"
                   href={HOME_URL}>
                   Get started
                 </a>