diff --git a/client/components/domains/register-domain-step/style.scss b/client/components/domains/register-domain-step/style.scss index 75aeabb1c460..2eef0a0df2a5 100644 --- a/client/components/domains/register-domain-step/style.scss +++ b/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 { diff --git a/client/components/domains/side-explainer/style.scss b/client/components/domains/side-explainer/style.scss index 2d731a629317..ee67c0337edb 100644 --- a/client/components/domains/side-explainer/style.scss +++ b/client/components/domains/side-explainer/style.scss @@ -10,6 +10,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 { diff --git a/client/signup/steps/domains/index.jsx b/client/signup/steps/domains/index.jsx index cfc22df7c9c5..5144ffcf5145 100644 --- a/client/signup/steps/domains/index.jsx +++ b/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 : ''; } @@ -1444,6 +1461,7 @@ export class RenderDomainsStep extends Component { return ( } diff --git a/client/signup/steps/domains/style.scss b/client/signup/steps/domains/style.scss index 0fe1f69a23ef..be322598f638 100644 --- a/client/signup/steps/domains/style.scss +++ b/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-medium { 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; + } + } } }