From 10e735a6bd583c84d5cc27d2a16b88d3b72690bc Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Thu, 27 Oct 2022 19:56:09 +0800
Subject: [PATCH] tweak again

---
 .../components/global/ProductNavigation.tsx   |   6 +-
 .../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       |  14 +-
 6 files changed, 102 insertions(+), 66 deletions(-)

diff --git a/apps/portal/src/components/global/ProductNavigation.tsx b/apps/portal/src/components/global/ProductNavigation.tsx
index be1ff172..6b6b857c 100644
--- a/apps/portal/src/components/global/ProductNavigation.tsx
+++ b/apps/portal/src/components/global/ProductNavigation.tsx
@@ -30,7 +30,11 @@ export default function ProductNavigation({ items, title, titleHref }: Props) {
         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>
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 fd658149..dbfe6323 100644
--- a/apps/portal/src/pages/offers/browse.tsx
+++ b/apps/portal/src/pages/offers/browse.tsx
@@ -12,28 +12,28 @@ export default function OffersHomePage() {
 
   return (
     <main className="flex-1 overflow-y-auto">
-      <Banner>
+      <Banner size="sm">
         ⭐ Check if your offer is competitive by submitting it{' '}
         <Link className="underline" href="/offers/submit">
           here
         </Link>
         . ⭐
       </Banner>
-      <div className="space-y-6 bg-stone-100 py-16">
+      <div className="bg-slate-100 py-16 px-4">
         <div>
           <div>
-            <h1 className="text-primary-600 text-center text-6xl font-bold">
+            <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-3xl text-slate-600">
+          <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="flex items-start justify-center">
-          <div className="mt-4 flex items-center space-x-4 text-lg text-slate-500">
-            <span>Viewing offers for</span>
+        <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"