[offers][refactor] tweak submit and analysis steps UI

This commit is contained in:
Yangshun Tay
2022-11-02 17:03:35 +08:00
parent 55e93102de
commit 48dccb821e
6 changed files with 111 additions and 99 deletions

View File

@ -1,6 +1,6 @@
import { useEffect } from 'react';
import { useState } from 'react';
import { HorizontalDivider, Spinner, Tabs } from '@tih/ui';
import { Alert, HorizontalDivider, Spinner, Tabs } from '@tih/ui';
import OfferPercentileAnalysisText from './OfferPercentileAnalysisText';
import OfferProfileCard from './OfferProfileCard';
@ -22,17 +22,19 @@ function OfferAnalysisContent({
if (!analysis || analysis.noOfOffers === 0) {
if (tab === OVERALL_TAB) {
return (
<p className="m-10">
You are the first to submit an offer for your job title and YOE! Check
back later when there are more submissions.
</p>
<Alert title="Insufficient data to compare with" variant="info">
You are among the first to submit an offer for your job title and
years of experience! Check back later when there are more submissions.
</Alert>
);
}
return (
<p className="m-10">
You are the first to submit an offer for this company, job title and
YOE! Check back later when there are more submissions.
</p>
<Alert title="Insufficient data to compare with" variant="info">
You are among the first to submit an offer for this company, job title
and years of experience! Check back later when there are more
submissions.
</Alert>
);
}
return (

View File

@ -73,18 +73,24 @@ export default function OffersProfileSave({
};
return (
<div className="flex w-full justify-center">
<div className="flex w-full justify-center pb-10">
<div className="max-w-2xl text-center">
<h5 className="mb-6 text-4xl font-bold text-slate-900">
<h2 className="block text-center text-3xl font-bold leading-8 tracking-tight text-gray-900 sm:text-4xl">
Save for future edits
</h5>
<p className="mb-2 text-slate-900">We value your privacy.</p>
<p className="mb-5 text-slate-900">
To keep you offer profile strictly anonymous, only people who have the
link below can edit it.
</h2>
<p className="mt-4 text-xl leading-8 text-slate-500">
We value your privacy
</p>
<div className="mb-20 grid grid-cols-12 gap-4">
<div className="col-span-11">
<div className="mt-6 max-w-md text-slate-500">
<div className="bg-info-50 rounded-lg p-6">
<p className="sm:tex-base text-sm">
To keep your offer profile strictly anonymous, it is not linked to
your user account. Only people who have the link below can edit
it. If you want to edit the profile in future, store the link
somewhere.
</p>
<div className="mt-4 flex gap-4">
<div className="grow">
<TextInput
disabled={true}
isLabelHidden={true}
@ -96,7 +102,7 @@ export default function OffersProfileSave({
icon={DocumentDuplicateIcon}
isLabelHidden={true}
label="Copy"
variant="primary"
variant="info"
onClick={() => {
copyProfileLink(profileId, token);
showToast({
@ -111,22 +117,25 @@ export default function OffersProfileSave({
}}
/>
</div>
<p className="mb-5 text-slate-900">
If you do not want to keep the edit link, you can opt to save this
profile under your account's dashboard. It will still only be editable
by you.
</div>
<p className="mt-6 text-xs sm:text-sm">
If you do not want to manually store the link somewhere else, you
can add this offers profile to your user account by clicking the
button below. It will still only be editable by you.
</p>
<div className="mb-20">
<div className="mt-6">
<Button
disabled={isSavedQuery.isLoading || isSaved}
icon={isSaved ? CheckIcon : BookmarkSquareIcon}
isLoading={saveMutation.isLoading || isSavedQuery.isLoading}
label={isSaved ? 'Saved to user profile' : 'Save to user profile'}
variant="primary"
label={isSaved ? 'Added to account' : 'Add to your account'}
size="sm"
variant="secondary"
onClick={handleSave}
/>
</div>
</div>
</div>
</div>
);
}

View File

@ -15,10 +15,12 @@ export default function OffersSubmissionAnalysis({
return (
<div className="mb-8">
<h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
Result
Offer Analysis
</h5>
{!analysis && (
<p className="mb-8 text-center">Error generating analysis.</p>
<p className="text-error-500 mb-8 text-center">
Error generating analysis.
</p>
)}
{analysis && (
<OfferAnalysis

View File

@ -267,7 +267,7 @@ export default function OffersSubmissionForm({
<div ref={pageRef} className="w-full overflow-y-scroll">
<div className="flex justify-center">
<div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
<div className="bg-primary-100 flex justify-center px-4 py-4 sm:px-6 lg:px-8">
<div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
<Breadcrumbs
currentStep={step}
setStep={setStep}

View File

@ -78,16 +78,17 @@ export default function OffersSubmissionResult() {
</div>
)}
{!getAnalysis.isLoading && (
<div ref={pageRef} className="fixed h-full w-full overflow-y-scroll">
<div className="mb-20 flex justify-center">
<div className="my-5 block w-full max-w-screen-md rounded-lg bg-white py-10 px-10 shadow-lg">
<div className="mb-4 flex justify-end">
<div ref={pageRef} className="w-full overflow-y-scroll">
<div className="flex justify-center">
<div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
<div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
<Breadcrumbs
currentStep={step}
setStep={setStep}
steps={breadcrumbSteps}
/>
</div>
<div className="bg-white p-6 sm:p-10">
{steps[step]}
{step === 0 && (
<div className="flex justify-end">
@ -95,7 +96,7 @@ export default function OffersSubmissionResult() {
disabled={false}
icon={ArrowRightIcon}
label="Next"
variant="secondary"
variant="primary"
onClick={() => setStep(step + 1)}
/>
</div>
@ -123,6 +124,7 @@ export default function OffersSubmissionResult() {
</div>
</div>
</div>
</div>
)}
</>
);

View File

@ -12,10 +12,7 @@ import { createValidationRegex } from '~/utils/offers/zodRegex';
import { createRouter } from '../context';
const getOrder = (prefix: string) => {
if (prefix === '+') {
return 'asc';
}
return 'desc';
return prefix === '+' ? 'asc' : 'desc';
};
const sortingKeysMap = {