Stepper: Fix navigation UI in Stepper (#97256)

Author: alshakero

client/landing/stepper/declarative-flow/internals/global.scss

@@ -121,7 +121,12 @@ button {
 		@include break-small {
 			&.courses,
 			&.site-picker,
-			&.new-or-existing-site,
+			&.new-or-existing-site {
+				margin-top: -60px;
+			}
+		}
+
+		@include break-xlarge {
 			&.domains {
 				margin-top: -60px;
 			}

client/landing/stepper/declarative-flow/internals/steps-repository/__user/style.scss

@@ -13,10 +13,7 @@ body.is-section-stepper .step-route {
 	align-items: center;
 	justify-content: center;
 	min-height: calc(100vh - 96px);
-	margin: 140px 0 0;
-	@include break-small {
-		margin: 108px 0 0;
-	}
+	margin: 20px 0;
 
 	.locale-suggestions {
 		margin: 0 auto;

client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-step-wrapper/index.tsx

@@ -294,7 +294,6 @@ function HundredYearPlanStepWrapper( props: Props ) {
 				hideBack
 				flowName={ flowName }
 				hideFormattedHeader
-				shouldStickyNavButtons={ false }
 				stepContent={
 					<Container
 						className={ `hundred-year-plan-step-wrapper ${ stepName }` }

client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-step-wrapper/style.scss

@@ -18,10 +18,6 @@
 		min-height: 100%;
 	}
 
-	.step-container__navigation.action-buttons.should-sticky-nav-buttons {
-		background-color: transparent;
-	}
-
 	.step-container__navigation.action-buttons .step-container__navigation-logo {
 		fill: var(--studio-gray-0);
 		stroke: var(--studio-gray-0);

client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/style.scss

@@ -2,44 +2,26 @@
 
 .step-route.plans {
 	padding: 48px 0 0;
+	@include break-xlarge {
+		padding: 0;
+	}
 
 	.plans.plans-step {
 		.step-container {
 			padding-bottom: 80px;
 
-			.step-container__header {
-				.formatted-header {
-					h1.formatted-header__title {
-						font-family: Recoleta, "Noto Serif", Georgia, "Times New Roman", Times, serif;
-						font-size: 2.25rem;
-						font-weight: 500;
-						/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-						line-height: 2.5rem;
-						padding: 0 20px;
-						text-align: center;
-						letter-spacing: 0.2px;
-
-						@include break-mobile {
-							font-size: 2.75rem;
-							/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-							line-height: 3rem;
-						}
-					}
+			h1.formatted-header__title {
+				font-size: 2.25rem;
+				padding: 0 20px;
+				text-align: center;
+				letter-spacing: 0.2px;
 
-					.formatted-header__subtitle {
-						text-align: center;
-						font-size: 1rem;
-					}
+				@include break-mobile {
+					font-size: 2.75rem;
+					/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+					line-height: 3rem;
 				}
 			}
-
-			.foldable-card.card.is-expanded {
-				margin-bottom: 0;
-			}
-
-			.card.is-compact {
-				margin-bottom: 0;
-			}
 		}
 	}
-}
+}

packages/onboarding/src/step-container/index.tsx

@@ -1,4 +1,4 @@
-import { WordPressLogo, JetpackLogo, WooCommerceWooLogo } from '@automattic/components';
+import { JetpackLogo, WooCommerceWooLogo } from '@automattic/components';
 import clsx from 'clsx';
 import { TranslateResult, useTranslate } from 'i18n-calypso';
 import { ReactElement } from 'react';
@@ -11,7 +11,6 @@ interface Props {
 	stepSectionName?: string;
 	stepContent: ReactElement;
 	shouldHideNavButtons?: boolean;
-	shouldStickyNavButtons?: boolean;
 	hasStickyNavButtonsPadding?: boolean;
 	hideBack?: boolean;
 	hideSkip?: boolean;
@@ -52,7 +51,6 @@ const StepContainer: React.FC< Props > = ( {
 	stepContent,
 	stepName,
 	shouldHideNavButtons,
-	shouldStickyNavButtons,
 	hasStickyNavButtonsPadding,
 	hideBack,
 	backLabelText,
@@ -182,13 +180,9 @@ const StepContainer: React.FC< Props > = ( {
 			<ActionButtons
 				className={ clsx( 'step-container__navigation', {
 					'should-hide-nav-buttons': shouldHideNavButtons,
-					'should-sticky-nav-buttons': shouldStickyNavButtons,
 					'has-sticky-nav-buttons-padding': hasStickyNavButtonsPadding,
 				} ) }
 			>
-				{ shouldStickyNavButtons && (
-					<WordPressLogo className="step-container__navigation-logo" size={ 24 } />
-				) }
 				{ ! hideBack && <BackButton /> }
 				{ ! hideSkip && skipButtonAlign === 'top' && <SkipButton /> }
 				{ ! hideNext && <NextButton /> }

packages/onboarding/src/step-container/style.scss

@@ -92,6 +92,7 @@
 
 				@include break-xlarge {
 					font-size: 2.75rem;
+					margin-top: 107px;
 				}
 			}
 
@@ -150,21 +151,29 @@
 		}
 	}
 	.step-container__navigation.action-buttons {
-		background-color: $white;
 		height: 60px;
 		align-items: center;
 		justify-content: space-between;
 		display: flex;
 		font-size: 0.875rem;
-		position: fixed;
 		z-index: 30;
-		inset-inline-start: 0;
-		inset-inline-end: 0;
 		bottom: 0;
-		padding: 0 20px;
 		margin: 0;
 		border-top: none;
-		box-shadow: inset 0 1px 0 #e2e4e7;
+
+		position: absolute;
+		top: 8px;
+		inset-inline-start: 72px;
+		inset-inline-end: 24px;
+		// Align with wordpress logo in signup-header
+		padding: 1px 0 0;
+		background-color: transparent;
+		border: none;
+		box-shadow: none;
+
+		&.has-sticky-nav-buttons-padding {
+			padding-bottom: 48px;
+		}
 
 		&:empty {
 			display: none;
@@ -215,31 +224,6 @@
 				display: block;
 			}
 		}
-
-		@include break-small {
-			position: absolute;
-			top: 8px;
-			inset-inline-start: 72px;
-			inset-inline-end: 24px;
-			// Align with wordpress logo in signup-header
-			padding: 1px 0 0;
-			background-color: transparent;
-			border: none;
-			box-shadow: none;
-
-			&.should-sticky-nav-buttons {
-				position: fixed;
-				inset-inline-start: 0;
-				inset-inline-end: 0;
-				padding-inline-start: 24px;
-				padding-inline-end: 24px;
-				background-color: $white;
-			}
-
-			&.has-sticky-nav-buttons-padding {
-				padding-bottom: 48px;
-			}
-		}
 	}
 
 	/**
@@ -248,11 +232,6 @@
 	.step-container__content {
 		margin-top: 0;
 		display: block;
-		min-height: 65vh;
-
-		@supports ( min-height: 65svh ) {
-			min-height: calc(65svh - 50px);
-		}
 	}
 
 	/**
@@ -300,4 +279,4 @@
 			margin-inline-end: 8px;
 		}
 	}
-}
+}