[offers][feat] tweak breadcrumbs

apps/portal/src/components/offers/Breadcrumb.tsx

@@ -1,45 +1,50 @@
-export type BreadcrumbStep = {
+import clsx from 'clsx';
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
+
+export type BreadcrumbStep = Readonly<{
   label: string;
   step?: number;
-};
+}>;
 
 type BreadcrumbsProps = Readonly<{
   currentStep: number;
   setStep: (nextStep: number) => void;
-  steps: Array<BreadcrumbStep>;
+  steps: ReadonlyArray<BreadcrumbStep>;
 }>;
 
-function getPrimaryText(text: string) {
-  return <p className="text-primary-700 text-sm">{text}</p>;
-}
-
-function getSlateText(text: string) {
-  return <p className="text-sm text-slate-400">{text}</p>;
-}
-
-function getTextWithLink(text: string, onClickHandler: () => void) {
-  return (
-    <p
-      className="hover:text-primary-700 cursor-pointer text-sm text-slate-400 hover:underline hover:underline-offset-2"
-      onClick={onClickHandler}>
-      {text}
-    </p>
-  );
-}
-
 export function Breadcrumbs({ steps, currentStep, setStep }: BreadcrumbsProps) {
   return (
-    <div className="flex space-x-1">
+    <nav aria-label="Submit offer stages" className="inline-flex">
+      <ol className="mx-auto flex w-full space-x-2 sm:space-x-4" role="list">
         {steps.map(({ label, step }, index) => (
-        <div key={label} className="flex space-x-1">
-          {step === currentStep
-            ? getPrimaryText(label)
-            : step !== undefined
-            ? getTextWithLink(label, () => setStep(step))
-            : getSlateText(label)}
-          {index !== steps.length - 1 && getSlateText('>')}
-        </div>
+          <li key={step} className="flex items-center">
+            {index > 0 && (
+              <ChevronRightIcon
+                aria-hidden="true"
+                className="h-5 w-5 flex-shrink-0 text-slate-400"
+              />
+            )}
+            <button
+              aria-current={step === currentStep ? 'page' : undefined}
+              className={clsx(
+                'text-xs font-medium text-slate-600 sm:text-sm',
+                index > 0 && 'ml-4',
+                step != null ? 'hover:text-primary-500' : 'cursor-default',
+                step === currentStep && 'text-primary-500',
+              )}
+              type="button"
+              {...(step != null
+                ? {
+                    onClick: () => {
+                      setStep(step);
+                    },
+                  }
+                : {})}>
+              {label}
+            </button>
+          </li>
         ))}
-    </div>
+      </ol>
+    </nav>
   );
 }

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

@@ -266,14 +266,15 @@ export default function OffersSubmissionForm({
   return (
     <div ref={pageRef} className="w-full overflow-y-scroll">
       <div className="flex justify-center">
-        <div className="block w-full max-w-screen-md rounded-lg bg-white p-6 sm:p-10 sm:shadow-lg md:my-10">
-          <div className="mb-8 flex justify-end">
+        <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">
             <Breadcrumbs
               currentStep={step}
               setStep={setStep}
               steps={breadcrumbSteps}
             />
           </div>
+          <div className="bg-white p-6 sm:p-10">
             <FormProvider {...formMethods}>
               <form
                 className="space-y-6 text-sm"
@@ -328,5 +329,6 @@ export default function OffersSubmissionForm({
           </div>
         </div>
       </div>
+    </div>
   );
 }