Revert "Domain only flow: Make it more consistent (#102613)"

This reverts commit d82dfc4.

Author: zaguiini

client/components/domains/domain-product-price/style.scss

@@ -25,6 +25,9 @@
 		}
 	}
 
+	&.domain-product-single-price {
+		justify-content: start;
+	}
 	.is-section-domains & {
 		@include breakpoint-deprecated( ">800px" ) {
 			padding-left: 1em;

client/components/domains/domain-registration-suggestion/index.jsx

@@ -265,18 +265,6 @@ class DomainRegistrationSuggestion extends Component {
 		};
 	}
 
-	getFormattedDomainName( name ) {
-		if ( name.length <= 24 ) {
-			return name;
-		}
-
-		return (
-			<abbr title={ name }>
-				{ name.slice( 0, 8 ) }…{ name.slice( -8 ) }
-			</abbr>
-		);
-	}
-
 	renderDomain( hasBadges = false ) {
 		const {
 			showHstsNotice,
@@ -300,9 +288,7 @@ class DomainRegistrationSuggestion extends Component {
 				<div className={ titleWrapperClassName }>
 					<h3 className="domain-registration-suggestion__title">
 						<div className="domain-registration-suggestion__domain-title">
-							<span className="domain-registration-suggestion__domain-title-name">
-								{ this.getFormattedDomainName( name ) }
-							</span>
+							<span className="domain-registration-suggestion__domain-title-name">{ name }</span>
 							<span className="domain-registration-suggestion__domain-title-tld">{ tld }</span>
 							{ ( showHstsNotice || showDotGayNotice ) && this.renderInfoBubble() }
 						</div>

client/components/domains/domain-suggestion/style.scss

@@ -2,23 +2,15 @@
 @import "@wordpress/base-styles/mixins";
 
 .domain-suggestion {
-	display: flex;
 	flex-direction: column;
 
-	&.card {
-		padding: 16px 12px;
-
-		@include break-mobile {
-			padding: 16px 24px;
-		}
-	}
-
 	@include break-mobile {
 		flex-direction: row;
 		align-items: center;
 	}
 
 	.domain-suggestion__content-domain {
+		align-items: center;
 		justify-content: space-between;
 	}
 
@@ -36,10 +28,6 @@
 	.domain-registration-suggestion__domain-title {
 		font-size: $font-body;
 
-		@include break-small {
-			white-space: nowrap;
-		}
-
 		.domain-registration-suggestion__domain-title-name {
 			color: var(--studio-gray-60);
 		}
@@ -69,11 +57,12 @@
 	@include break-mobile {
 		flex-direction: row;
 		align-items: center;
+		padding: 15px 20px;
 	}
 
 	.is-section-signup & {
 		@include breakpoint-deprecated( ">480px" ) {
-			flex-direction: column;
+			flex-direction: row;
 			align-items: center;
 		}
 	}
@@ -119,14 +108,10 @@
 	width: 100%;
 	min-height: 32px;
 	gap: 16px;
-	display: flex;
-	flex-direction: column;
 
 	@include breakpoint-deprecated( ">660px" ) {
 		display: flex;
-		flex-direction: row;
 		justify-content: space-between;
-		align-items: center;
 	}
 
 	.notice.is-compact {
@@ -184,12 +169,14 @@
 }
 
 .domain-registration-suggestion__title-info {
-	display: flex;
-	align-items: center;
-
 	@include breakpoint-deprecated( ">800px" ) {
 		max-width: 55%;
 	}
+
+	&.has-badges {
+		display: flex;
+    	align-items: center;
+	}
 }
 
 .domain-registration-suggestion__title-wrapper {
@@ -240,6 +227,14 @@
 	}
 }
 
+.domain-registration-suggestion__domain-title-tld {
+	word-break: normal;
+}
+
+.domain-suggestion__action-container {
+	height: 40px;
+}
+
 .domain-suggestion__price-container,
 .domain-suggestion__action-container {
 	flex: 0 0 auto;
@@ -260,15 +255,17 @@
 
 .button.domain-suggestion__action {
 	width: 100%;
+	height: 40px;
 	min-width: 130px;
-	min-height: 40px;
 	text-align: center;
 	padding: 0.25em 3em;
+	margin-top: 10px;
 	margin-left: 0;
 
 	@media (min-width: 660px) {
 		width: auto;
 		flex: 1 0 auto;
+		margin-top: 0;
 	}
 
 	.is-placeholder & {
@@ -337,9 +334,6 @@
 }
 
 .domain-product-price {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
 	max-width: 100%;
 }
 
@@ -438,12 +432,18 @@ body.is-section-signup {
 
 		& .domain-registration-suggestion__domain-title {
 			color: var(--studio-gray-90);
+			white-space: normal;
 		}
 
 		&:not(.featured-domain-suggestion) {
 			background: none;
 			border-bottom: 1px solid rgba(220, 220, 222, 0.64);
 			border-top: 1px solid #fff; /*This white border is to prevent jumpiness while showing borders on hover*/
+			padding: 16px 20px;
+
+			@include break-mobile {
+				padding: 16px 24px;
+			}
 
 			.domain-registration-suggestion__domain-title {
 				.domain-registration-suggestion__domain-title-name {

client/components/domains/featured-domain-suggestions/placeholder.scss

@@ -31,6 +31,7 @@
 
 	}
 	.domain-suggestion__action-container {
+		height: 40px;
 		margin-bottom: 6px;
 	}
 

client/components/domains/featured-domain-suggestions/style.scss

@@ -9,6 +9,10 @@
 
 	@include break-small {
 		border-top: none;
+		margin: 0 20px;
+	}
+	@include break-large {
+		margin: 0;
 	}
 
 	&.featured-domain-suggestions--has-match-reasons .featured-domain-suggestion {
@@ -40,6 +44,10 @@
 
 	@include break-mobile {
 		flex-direction: row;
+		/* using .is-compact to increase specificity */
+		&.is-compact {
+			padding: 15px 20px;
+		}
 	}
 
 	.domain-registration-suggestion__title-info {
@@ -118,6 +126,10 @@
 		margin: 0;
 		flex-grow: 1;
 		align-items: baseline;
+		body.is-section-signup & {
+			align-items: flex-start;
+			margin-top: 12px;
+		}
 		.is-section-domains & {
 			padding-left: 0;
 		}
@@ -150,6 +162,7 @@
 	}
 
 	.domain-registration-suggestion__match-reasons {
+		margin-top: 8px;
 		order: 3;
 	}
 
@@ -194,13 +207,15 @@ body.is-section-signup .step-wrapper .featured-domain-suggestion.card {
 	align-items: center;
 	background: #fff;
 	border-bottom: 1px solid rgba(220, 220, 222, 0.64);
+	padding: 16px 20px;
 	flex-direction: column-reverse;
 	@include break-mobile {
 		border-radius: 4px;
 		margin-bottom: 12px;
 		box-sizing: border-box;
 		border: 1px solid #e2e4e7;
 		background: var(--color-surface);
+		padding: 16px 24px;
 	}
 
 	.domain-suggestion__action-container {

client/components/domains/register-domain-step/index.jsx

@@ -9,6 +9,7 @@ import {
 } from '@automattic/onboarding';
 import Search from '@automattic/search';
 import { withShoppingCart } from '@automattic/shopping-cart';
+import { Icon } from '@wordpress/icons';
 import clsx from 'clsx';
 import debugFactory from 'debug';
 import { localize } from 'i18n-calypso';
@@ -80,6 +81,7 @@ import { getCurrentUser } from 'calypso/state/current-user/selectors';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import { getCurrentFlowName } from 'calypso/state/signup/flow/selectors';
 import AlreadyOwnADomain from './already-own-a-domain';
+import tip from './tip';
 
 import './style.scss';
 
@@ -538,6 +540,7 @@ class RegisterDomainStep extends Component {
 						/>
 					) }
 					{ this.renderFilterContent() }
+					{ this.renderDomainExplanationImage() }
 					{ this.renderSideContent() }
 				</div>
 				{ showAlreadyOwnADomain && (
@@ -761,6 +764,23 @@ class RegisterDomainStep extends Component {
 		);
 	}
 
+	renderDomainExplanationImage() {
+		return (
+			<div className="register-domain-step__domain-side-content-container-domain-explanation-image">
+				<span></span>
+				<span></span>
+				<span className="register-domain-step__domain-side-content-container-domain-explanation-image-url">
+					https://
+					{ this.props.translate( 'yoursitename', {
+						comment: 'example url used to explain what a domain is.',
+					} ) }
+					.com
+				</span>
+				<span></span>
+			</div>
+		);
+	}
+
 	renderContent() {
 		if ( Array.isArray( this.state.searchResults ) || this.state.loadingResults ) {
 			return this.renderSearchResults();
@@ -1536,6 +1556,7 @@ class RegisterDomainStep extends Component {
 		const { translate, promptText } = this.props;
 		return (
 			<div className="register-domain-step__example-prompt">
+				<Icon icon={ tip } size={ 20 } />
 				{ promptText ?? translate( 'The best names are short and memorable' ) }
 			</div>
 		);

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

@@ -61,7 +61,6 @@
 	}
 
 	.search-component {
-		overflow: hidden;
 		border: 1px solid var(--color-border-subtle);
 		border-radius: 4px;
 	}
@@ -95,6 +94,19 @@
 .register-domain-step__search {
 	padding-bottom: 12px;
 
+	&.register-domain-step__search-domain-step:not(.is-sticky) {
+		padding-bottom: 16px;
+
+		@include breakpoint-deprecated( ">660px" ) {
+			padding-top: 18px;
+
+			.is-section-stepper & {
+				padding-top: 0;
+				padding-bottom: 16px;
+			}
+		}
+	}
+
 	.card.register-domain-step__search-card {
 		padding: 0;
 		display: flex;
@@ -138,7 +150,12 @@
 		margin: 0 20px;
 	}
 
-	@include break-large {
+	svg {
+		fill: #a7aaad;
+		margin-right: 13px;
+	}
+
+	@include break-xlarge {
 		margin: 0;
 	}
 }
@@ -279,6 +296,50 @@ body.is-section-signup {
 		display: block;
 	}
 }
+.register-domain-step__domain-side-content-container-domain-explanation-image {
+	position: relative;
+	background-color: #d9d8da;
+	border-top-right-radius: 4px;
+	border-top-left-radius: 4px;
+	display: flex;
+	padding: 10px 5px 30px;
+	justify-content: space-between;
+	margin: 20px auto;
+	max-width: 600px;
+
+	@include break-large {
+		display: none;
+	}
+
+	&::after {
+		content: "";
+		width: auto;
+		height: 20px;
+		background-color: #f5f5f5;
+		position: absolute;
+		border-top-right-radius: 4px;
+		border-top-left-radius: 4px;
+		bottom: 0;
+		left: 10px;
+		right: 10px;
+	}
+
+	span {
+		width: 32px;
+		height: 32px;
+		background: #fff;
+		border-radius: 4px;
+		margin: 3px 6px;
+	}
+}
+.register-domain-step__domain-side-content-container-domain-explanation-image-url {
+	flex-grow: 2;
+	padding: 0 10px;
+	line-height: 32px;
+	font-size: $font-body-extra-small;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
 
 .is-domain-plan-package-flow {