diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/style.scss index 3bd9437d5b460b..bf023bbd1ded54 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/style.scss +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/style.scss @@ -19,17 +19,7 @@ $container-padding-large: 48px; padding-inline-start: $container-padding-large; padding-inline-end: $container-padding-large; } - - .setup-container__big-sky-container { - position: absolute; - top: $container-padding-small; - right: $container-padding-small; - - @include break-small { - display: none; - } - } - + .step-container__content { margin-top: 32px; } @@ -66,7 +56,7 @@ $container-padding-large: 48px; .formatted-header { margin: 0; flex-grow: 1; - text-align: start; + text-align: center; .formatted-header__title { @include onboarding-font-recoleta; @@ -75,7 +65,7 @@ $container-padding-large: 48px; font-size: 2.15rem; /* stylelint-disable-line scales/font-sizes */ font-weight: 400; padding: 0; - text-align: start; + text-align: center; margin: 0; @include break-large { @@ -85,10 +75,10 @@ $container-padding-large: 48px; .formatted-header__subtitle { padding: 0; - text-align: start; + text-align: center; color: $gray-60; font-size: 1rem; - margin: 12px 0 32px; + margin: 8px 0 32px; line-height: 24px; } } diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx index b2f1928eeaea75..a870bd7a1ac94b 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx @@ -46,7 +46,6 @@ import ThemeTierBadge from 'calypso/components/theme-tier/theme-tier-badge'; import { ThemeUpgradeModal as UpgradeModal } from 'calypso/components/theme-upgrade-modal'; import { ActiveTheme, useActiveThemeQuery } from 'calypso/data/themes/use-active-theme-query'; import { useIsBigSkyEligible } from 'calypso/landing/stepper/hooks/use-is-site-big-sky-eligible'; -import TrackComponentView from 'calypso/lib/analytics/track-component-view'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import { useExperiment } from 'calypso/lib/explat'; import { navigate } from 'calypso/lib/navigate'; @@ -931,19 +930,8 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => { navigate( `/setup/site-setup/launch-big-sky?siteSlug=${ siteSlug }&siteId=${ site?.ID }` ); } - const bigSkyButton = isBigSkyEligible && ( - <> - - - - ); - const stepContent = ( <> -
{ bigSkyButton }
= ( { alt="" options={ getMShotOptions( { scrollable: false, - highRes: ! isMobile, - isMobile, - oldHighResImageLoading, + highRes: true, + isMobile: false, + oldHighResImageLoading: ! isMobile, } ) } scrollable={ false } /> diff --git a/packages/design-picker/src/components/style.scss b/packages/design-picker/src/components/style.scss index de0483afe79af8..8de01189b0567b 100644 --- a/packages/design-picker/src/components/style.scss +++ b/packages/design-picker/src/components/style.scss @@ -27,11 +27,21 @@ } .design-picker__design-card-group { + margin-bottom: 24px; + + @include break-medium { + margin-bottom: 40px; + } + + @include break-large { + margin-bottom: 64px; + } + .design-picker__design-card-title { position: sticky; top: 0; padding: 16px 12px 12px; - margin: -16px -12px 0; + margin: 0 -12px 0; color: var(--studio-black); background-color: var(--color-body-background); font-size: $font-title-small; @@ -47,7 +57,11 @@ } .design-picker__grid { - margin-bottom: 32px; + margin-bottom: 24px; + + @include break-medium { + margin-bottom: 32px; + } } .theme-card__info { @@ -58,11 +72,6 @@ margin-top: 12px; } } - - .design-picker__design-card-group-footer { - margin-top: -12px; - margin-bottom: 36px; - } } .design-picker__grid { @@ -121,7 +130,7 @@ @include break-medium { grid-template-columns: 1fr 1fr; column-gap: 40px; - row-gap: 48px; + row-gap: 40px; } } @@ -311,11 +320,6 @@ } } } - - .design-button-container .design-picker__design-option .design-picker__image-frame:hover::after, - .theme-card--is-actionable .theme-card__image:hover::after { - background-color: rgba(255, 255, 255, 0.72); - } } .design-button-container { @@ -393,11 +397,12 @@ .design-picker__grid { @supports ( display: grid ) { - row-gap: 48px; + row-gap: 24px; @include break-medium { grid-template-columns: 1fr 1fr 1fr; column-gap: 40px; + row-gap: 40px; } } } diff --git a/packages/design-picker/src/components/theme-card/style.scss b/packages/design-picker/src/components/theme-card/style.scss index c6d4ce55609280..1696381fa79a12 100644 --- a/packages/design-picker/src/components/theme-card/style.scss +++ b/packages/design-picker/src/components/theme-card/style.scss @@ -52,21 +52,24 @@ $theme-card-info-margin-top: 16px; } .theme-card__image-container { - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: 0 15px 25px rgba(0, 0, 0, 0.05); + box-shadow: 0 12px 20px rgba(0, 0, 0, 0.04); + border: 1px solid rgba(220,220,222,0.4); overflow: hidden; padding-top: 74%; position: relative; + border-radius: 4px; + transition: transform 100ms ease-out; } .theme-card--is-actionable { .theme-card__image { + transition: transform 300ms ease-in-out; + &:hover, &:focus { - opacity: 0.9; + transform: scale(1.03); .theme-card__image-label { - opacity: 1; animation: theme-card__image-label 150ms ease-in-out; } } diff --git a/packages/design-picker/src/components/unified-design-picker.tsx b/packages/design-picker/src/components/unified-design-picker.tsx index 9f2cbd6f4dec51..2ab9c5890bff2d 100644 --- a/packages/design-picker/src/components/unified-design-picker.tsx +++ b/packages/design-picker/src/components/unified-design-picker.tsx @@ -272,16 +272,24 @@ const DesignCardGroup = ( { interface DesignPickerFilterGroupProps { title?: string; grow?: boolean; + isBigSkyEligible?: boolean; children: React.ReactNode; } const DesignPickerFilterGroup: React.FC< DesignPickerFilterGroupProps > = ( { title, grow, + isBigSkyEligible, children, } ) => { return ( -
+
{ title }
{ children }
@@ -379,7 +387,11 @@ const DesignPicker: React.FC< DesignPickerProps > = ( { ) } { categorization && categoryTopics.length && ( - +