diff --git a/client/components/domains/use-my-domain/style.scss b/client/components/domains/use-my-domain/style.scss index 077e52086421..63905deab383 100644 --- a/client/components/domains/use-my-domain/style.scss +++ b/client/components/domains/use-my-domain/style.scss @@ -9,7 +9,7 @@ flex-direction: column; padding: 36px 24px; background-color: inherit; - & .card { + & .card, &.card { box-shadow: none; } diff --git a/client/components/domains/use-my-domain/transfer-or-connect/style.scss b/client/components/domains/use-my-domain/transfer-or-connect/style.scss index 75c2a7d34c65..b3e907eb6da6 100644 --- a/client/components/domains/use-my-domain/transfer-or-connect/style.scss +++ b/client/components/domains/use-my-domain/transfer-or-connect/style.scss @@ -15,6 +15,7 @@ // Specificity increase to override Card background color loaded later in the cascade. &.domain-transfer-or-connect__content { background-color: transparent; + box-shadow: none; } .option-content { diff --git a/client/components/domains/wpcom-domain-search/index.tsx b/client/components/domains/wpcom-domain-search/index.tsx index 8e861f8d9f42..0c06c4488253 100644 --- a/client/components/domains/wpcom-domain-search/index.tsx +++ b/client/components/domains/wpcom-domain-search/index.tsx @@ -15,25 +15,10 @@ type DomainSearchProps = Omit< ComponentProps< typeof DomainSearch >, 'cart' | ' flowAllowsMultipleDomainsInCart: boolean; }; -const SESSION_STORAGE_QUERY_KEY = 'domain-search-query'; - -const getSessionStorageQuery = () => { - try { - return sessionStorage.getItem( SESSION_STORAGE_QUERY_KEY ) ?? ''; - } catch { - return ''; - } -}; - -const setSessionStorageQuery = ( query: string ) => { - sessionStorage.setItem( SESSION_STORAGE_QUERY_KEY, query ); -}; - const DomainSearchWithCart = ( { currentSiteId, currentSiteUrl, flowName, - initialQuery: externalInitialQuery, config: externalConfig, isFirstDomainFreeForFirstYear, flowAllowsMultipleDomainsInCart, @@ -45,24 +30,12 @@ const DomainSearchWithCart = ( { const { cart, isNextDomainFree, items } = useWPCOMShoppingCartForDomainSearch( { cartKey, flowName, - isFirstDomainFreeForFirstYear: isFirstDomainFreeForFirstYear ?? false, + isFirstDomainFreeForFirstYear: isFirstDomainFreeForFirstYear || false, flowAllowsMultipleDomainsInCart, onContinue, onAddDomainToCart, } ); - const initialQuery = useMemo( () => { - if ( externalInitialQuery ) { - return externalInitialQuery; - } - - if ( currentSiteUrl ) { - return new URL( currentSiteUrl ).host.replace( /\.(wordpress|wpcomstaging)\.com$/, '' ); - } - - return getSessionStorageQuery(); - }, [ externalInitialQuery, currentSiteUrl ] ); - const cartItemsLength = cart.items.length; const config = useMemo( () => { @@ -80,7 +53,7 @@ const DomainSearchWithCart = ( { return { ...props.events, onQueryChange: ( query: string ) => { - setSessionStorageQuery( query ); + props.events?.onQueryChange?.( query ); }, onContinue: () => { props.events?.onContinue?.( items ); @@ -95,7 +68,6 @@ const DomainSearchWithCart = ( { config={ config } cart={ cart } events={ events } - initialQuery={ initialQuery } /> ); }; diff --git a/client/components/domains/wpcom-domain-search/use-query-handler.ts b/client/components/domains/wpcom-domain-search/use-query-handler.ts new file mode 100644 index 000000000000..064f6d064e45 --- /dev/null +++ b/client/components/domains/wpcom-domain-search/use-query-handler.ts @@ -0,0 +1,43 @@ +import { useState } from 'react'; + +const SESSION_STORAGE_QUERY_KEY = 'domain-search-query'; + +const getSessionStorageQuery = () => { + try { + return sessionStorage.getItem( SESSION_STORAGE_QUERY_KEY ) ?? undefined; + } catch { + return undefined; + } +}; + +const setSessionStorageQuery = ( query: string ) => { + sessionStorage.setItem( SESSION_STORAGE_QUERY_KEY, query ); +}; + +export const useQueryHandler = ( { + initialQuery: externalInitialQuery, + currentSiteUrl, +}: { + initialQuery?: string; + currentSiteUrl?: string; +} ) => { + const [ localQuery, setLocalQuery ] = useState< string | undefined >( () => { + if ( externalInitialQuery ) { + return externalInitialQuery; + } + + if ( currentSiteUrl ) { + return new URL( currentSiteUrl ).host.replace( /\.(wordpress|wpcomstaging)\.com$/, '' ); + } + + return getSessionStorageQuery(); + } ); + + return { + query: localQuery, + setQuery: ( query: string ) => { + setLocalQuery( query ); + setSessionStorageQuery( query ); + }, + }; +}; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-search/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-search/index.tsx index 315955f3b062..24da7ce39d89 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-search/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-search/index.tsx @@ -11,9 +11,11 @@ import { StepContainer, } from '@automattic/onboarding'; import { __ } from '@wordpress/i18n'; +import { useTranslate } from 'i18n-calypso'; import { useMemo } from 'react'; import { WPCOMDomainSearch } from 'calypso/components/domains/wpcom-domain-search'; import { FreeDomainForAYearPromo } from 'calypso/components/domains/wpcom-domain-search/free-domain-for-a-year-promo'; +import { useQueryHandler } from 'calypso/components/domains/wpcom-domain-search/use-query-handler'; import FormattedHeader from 'calypso/components/formatted-header'; import { SIGNUP_DOMAIN_ORIGIN } from 'calypso/lib/analytics/signup'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; @@ -51,11 +53,21 @@ type StepSubmission = { const DomainSearchStep: StepType< { submits: UseMyDomain | StepSubmission; } > = function DomainSearchStep( { navigation, flow } ) { + const translate = useTranslate(); + const site = useSite(); const siteSlug = useSiteSlugParam(); const initialQuery = useQuery().get( 'new' ) ?? ''; const tldQuery = useQuery().get( 'tld' ); + // eslint-disable-next-line no-nested-ternary + const currentSiteUrl = site?.URL ? site.URL : siteSlug ? `https://${ siteSlug }` : undefined; + + const { query, setQuery } = useQueryHandler( { + initialQuery, + currentSiteUrl, + } ); + const config = useMemo( () => { const allowedTlds = tldQuery?.split( ',' ) ?? []; @@ -83,6 +95,7 @@ const DomainSearchStep: StepType< { const events = useMemo( () => { return { + onQueryChange: setQuery, onMoveDomainToSiteClick( otherSiteDomain: string, domainName: string ) { window.location.assign( domainManagementTransferToOtherSite( otherSiteDomain, domainName ) @@ -121,7 +134,7 @@ const DomainSearchStep: StepType< { } ); }, }; - }, [ submit ] ); + }, [ submit, setQuery ] ); const slots = useMemo( () => { return { @@ -165,11 +178,10 @@ const DomainSearchStep: StepType< { : 'domain-search--step-container' } currentSiteId={ site?.ID } - // eslint-disable-next-line no-nested-ternary - currentSiteUrl={ site?.URL ? site.URL : siteSlug ? `https://${ siteSlug }` : undefined } + currentSiteUrl={ currentSiteUrl } flowName={ flow } config={ config } - initialQuery={ initialQuery } + query={ query } isFirstDomainFreeForFirstYear={ isOnboardingFlow( flow ) || isDomainFlow( flow ) } events={ events } flowAllowsMultipleDomainsInCart={ @@ -187,6 +199,13 @@ const DomainSearchStep: StepType< { leftElement={ navigation.goBack ? : undefined } + rightElement={ + query && config.allowsUsingOwnDomain ? ( + events.onExternalDomainClick( query ) }> + { translate( 'Use a domain I already own' ) } + + ) : undefined + } /> } columnWidth={ 10 } diff --git a/client/my-sites/domains/domain-search/index.tsx b/client/my-sites/domains/domain-search/index.tsx index 849a06a4c415..8ccd45452b7f 100644 --- a/client/my-sites/domains/domain-search/index.tsx +++ b/client/my-sites/domains/domain-search/index.tsx @@ -5,6 +5,7 @@ import { type ResponseCartProduct, useShoppingCart } from '@automattic/shopping- import { useTranslate } from 'i18n-calypso'; import { useMemo } from 'react'; import { WPCOMDomainSearch } from 'calypso/components/domains/wpcom-domain-search'; +import { useQueryHandler } from 'calypso/components/domains/wpcom-domain-search/use-query-handler'; import FormattedHeader from 'calypso/components/formatted-header'; import Main from 'calypso/components/main'; import BodySectionCssClass from 'calypso/layout/body-section-css-class'; @@ -56,8 +57,17 @@ export default function DomainSearch() { const selectedSiteSlug = selectedSite?.slug; + const initialQuery = queryArguments?.suggestion?.toString() ?? ''; + const currentSiteUrl = selectedSite?.URL; + + const { query, setQuery } = useQueryHandler( { + initialQuery, + currentSiteUrl, + } ); + const events = useMemo( () => { return { + onQueryChange: setQuery, onMoveDomainToSiteClick( otherSiteDomain: string, domainName: string ) { page( domainManagementTransferToOtherSite( otherSiteDomain, domainName ) ); }, @@ -81,19 +91,18 @@ export default function DomainSearch() { } }, }; - }, [ selectedSiteSlug ] ); + }, [ selectedSiteSlug, setQuery ] ); const currentRoute = useSelector( getCurrentRoute ); - const query = useSelector( getCurrentQueryArguments ); - const isFromMyHome = query?.from === 'my-home'; + const isFromMyHome = queryArguments?.from === 'my-home'; const getBackButtonHref = () => { // If we have the from query param, we should use that as the back button href if ( isFromMyHome ) { return `/home/${ selectedSiteSlug }`; - } else if ( query?.redirect_to ) { - return query.redirect_to.toString(); + } else if ( queryArguments?.redirect_to ) { + return queryArguments.redirect_to.toString(); } return domainManagementList( selectedSiteSlug ?? undefined, currentRoute ); @@ -112,10 +121,10 @@ export default function DomainSearch() { diff --git a/client/signup/steps/domains/rewritten/index.tsx b/client/signup/steps/domains/rewritten/index.tsx index 97d3f10d1dfd..ec0f7e96079b 100644 --- a/client/signup/steps/domains/rewritten/index.tsx +++ b/client/signup/steps/domains/rewritten/index.tsx @@ -1,13 +1,21 @@ import { FreeDomainSuggestion, useMyDomainInputMode } from '@automattic/api-core'; import page from '@automattic/calypso-router'; -import { isDomainForGravatarFlow, isEcommerceFlow, isFreeFlow } from '@automattic/onboarding'; +import { + isDomainForGravatarFlow, + isEcommerceFlow, + isFreeFlow, + isWithThemeFlow, +} from '@automattic/onboarding'; import { MinimalRequestCartProduct } from '@automattic/shopping-cart'; +import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { addQueryArgs } from '@wordpress/url'; -import { localize } from 'i18n-calypso'; +import { addQueryArgs, getQueryArg } from '@wordpress/url'; +import { localize, useTranslate } from 'i18n-calypso'; import { useMemo } from 'react'; import { WPCOMDomainSearch } from 'calypso/components/domains/wpcom-domain-search'; import { FreeDomainForAYearPromo } from 'calypso/components/domains/wpcom-domain-search/free-domain-for-a-year-promo'; +import { useQueryHandler } from 'calypso/components/domains/wpcom-domain-search/use-query-handler'; +import { isRelativeUrl } from 'calypso/dashboard/utils/url'; import { SIGNUP_DOMAIN_ORIGIN } from 'calypso/lib/analytics/signup'; import { isMonthlyOrFreeFlow } from 'calypso/lib/cart-values/cart-items'; import { getSuggestionsVendor } from 'calypso/lib/domains/suggestions'; @@ -15,7 +23,7 @@ import { domainManagementTransferToOtherSite } from 'calypso/my-sites/domains/pa import StepWrapper from 'calypso/signup/step-wrapper'; import { getStepUrl } from 'calypso/signup/utils'; import { useSelector } from 'calypso/state'; -import { isUserLoggedIn } from 'calypso/state/current-user/selectors'; +import { getCurrentUserSiteCount, isUserLoggedIn } from 'calypso/state/current-user/selectors'; import { USE_MY_DOMAIN_SECTION_NAME, UseMyDomain } from './use-my-domain'; import type { StepProps } from './types'; @@ -47,13 +55,24 @@ const DomainSearchUI = ( queryObject, baseSubmitStepProps, baseSubmitProvidedDependencies, + previousStepName, + goBack, } = props; const isDomainOnlyFlow = flowName === 'domain'; const isOnboardingWithEmailFlow = flowName === 'onboarding-with-email'; + const siteSlug = queryObject.siteSlug; + const currentSiteUrl = siteSlug ? `https://${ siteSlug }` : undefined; + + const { query, setQuery } = useQueryHandler( { + initialQuery: queryObject.new, + currentSiteUrl, + } ); + const events = useMemo( () => { return { + onQueryChange: setQuery, onAddDomainToCart: ( product: MinimalRequestCartProduct ) => { if ( isDomainForGravatarFlow( flowName ) ) { return { @@ -84,6 +103,7 @@ const DomainSearchUI = ( getStepUrl( flowName, stepName, USE_MY_DOMAIN_SECTION_NAME, locale, { step: useMyDomainInputMode.domainInput, initialQuery: initialQuery, + siteSlug, } ) ); }, @@ -129,8 +149,6 @@ const DomainSearchUI = ( goToNextStep(); }, onSkip( suggestion?: FreeDomainSuggestion ) { - const siteUrl = suggestion?.domain_name.replace( '.wordpress.com', '' ); - submitSignupStep( { ...baseSubmitStepProps, @@ -138,7 +156,7 @@ const DomainSearchUI = ( domainItem: undefined, isPurchasingItem: false, domainCart: [], - siteUrl, + siteUrl: suggestion?.domain_name.replace( '.wordpress.com', '' ), }, { ...baseSubmitProvidedDependencies, @@ -146,7 +164,7 @@ const DomainSearchUI = ( ? SIGNUP_DOMAIN_ORIGIN.FREE : SIGNUP_DOMAIN_ORIGIN.CHOOSE_LATER, domainCart: [], - siteUrl, + siteUrl: suggestion?.domain_name, } ); @@ -156,6 +174,8 @@ const DomainSearchUI = ( }, [ flowName, stepName, + siteSlug, + setQuery, submitSignupStep, goToNextStep, locale, @@ -182,43 +202,55 @@ const DomainSearchUI = ( }, allowedTlds, deemphasizedTlds: isEcommerceFlow( flowName ) ? [ 'blog' ] : [], - skippable: ! isDomainOnlyFlow && ! isDomainForGravatarFlow( flowName ), + skippable: + ! isDomainOnlyFlow && ! isDomainForGravatarFlow( flowName ) && ! isOnboardingWithEmailFlow, includeOwnedDomainInSuggestions: ! isDomainOnlyFlow, - allowsUsingOwnDomain: - ! isDomainForGravatarFlow( flowName ) && - ! isOnboardingWithEmailFlow && - ! isFreeFlow( flowName ), + allowsUsingOwnDomain: ! isDomainForGravatarFlow( flowName ) && ! isOnboardingWithEmailFlow, }; }, [ flowName, isDomainOnlyFlow, isOnboardingWithEmailFlow, allowedTldParam ] ); const slots = useMemo( () => { return { BeforeResults: () => { - if ( isDomainForGravatarFlow( flowName ) || isFreeFlow( flowName ) ) { + if ( + isDomainOnlyFlow || + isDomainForGravatarFlow( flowName ) || + isFreeFlow( flowName ) || + isOnboardingWithEmailFlow + ) { return null; } return ; }, BeforeFullCartItems: () => { - if ( isDomainForGravatarFlow( flowName ) || isFreeFlow( flowName ) ) { + if ( + isDomainOnlyFlow || + isDomainForGravatarFlow( flowName ) || + isFreeFlow( flowName ) || + isOnboardingWithEmailFlow + ) { return null; } return ; }, }; - }, [ flowName ] ); + }, [ flowName, isOnboardingWithEmailFlow, isDomainOnlyFlow ] ); const flowAllowsMultipleDomainsInCart = isDomainOnlyFlow; const headerText = useMemo( () => { + if ( isOnboardingWithEmailFlow ) { + return __( 'Choose a domain for your Professional Email' ); + } + if ( isDomainForGravatarFlow( flowName ) ) { return __( 'Choose a domain' ); } return __( 'Claim your space on the web' ); - }, [ flowName ] ); + }, [ flowName, isOnboardingWithEmailFlow ] ); const subHeaderText = useMemo( () => { if ( isDomainForGravatarFlow( flowName ) ) { @@ -228,23 +260,90 @@ const DomainSearchUI = ( return __( 'Make it yours with a .com, .blog, or one of 350+ domain options.' ); }, [ flowName ] ); + const translate = useTranslate(); + const userSiteCount = useSelector( getCurrentUserSiteCount ); + + const { hideBack, backUrl, backLabelText } = useMemo( () => { + let backUrl; + let backLabelText; + + const shouldHideBack = ! userSiteCount && previousStepName?.startsWith( 'user' ) && ! goBack; + + const hideBack = flowName === 'domain' || shouldHideBack; + + const [ sitesBackLabelText, defaultBackUrl ] = + userSiteCount && userSiteCount === 1 + ? [ translate( 'Back to My Home' ), '/home' ] + : [ translate( 'Back to sites' ), '/sites' ]; + + if ( isDomainForGravatarFlow( flowName ) ) { + backUrl = null; + backLabelText = null; + } else if ( 'with-plugin' === flowName ) { + backUrl = '/plugins'; + backLabelText = translate( 'Back to plugins' ); + } else if ( isWithThemeFlow( flowName ) ) { + backUrl = '/themes'; + backLabelText = translate( 'Back to themes' ); + } else if ( 'plans-first' === flowName ) { + backUrl = getStepUrl( flowName, previousStepName ); + } else { + backUrl = defaultBackUrl; + backLabelText = sitesBackLabelText; + + const backTo = getQueryArg( window.location.href, 'back_to' )?.toString(); + if ( backTo && isRelativeUrl( backTo ) ) { + backUrl = backTo; + backLabelText = translate( 'Back' ); + } + } + + return { + hideBack, + backUrl, + backLabelText, + }; + }, [ flowName, previousStepName, goBack, userSiteCount, translate ] ); + + const getUseDomainIOwnLink = () => { + if ( ! query || ! config.allowsUsingOwnDomain ) { + return null; + } + + return ( + + ); + }; + return ( } /> @@ -282,7 +381,7 @@ function DomainSearchStep( props: StepProps & { locale: string } ) { const baseSubmitProvidedDependencies = useMemo( () => { if ( themeSlug ) { return { - useThemeHeadstartItem: true, + useThemeHeadstart: true, }; } diff --git a/client/signup/steps/domains/rewritten/style.scss b/client/signup/steps/domains/rewritten/style.scss index 25fd459e2e7b..08c0a25bf9df 100644 --- a/client/signup/steps/domains/rewritten/style.scss +++ b/client/signup/steps/domains/rewritten/style.scss @@ -26,4 +26,8 @@ padding-inline: 24px; } } + + .step-wrapper__navigation-link { + color: #1d2327; + } } diff --git a/client/signup/steps/domains/rewritten/types.ts b/client/signup/steps/domains/rewritten/types.ts index 646f5f68804a..cc0c173a3226 100644 --- a/client/signup/steps/domains/rewritten/types.ts +++ b/client/signup/steps/domains/rewritten/types.ts @@ -7,4 +7,6 @@ export type StepProps = { submitSignupStep: ( step: unknown, dependencies: unknown ) => void; queryObject: Record< string, string | undefined >; locale: string; + previousStepName: string | null; + goBack?: () => void; }; diff --git a/packages/domain-search/src/components/search-bar/input.tsx b/packages/domain-search/src/components/search-bar/input.tsx index 8c67775050af..835c6e19e5eb 100644 --- a/packages/domain-search/src/components/search-bar/input.tsx +++ b/packages/domain-search/src/components/search-bar/input.tsx @@ -1,5 +1,6 @@ +import { useDebounce } from '@wordpress/compose'; import { useI18n } from '@wordpress/react-i18n'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { useDomainSearch } from '../../page/context'; import { DomainSearchControls } from '../../ui'; @@ -10,13 +11,8 @@ export const Input = () => { const { query, setQuery } = useDomainSearch(); const [ localQuery, setLocalQuery ] = useState( query ); - useEffect( () => { - const timeout = setTimeout( () => { - setQuery( localQuery ); - }, DELAY_TIMEOUT ); + const debouncedPropagateQuery = useDebounce( setQuery, DELAY_TIMEOUT ); - return () => clearTimeout( timeout ); - }, [ localQuery, setQuery ] ); return ( { if ( trimmedValue ) { setLocalQuery( trimmedValue ); + debouncedPropagateQuery( trimmedValue ); } } } label={ __( 'Search for a domain' ) } diff --git a/packages/domain-search/src/components/skip-suggestion/index.tsx b/packages/domain-search/src/components/skip-suggestion/index.tsx index cd96d214e55a..4be0a1a5afd8 100644 --- a/packages/domain-search/src/components/skip-suggestion/index.tsx +++ b/packages/domain-search/src/components/skip-suggestion/index.tsx @@ -12,7 +12,7 @@ const SkipSuggestion = () => { if ( currentSiteUrl ) { return ( events.onSkip() } disabled={ !! isMutating } /> diff --git a/packages/domain-search/src/page/context.ts b/packages/domain-search/src/page/context.ts index 6c8420b4d00f..2573c8890277 100644 --- a/packages/domain-search/src/page/context.ts +++ b/packages/domain-search/src/page/context.ts @@ -79,10 +79,9 @@ export const useDomainSearch = () => { export const useDomainSearchContextValue = ( props: DomainSearchProps ): typeof DEFAULT_CONTEXT_VALUE => { - const { currentSiteUrl, initialQuery, cart, events, slots, config } = props; + const { currentSiteUrl, query: externalQuery, cart, events, slots, config } = props; const [ isFullCartOpen, setIsFullCartOpen ] = useState( false ); - const [ query, setQuery ] = useState( initialQuery ?? '' ); const [ filter, setFilter ] = useState( { exactSldMatchesOnly: false, tlds: [], @@ -158,9 +157,8 @@ export const useDomainSearchContextValue = ( isFullCartOpen, closeFullCart, openFullCart, - query, + query: externalQuery ?? '', setQuery: ( query ) => { - setQuery( query ); normalizedEvents.onQueryChange( query ); }, slots, @@ -172,8 +170,7 @@ export const useDomainSearchContextValue = ( isFullCartOpen, closeFullCart, openFullCart, - query, - setQuery, + externalQuery, cart, normalizedEvents, slots, diff --git a/packages/domain-search/src/page/types.ts b/packages/domain-search/src/page/types.ts index 53d161f016a6..be7c864dedd9 100644 --- a/packages/domain-search/src/page/types.ts +++ b/packages/domain-search/src/page/types.ts @@ -60,7 +60,7 @@ export interface DomainSearchProps { }; cart: DomainSearchCart; className?: string; - initialQuery?: string; + query?: string; events?: Partial< DomainSearchEvents >; currentSiteUrl?: string; config?: Partial< DomainSearchConfig >; @@ -69,7 +69,7 @@ export interface DomainSearchProps { export interface DomainSearchContextType extends Omit< DomainSearchProps, - 'className' | 'initialQuery' | 'events' | 'config' | 'getPriceRuleForSuggestion' + 'className' | 'events' | 'config' | 'getPriceRuleForSuggestion' > { events: DomainSearchEvents; isFullCartOpen: boolean; diff --git a/packages/onboarding/src/action-buttons/style.scss b/packages/onboarding/src/action-buttons/style.scss index 0bb25f27cb59..984e3c54cdba 100644 --- a/packages/onboarding/src/action-buttons/style.scss +++ b/packages/onboarding/src/action-buttons/style.scss @@ -21,6 +21,7 @@ margin-left: 20px; position: static; border: none; + z-index: initial; .action_buttons__button { margin-left: 20px; diff --git a/packages/onboarding/src/step-container/style.scss b/packages/onboarding/src/step-container/style.scss index 19a3354ba871..d683b535fcde 100644 --- a/packages/onboarding/src/step-container/style.scss +++ b/packages/onboarding/src/step-container/style.scss @@ -146,7 +146,6 @@ justify-content: space-between; display: flex; font-size: 0.875rem; - z-index: 30; bottom: 0; margin: 0; border-top: none;