algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 04:33:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

[offers][fix] tweak hero (#445)

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

* [offers] tweak hero

* change some sizes

* tweak again
This commit is contained in:
Yangshun Tay
2022-10-28 18:37:01 +08:00
committed by GitHub
parent d8d4b0f092
commit 720759628d
10 changed files with 139 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/portal/src/components/global/AppShell.tsx
View File

@ -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">

14
apps/portal/src/components/global/ProductNavigation.tsx
View File

@ -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}

6
apps/portal/src/components/offers/OffersNavigation.ts
View File

@ -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',
};

18
apps/portal/src/components/offers/OffersTitle.tsx
View File

@ -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>
</>
);
}

14
apps/portal/src/components/offers/table/OffersRow.tsx
View File

@ -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}`}>

98
apps/portal/src/components/offers/table/OffersTable.tsx
View File

@ -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,24 +72,29 @@ 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">
<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
@ -96,30 +102,54 @@ export default function OffersTable({
selectedCurrency={currency}
/>
</div>
<Select
isLabelHidden={true}
label=""
options={OfferTableFilterOptions}
value={selectedFilter}
onChange={(value) => setSelectedFilter(value)}
<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>
</div>
);
}
function renderHeader() {
return (
<thead className="bg-slate-50 text-xs uppercase text-slate-700">
<tr>
{[
const columns = [
'Company',
'Title',
'YOE',
selectedTab === YOE_CATEGORY.INTERN ? 'Monthly Salary' : 'TC/year',
'Date offered',
selectedTab === YOE_CATEGORY.INTERN ? 'Monthly Salary' : 'Annual TC',
'Date Offered',
'Actions',
].map((header) => (
<th key={header} className="py-3 px-6" scope="col">
];
return (
<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,16 +166,15 @@ 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">
<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) => (
@ -153,6 +182,7 @@ export default function OffersTable({
))}
</tbody>
</table>
</div>
)}
<OffersTablePagination
endNumber={

1
apps/portal/src/components/shared/CompaniesTypeahead.tsx
View File

@ -45,6 +45,7 @@ export default function CompaniesTypeahead({
}
placeholder={placeHolder}
required={required}
textSize="inherit"
onQueryChange={setQuery}
onSelect={onSelect}
/>

1
apps/portal/src/components/shared/JobTitlesTypahead.tsx
View File

@ -41,6 +41,7 @@ export default function JobTitlesTypeahead({
options={options}
placeholder={placeHolder}
required={required}
textSize="inherit"
onQueryChange={setQuery}
onSelect={onSelect}
/>

36
apps/portal/src/pages/offers/browse.tsx
View File

@ -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,20 +12,34 @@ 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">
<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)}
/>
</div>
in
<div className="ml-4">
<span>in</span>
<CompaniesTypeahead
isLabelHidden={true}
placeHolder="All Companies"
@ -33,7 +48,6 @@ export default function OffersHomePage() {
</div>
</div>
</div>
</div>
<div className="flex justify-center bg-white pb-20 pt-10">
<OffersTable
companyFilter={companyFilter}

2
apps/portal/src/pages/offers/index.tsx
View File

@ -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>