Domains: Fix discrepancy between onboarding and domain-only search (Automattic#102021)

* Fix smaller viewport

* Add more alignment fixes

* Many more fixes

* More fixes

* Manage large viewport from parent component

* Restrict search bar fix to onboarding

* Fix wrong gap prop

* Fix smaller viewports

* Fix different price order

* Fix wrong margin for desktop breakpoint

* Fix small bug to load initial viewport

* Organize styles + general cleanup

* AI take on cleanup/simplifying the style

* Fix bottom style for explanation image in smaller viewports

* Add balance to text-wrap to avoid orphan words in last line

* Move anti-aliasing to a more suitable location

* Sync example prompt styles

* Fix search element weird border radius

* Remove outdated style... (2019... 🥶)

Author: rafaelgallani

client/components/domains/register-domain-step/style.scss

@@ -137,7 +137,7 @@
 	margin-bottom: 12px;
 }
 
-.register-domain-step__example-prompt {
+.domains__step-content.domains__step-content-domain-step .register-domain-step.register-domain-step__signup .register-domain-step__example-prompt {
 	font-size: 0.875rem;
 	line-height: 20px;
 	color: var(--studio-gray-40);
@@ -149,14 +149,10 @@
 		margin: 0 20px;
 	}
 
-	svg {
+	svg:first-child {
 		fill: #a7aaad;
 		margin-right: 13px;
 	}
-
-	@include break-xlarge {
-		margin: 0;
-	}
 }
 
 .register-domain-step__placeholder.empty-content {

client/components/domains/side-explainer/style.scss

@@ -30,6 +30,7 @@
 		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 		line-height: 1.625rem;
 		color: var(--studio-gray-90);
+		text-wrap: balance;
 	}
 
 	.side-explainer__subtitle {

client/signup/steps/domains/index.jsx

@@ -11,6 +11,7 @@ import {
 	Step,
 } from '@automattic/onboarding';
 import { withShoppingCart } from '@automattic/shopping-cart';
+import { subscribeIsWithinBreakpoint, isWithinBreakpoint } from '@automattic/viewport';
 import { getQueryArg } from '@wordpress/url';
 import clsx from 'clsx';
 import { localize } from 'i18n-calypso';
@@ -171,6 +172,7 @@ export class RenderDomainsStep extends Component {
 			checkDomainAvailabilityPromises: [],
 			removeDomainTimeout: 0,
 			addDomainTimeout: 0,
+			isDesktopViewport: false,
 		};
 	}
 
@@ -187,6 +189,7 @@ export class RenderDomainsStep extends Component {
 			// This call is expensive, so we only do it if the mini-cart hasDomainRegistration.
 			this.props.shoppingCartManager.addProductsToCart( [ this.props.multiDomainDefaultPlan ] );
 		}
+		this.subscribeToViewPortChanges();
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -202,6 +205,20 @@ export class RenderDomainsStep extends Component {
 		}
 	}
 
+	subscribeToViewPortChanges() {
+		this.unsubscribeToViewPortChanges = subscribeIsWithinBreakpoint(
+			'>=960px',
+			( isDesktopViewport ) => this.setState( { isDesktopViewport } )
+		);
+		if ( isWithinBreakpoint( '>=960px' ) ) {
+			this.setState( { isDesktopViewport: true } );
+		}
+	}
+
+	componentWillUnmount() {
+		this.unsubscribeToViewPortChanges?.();
+	}
+
 	getLocale() {
 		return ! this.props.userLoggedIn ? this.props.locale : '';
 	}
@@ -1438,6 +1455,7 @@ export class RenderDomainsStep extends Component {
 
 			return (
 				<Step.TwoColumnLayout
+					isLargeViewport={ this.state.isDesktopViewport }
 					firstColumnWidth={ 7 }
 					secondColumnWidth={ 3 }
 					topBar={ <Step.TopBar leftElement={ ! hideBack && backButton } /> }

client/signup/steps/domains/style.scss

@@ -1,7 +1,14 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 @import "@wordpress/base-styles/variables";
+@import "@wordpress/base-styles/colors.native";
 
+body {
+	.is-section-signup, .is-section-stepper {
+		text-rendering: optimizelegibility;
+		-webkit-font-smoothing: antialiased;
+	}
+}
 .domains__step-section-wrapper {
 	margin: 0 auto;
 	width: 100%;
@@ -66,10 +73,6 @@ body.is-section-stepper .domains__step-content,
 		border-radius: 0 2px 2px 0;
 	}
 
-	.search-filters__dropdown-filters.search-filters__dropdown-filters--is-open {
-		box-shadow: 0 0 0 3px var(--color-accent-light);
-	}
-
 	@include breakpoint-deprecated( "<660px" ) {
 		.register-domain-step__search-card,
 		.search-component.is-open.has-focus {
@@ -339,6 +342,7 @@ body.is-section-signup {
 			border-color: #646970;
 			background: var(--color-surface);
 			box-shadow: none;
+			border-radius: 4px;
 
 			.search-component__input {
 				background: var(--color-surface);
@@ -519,27 +523,67 @@ body.is-section-signup {
 .step-route.onboarding.domains:has(.step-container-v2) {
 	padding: 0;
 
-	.register-domain-step__search-card {
-		margin: 0;
+	.register-domain-step {
+		&__search-card {
+			@media (min-width: 600px) {
+				margin: 20px 20px 0;
+			}
+
+			@media (min-width: 960px) {
+				margin: 0;
+			}
+		}
+
+		&__example-prompt {
+			margin: 0;
+
+			@media (min-width: 600px) {
+				margin: 0 20px;
+			}
+		}
 	}
 
 	.featured-domain-suggestions,
 	.domain-suggestion {
 		margin-inline: 0;
-	}
 
-	.register-domain-step__domain-side-content-container-domain-explanation-image {
-		max-width: 100%;
-		margin-bottom: 0;
+		@media (min-width: 600px) {
+			margin-inline: 20px;
+
+			@media (min-width: 960px) {
+				margin: 0;
+			}
+		}
 	}
 
-	.register-domain-step__example-prompt {
-		margin: 0;
+	.featured-domain-suggestions {
+		border-top: none;
+
+		@media (min-width: 600px) {
+			margin: 0 20px;
+
+			@media (min-width: 960px) {
+				margin: 0;
+			}
+		}
+
+		.featured-domain-suggestion {
+			margin: 0;
+			margin-bottom: 12px;
+		}
 	}
 
 	.domains__domain-side-content-container {
 		display: flex;
-		margin-top: 0;
+		justify-content: center;
+		width: 80%;
+		align-items: center;
+		margin: 20px auto 0;
+
+		@media (min-width: ($break-large)) {
+			width: unset;
+			margin-top: 0;
+		}
 	}
 
 	.domains__domain-side-content {
@@ -550,9 +594,119 @@ body.is-section-signup {
 		@include break-large {
 			max-width: 290px;
 		}
+
+		@include break-large {
+			margin-left: 40px;
+		}
+
+		@include break-huge {
+			margin-left: 60px;
+		}
+
+		&.fade-out {
+			display: none;
+		}
 	}
 
-	.domains__domain-side-content.fade-out {
-		display: none;
+	.step-container-v2__heading {
+		h1:not(.small) {
+			letter-spacing: -0.4px;
+			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+			line-height: 1.2em;
+		}
+
+		> p {
+			color: $gray-60;
+			font-size: 1rem;
+		}
+	}
+}
+
+.step-container-v2 {
+	&__content.step-container-v2__content--two-column-layout.domains__step-content.domains__step-content-domain-step {
+		gap: 0;
+		max-width: 1280px;
+	}
+
+	&__content-wrapper.padding {
+		padding: 0 12px;
+		gap: 0;
+	}
+
+	&__heading {
+		margin-top: 0;
+	}
+}
+
+.domains__step-content-domain-step > div {
+	&:nth-child(1) {
+		flex: 1 !important;
+	}
+
+	&:nth-child(2) {
+		display: flex;
+		flex-basis: auto !important;
+		flex-direction: column;
+		flex-grow: 0 !important;
+		flex-shrink: 1 !important;
+		flex-wrap: nowrap;
+	}
+}
+
+.domain-product-price {
+	&.domain-product-single-price.domain-product-price__domain-step-signup-flow {
+		align-self: center;
+	}
+
+	@include breakpoint-deprecated( "<660px" ) {
+		&.domain-product-price__domain-step-signup-flow {
+			flex-direction: column;
+		}
+	}
+}
+
+.domain-suggestion__content.domain-suggestion__content-domain {
+	align-items: unset;
+}
+
+body.is-section-stepper {
+	.featured-domain-suggestion.card .domain-product-price {
+		align-items: flex-start;
+		margin-top: 12px;
+	}
+
+	.formatted-header .formatted-header__title {
+		@media (min-width: 1080px) {
+			font-size: 2.75rem !important;
+		}
+	}
+
+	.register-domain-step__search.register-domain-step__search-domain-step:not(.is-sticky) {
+		@media (min-width: 661px) {
+			padding-top: 18px;
+		}
+	}
+
+	.onboarding:not(.is-onboarding-2023-pricing-grid) .step-container-v2__heading {
+		margin: calc(48px + 24px - var(--step-container-v2-top-bar-height)) 20px 24px 20px;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		width: unset;
+		align-items: center;
+		flex-direction: column;
+
+		@media (min-width: 960px) {
+			margin-top: calc(48px + 48px - var(--step-container-v2-top-bar-height));
+			margin-bottom: 36px;
+		}
+
+		> h1 {
+			font-size: 2.25rem;
+
+			@media (min-width: 1080px) {
+				font-size: 2.75rem;
+			}
+		}
 	}
 }