From d1956ca12a4f5fdb34647d82b86907a055b44f42 Mon Sep 17 00:00:00 2001 From: Zhang Ziqing <69516975+ziqing26@users.noreply.github.com> Date: Mon, 7 Nov 2022 17:34:02 +0800 Subject: [PATCH] [offers][feat] add header for pages (#526) * [offers][feat] add header for pages * [offers][fix] fix pronoun for toast * [offers][feat] fix index page description --- .../components/offers/OffersNavigation.tsx | 2 +- apps/portal/src/pages/index.tsx | 2 +- apps/portal/src/pages/offers/about.tsx | 137 ++++---- apps/portal/src/pages/offers/dashboard.tsx | 91 +++--- apps/portal/src/pages/offers/features.tsx | 309 +++++++++--------- apps/portal/src/pages/offers/index.tsx | 220 +++++++------ .../pages/offers/profile/[offerProfileId].tsx | 68 ++-- .../offers/profile/edit/[offerProfileId].tsx | 4 + apps/portal/src/pages/offers/submit.tsx | 11 +- apps/portal/src/pages/offers/submit/index.tsx | 11 +- .../offers/submit/result/[offerProfileId].tsx | 96 +++--- 11 files changed, 509 insertions(+), 442 deletions(-) diff --git a/apps/portal/src/components/offers/OffersNavigation.tsx b/apps/portal/src/components/offers/OffersNavigation.tsx index 11bc1856..53e4b4c8 100644 --- a/apps/portal/src/components/offers/OffersNavigation.tsx +++ b/apps/portal/src/components/offers/OffersNavigation.tsx @@ -8,7 +8,7 @@ const navigation: ProductNavigationItems = [ const navigationAuthenticated: ProductNavigationItems = [ { href: '/offers/submit', name: 'Analyze your offers' }, - { href: '/offers/dashboard', name: 'Your dashboard' }, + { href: '/offers/dashboard', name: 'My dashboard' }, { href: '/offers/features', name: 'Features' }, { href: '/offers/about', name: 'About' }, ]; diff --git a/apps/portal/src/pages/index.tsx b/apps/portal/src/pages/index.tsx index a16a0ec8..0e4c2e91 100644 --- a/apps/portal/src/pages/index.tsx +++ b/apps/portal/src/pages/index.tsx @@ -12,7 +12,7 @@ const features = [ }, { description: - 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', + 'Reveal stories behind offers. Help job seekers benchmark and analyse their anonymous offers with more context. Encourage discussions around offer profiles.', href: '/offers', img: '/logos/offers-logo.svg', name: 'Tech Offers', diff --git a/apps/portal/src/pages/offers/about.tsx b/apps/portal/src/pages/offers/about.tsx index cb29803e..8b6d35ea 100644 --- a/apps/portal/src/pages/offers/about.tsx +++ b/apps/portal/src/pages/offers/about.tsx @@ -1,3 +1,5 @@ +import Head from 'next/head'; + import Container from '~/components/shared/Container'; const people = [ @@ -29,75 +31,80 @@ const people = [ export default function AboutPage() { return ( -
- -
-
-

- About Tech Offers Repo -

-

- Tech Offers Repo, a project under the series of Tech Interview - Handbook (TIH), reveals the stories behind offers by focusing on - the profiles of the offer receivers. It helps job seekers - benchmark and analyse their anonymous offers with more context and - encourages discussions around offer profiles. -

-
- {/* Feedback */} -
-

- Feedback to Us -

+ <> + + About us - Tech Offers Repo + +
+ +
+
+

+ About Tech Offers Repo +

+

+ Tech Offers Repo, a project under the series of Tech Interview + Handbook (TIH), reveals the stories behind offers by focusing on + the profiles of the offer receivers. It helps job seekers + benchmark and analyse their anonymous offers with more context + and encourages discussions around offer profiles. +

+
+ {/* Feedback */} +
+

+ Feedback to Us +

-

- Thank you for using our platform! Feel free to submit your - feedback / feature request / bug report - - here - - . -

-
-
-

- Meet the Team -

-
    - {people.map((person) => ( -
  • -
    -
    - {person.name} -
    -
    -
    -
    -

    {person.name}

    -

    {person.role}

    -
    -
    -

    {person.bio}

    +

    + Thank you for using our platform! Feel free to submit your + feedback / feature request / bug report + + here + + . +

    +
    +
    +

    + Meet the Team +

    +
      + {people.map((person) => ( +
    • +
      +
      + {person.name} +
      +
      +
      +
      +

      {person.name}

      +

      {person.role}

      +
      +
      +

      {person.bio}

      +
      -
    -
    • - ))} -
+ + ))} + +
-
- -
+ +
+ ); } diff --git a/apps/portal/src/pages/offers/dashboard.tsx b/apps/portal/src/pages/offers/dashboard.tsx index bb3f5dc8..b397fddc 100644 --- a/apps/portal/src/pages/offers/dashboard.tsx +++ b/apps/portal/src/pages/offers/dashboard.tsx @@ -1,3 +1,4 @@ +import Head from 'next/head'; import { useRouter } from 'next/router'; import { signIn, useSession } from 'next-auth/react'; import { useState } from 'react'; @@ -45,53 +46,63 @@ export default function ProfilesDashboard() { if (userProfiles.length === 0) { return ( -
-
-
-

You have not saved any offer profiles yet.

-
-
-
-
+ ); } return ( - - {userProfilesQuery.isLoading && ( -
-
- + <> + + My Dashboard - Tech Offers Repo + + + {userProfilesQuery.isLoading && ( +
+
+ +
-
- )} - {!userProfilesQuery.isLoading && ( -
-

- Your dashboard -

-

- Save your offer profiles to your dashboard to easily access and edit - them later. -

-
-
    - {userProfiles?.map((profile) => ( -
  • - -
    • - ))} -
+ )} + {!userProfilesQuery.isLoading && ( +
+

+ My dashboard +

+

+ Save your offer profiles to your dashboard to easily access and + edit them later. +

+
+
    + {userProfiles?.map((profile) => ( +
  • + +
    • + ))} +
+
-
- )} - + )} + + ); } diff --git a/apps/portal/src/pages/offers/features.tsx b/apps/portal/src/pages/offers/features.tsx index 6457070e..ae97117b 100644 --- a/apps/portal/src/pages/offers/features.tsx +++ b/apps/portal/src/pages/offers/features.tsx @@ -1,3 +1,4 @@ +import Head from 'next/head'; import type { SVGProps } from 'react'; import { BookmarkSquareIcon, @@ -82,176 +83,182 @@ const footerNavigation = { export default function LandingPage() { return ( -
-
- {/* Hero section */} -
-
- Tech Offers Repo -

- Choosing offers - - made easier - -

-

- Analyze your offers using profiles from fellow software engineers. -

-
-
- - Get started - - {/* + + Features - Tech Offers Repo + + - {/* Alternating Feature Sections */} -
-
+ -
- -
-
-
- {footerNavigation.social.map((item) => ( - - {item.name} - - ))} +
+ +
+
+
+ {footerNavigation.social.map((item) => ( + + {item.name} + + ))} +
+

+ © 2022 Tech Offers Repo. All rights reserved. +

-

- © 2022 Tech Offers Repo. All rights reserved. -

-
-
-
+ +
+ ); } diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx index d0e820f4..6dc33e5d 100644 --- a/apps/portal/src/pages/offers/index.tsx +++ b/apps/portal/src/pages/offers/index.tsx @@ -1,3 +1,4 @@ +import Head from 'next/head'; import Link from 'next/link'; import { useState } from 'react'; import { MapPinIcon } from '@heroicons/react/24/outline'; @@ -27,118 +28,123 @@ export default function OffersHomePage() { useSearchParamSingle('jobTitleId'); return ( -
- - ⭐ Check if your offer is competitive by submitting it{' '} - - here - - . ⭐ - -
- - - - { - if (option) { - setCountryFilter(option.value); - gaEvent({ - action: `offers.table_filter_country_${option.value}`, - category: 'engagement', - label: 'Filter by country', - }); - } else { - setCountryFilter(''); - } - }} - /> -
-
-
+ <> + + Home - Tech Offers Repo + +
+ + ⭐ Check if your offer is competitive by submitting it{' '} + + here + + . ⭐ + +
+ + + + { + if (option) { + setCountryFilter(option.value); + gaEvent({ + action: `offers.table_filter_country_${option.value}`, + category: 'engagement', + label: 'Filter by country', + }); + } else { + setCountryFilter(''); + } + }} + /> +
+
-

- Tech Offers Repo -

-
-
- Find out how good your offer is. Discover how others got their - offers. +
+

+ Tech Offers Repo +

+
+
+ Find out how good your offer is. Discover how others got their + offers. +
-
-
- Viewing offers for -
- { - if (option) { - setSelectedJobTitleId(option.id as JobTitleType); - gaEvent({ - action: `offers.table_filter_job_title_${option.value}`, - category: 'engagement', - label: 'Filter by job title', - }); - } else { - setSelectedJobTitleId(null); +
+ Viewing offers for +
+ - in - { - if (option) { - setSelectedCompanyId(option.id); - setSelectedCompanyName(option.label); - gaEvent({ - action: `offers.table_filter_company_${option.value}`, - category: 'engagement', - label: 'Filter by company', - }); - } else { - setSelectedCompanyId(''); - setSelectedCompanyName(''); + onSelect={(option) => { + if (option) { + setSelectedJobTitleId(option.id as JobTitleType); + gaEvent({ + action: `offers.table_filter_job_title_${option.value}`, + category: 'engagement', + label: 'Filter by job title', + }); + } else { + setSelectedJobTitleId(null); + } + }} + /> + in + + onSelect={(option) => { + if (option) { + setSelectedCompanyId(option.id); + setSelectedCompanyName(option.label); + gaEvent({ + action: `offers.table_filter_company_${option.value}`, + category: 'engagement', + label: 'Filter by company', + }); + } else { + setSelectedCompanyId(''); + setSelectedCompanyName(''); + } + }} + /> +
-
- - - -
+ + + +
+ ); } diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx index f15e38f0..144e6585 100644 --- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx +++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx @@ -1,4 +1,5 @@ import Error from 'next/error'; +import Head from 'next/head'; import { useRouter } from 'next/router'; import { useSession } from 'next-auth/react'; import { useState } from 'react'; @@ -201,42 +202,49 @@ export default function OfferProfile() {
) : ( -
-
-
- + <> + + + {background?.profileName ? background.profileName : 'View profile'} + + +
+
+
+ +
+
+ +
-
- +
-
- -
-
+ ); } diff --git a/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx index 2b50c275..647e5c8f 100644 --- a/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx +++ b/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx @@ -1,4 +1,5 @@ import Error from 'next/error'; +import Head from 'next/head'; import { useRouter } from 'next/router'; import { useState } from 'react'; import { JobType } from '@prisma/client'; @@ -88,6 +89,9 @@ export default function OffersEditPage() { return ( <> + + Edit profile + {getProfileResult.isError && (
diff --git a/apps/portal/src/pages/offers/submit.tsx b/apps/portal/src/pages/offers/submit.tsx index df2015f1..2cbef615 100644 --- a/apps/portal/src/pages/offers/submit.tsx +++ b/apps/portal/src/pages/offers/submit.tsx @@ -1,5 +1,14 @@ +import Head from 'next/head'; + import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm'; export default function OffersSubmissionPage() { - return ; + return ( + <> + + Analyze your offers + + + + ); } diff --git a/apps/portal/src/pages/offers/submit/index.tsx b/apps/portal/src/pages/offers/submit/index.tsx index df2015f1..2cbef615 100644 --- a/apps/portal/src/pages/offers/submit/index.tsx +++ b/apps/portal/src/pages/offers/submit/index.tsx @@ -1,5 +1,14 @@ +import Head from 'next/head'; + import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm'; export default function OffersSubmissionPage() { - return ; + return ( + <> + + Analyze your offers + + + + ); } diff --git a/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx b/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx index 26f0d81d..a7480b56 100644 --- a/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx +++ b/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx @@ -1,4 +1,5 @@ import Error from 'next/error'; +import Head from 'next/head'; import { useRouter } from 'next/router'; import { useSession } from 'next-auth/react'; import { useEffect, useRef, useState } from 'react'; @@ -92,52 +93,57 @@ export default function OffersSubmissionResult() { title="You do not have permissions to access this page" /> ) : ( -
-
-
-
- -
-
- {steps[step]} - {step === 0 && ( -
-
- )} - {step === 1 && ( -
-
- )} + <> + + View the result + +
+
+
+
+ +
+
+ {steps[step]} + {step === 0 && ( +
+
+ )} + {step === 1 && ( +
+
+ )} +
-
+ ); -} \ No newline at end of file +}