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 (
-
+
@@ -379,7 +387,11 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
) }
{ categorization && categoryTopics.length && (
-
+