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

apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx

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

apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx

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

apps/portal/src/components/offers/offersSubmission/OffersSubmissionAnalysis.tsx

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

apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx

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

apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx

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

apps/portal/src/server/router/offers/offers.ts

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