[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">
-      {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>
-      ))}
-    </div>
+    <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) => (
+          <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>
+        ))}
+      </ol>
+    </nav>
   );
 }

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

@@ -266,65 +266,67 @@ 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>
-          <FormProvider {...formMethods}>
-            <form
-              className="space-y-6 text-sm"
-              onSubmit={handleSubmit(onSubmit)}>
-              {steps[step]}
-              {step === 0 && (
-                <div className="flex justify-end">
-                  <Button
-                    disabled={false}
-                    icon={ArrowRightIcon}
-                    label="Next"
-                    variant="primary"
-                    onClick={() => {
-                      goToNextStep(step);
-                      gaEvent({
-                        action: 'offers.profile_submission_navigate_next',
-                        category: 'submission',
-                        label: 'Navigate next',
-                      });
-                    }}
-                  />
-                </div>
-              )}
-              {step === 1 && (
-                <div className="flex items-center justify-between">
-                  <Button
-                    addonPosition="start"
-                    icon={ArrowLeftIcon}
-                    label="Previous"
-                    variant="secondary"
-                    onClick={() => {
-                      setStep(step - 1);
-                      gaEvent({
-                        action: 'offers.profile_submission_navigation_back',
-                        category: 'submission',
-                        label: 'Navigate back',
-                      });
-                    }}
-                  />
-                  <Button
-                    disabled={isSubmitting || isSubmitSuccessful}
-                    icon={ArrowRightIcon}
-                    isLoading={isSubmitting || isSubmitSuccessful}
-                    label="Submit"
-                    type="submit"
-                    variant="primary"
-                  />
-                </div>
-              )}
-            </form>
-          </FormProvider>
+          <div className="bg-white p-6 sm:p-10">
+            <FormProvider {...formMethods}>
+              <form
+                className="space-y-6 text-sm"
+                onSubmit={handleSubmit(onSubmit)}>
+                {steps[step]}
+                {step === 0 && (
+                  <div className="flex justify-end">
+                    <Button
+                      disabled={false}
+                      icon={ArrowRightIcon}
+                      label="Next"
+                      variant="primary"
+                      onClick={() => {
+                        goToNextStep(step);
+                        gaEvent({
+                          action: 'offers.profile_submission_navigate_next',
+                          category: 'submission',
+                          label: 'Navigate next',
+                        });
+                      }}
+                    />
+                  </div>
+                )}
+                {step === 1 && (
+                  <div className="flex items-center justify-between">
+                    <Button
+                      addonPosition="start"
+                      icon={ArrowLeftIcon}
+                      label="Previous"
+                      variant="secondary"
+                      onClick={() => {
+                        setStep(step - 1);
+                        gaEvent({
+                          action: 'offers.profile_submission_navigation_back',
+                          category: 'submission',
+                          label: 'Navigate back',
+                        });
+                      }}
+                    />
+                    <Button
+                      disabled={isSubmitting || isSubmitSuccessful}
+                      icon={ArrowRightIcon}
+                      isLoading={isSubmitting || isSubmitSuccessful}
+                      label="Submit"
+                      type="submit"
+                      variant="primary"
+                    />
+                  </div>
+                )}
+              </form>
+            </FormProvider>
+          </div>
         </div>
       </div>
     </div>