diff --git a/src/pages/seller-onboarding/components/hero-stepper/hero-stepper.module.scss b/src/pages/seller-onboarding/components/hero-stepper/hero-stepper.module.scss index 65b642fb..5c71be2c 100644 --- a/src/pages/seller-onboarding/components/hero-stepper/hero-stepper.module.scss +++ b/src/pages/seller-onboarding/components/hero-stepper/hero-stepper.module.scss @@ -17,6 +17,28 @@ margin-top: 64px; gap: 32px; + div { + display: flex; + flex-direction: column; + align-items: center; + .steps { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + height: 32px; + width: 32px; + + border: 2px solid var(--blue-principal-000052); + border-radius: 50%; + + p { + font-size: 1.125rem; + font-weight: 700; + } + } + } + h1 { color: var(--blue-principal-000052); margin-bottom: 16px; diff --git a/src/pages/seller-onboarding/components/hero-stepper/index.tsx b/src/pages/seller-onboarding/components/hero-stepper/index.tsx index 3ef743a6..d6f89b59 100644 --- a/src/pages/seller-onboarding/components/hero-stepper/index.tsx +++ b/src/pages/seller-onboarding/components/hero-stepper/index.tsx @@ -12,8 +12,8 @@ const SellerOnboardingHeroStepper: React.FC = () => { return (
- - {steps.map((label) => ( + + {steps.map((label, i) => ( @@ -23,15 +23,18 @@ const SellerOnboardingHeroStepper: React.FC = () => {
+ {/*

1

*/}

Apply to shop and start earning today

Sign up now and see why over 600,000 shoppers choose Instacart for flexible earnings.

+ {/*

2

*/}

Apply to shop and start earning today

Sign up now and see why over 600,000 shoppers choose Instacart for flexible earnings.

+ {/*

3

*/}

Apply to shop and start earning today

Sign up now and see why over 600,000 shoppers choose Instacart for flexible earnings.

diff --git a/src/pages/seller-onboarding/components/seller-onboarding-hero/hero.module.scss b/src/pages/seller-onboarding/components/seller-onboarding-hero/hero.module.scss index adb43c6c..28792f9c 100644 --- a/src/pages/seller-onboarding/components/seller-onboarding-hero/hero.module.scss +++ b/src/pages/seller-onboarding/components/seller-onboarding-hero/hero.module.scss @@ -2,7 +2,7 @@ display: grid; grid-template-columns: 53.5% 41%; gap: 0px 32px; - height: 480px; + min-height: 500px; .hero_content { display: flex; @@ -14,7 +14,7 @@ h1 { margin-top: 32px; - font-size: 4.5vw; + font-size: 2.8vw; line-height: 1.2; color: var(--blue-principal-000052); } @@ -29,7 +29,7 @@ background-image: url('../../../../../public/assets/hero/heroOnboarding.svg'); background-repeat: no-repeat; background-position: center; - background-size: 100%; + background-size: 80%; object-fit: cover; } } diff --git a/src/pages/seller-onboarding/components/seller-onboarding-hero/index.tsx b/src/pages/seller-onboarding/components/seller-onboarding-hero/index.tsx index eda487a8..2e69eecc 100644 --- a/src/pages/seller-onboarding/components/seller-onboarding-hero/index.tsx +++ b/src/pages/seller-onboarding/components/seller-onboarding-hero/index.tsx @@ -70,7 +70,7 @@ const {
- + {/* Hero images */}
diff --git a/tests/units/src/components/footer/__snapshots__/index.unit.spec.tsx.snap b/tests/units/src/components/footer/__snapshots__/index.unit.spec.tsx.snap index e91d29db..a707db7e 100644 --- a/tests/units/src/components/footer/__snapshots__/index.unit.spec.tsx.snap +++ b/tests/units/src/components/footer/__snapshots__/index.unit.spec.tsx.snap @@ -5,286 +5,253 @@ exports[`Footer should render the the footer with default data 1`] = `