Fix/design picker layout

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;
 			}
 		}

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 && (
-		<>
-			<Button onClick={ onDesignWithAI }>{ translate( 'Design with AI' ) }</Button>
-			<TrackComponentView
-				eventName="calypso_design_picker_big_sky_button_impression"
-				eventProperties={ commonFilterProperties }
-			/>
-		</>
-	);
-
 	const stepContent = (
 		<>
-			<div className="setup-container__big-sky-container">{ bigSkyButton }</div>
 			<UnifiedDesignPicker
 				designs={ designs }
 				locale={ locale }

packages/components/src/responsive-toolbar-group/style.scss

@@ -74,7 +74,7 @@
 }
 
 .responsive-toolbar-group__swipe {
-	width: 100%;
+	width: calc(100% + 20px);
 
 	.responsive-toolbar-group__swipe-list {
 		padding: 0 8px;

packages/design-picker/src/components/design-picker-category-filter/style.scss

@@ -7,11 +7,13 @@
 	justify-content: space-between;
 	flex-direction: column;
 	gap: 10px;
-	margin-bottom: 40px;
+	margin-bottom: 24px;
 
-	@include break-medium {
+	@include break-large {
 		flex-direction: row;
-		align-items: flex-end;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 40px;
 		gap: 24px;
 	}
 
@@ -43,12 +45,8 @@
 				background-color: var(--studio-wordpress-blue);
 			}
 
-			&:hover {
-				opacity: 0.95;
-			}
-
-			&:active {
-				opacity: 0.9;
+			&:hover::before {
+				background-color: var(--studio-wordpress-blue-60);
 			}
 		}
 	}
@@ -86,15 +84,31 @@
 	.design-picker__category-group {
 		display: flex;
 		flex-direction: column;
-		&.grow {
-			flex-grow: 1;
+
+		@include break-large {
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+
+			&.design-picker__category-group--flex {
+				min-width: 480px;
+				display: inline-flex;
+			}
+
+			&.design-picker__category-group--grow {
+				flex-grow: 1;
+			}
 		}
 
 		.design-picker__category-group-content {
 			display: flex;
 			align-items: center;
 			flex-wrap: wrap;
 			gap: 8px 16px;
+
+			@include break-large{
+				flex-grow: 1;
+			}
 		}
 	}
 
@@ -116,8 +130,11 @@
 
 	.design-picker__design-with-ai {
 		display: none;
+		margin-bottom: 0;
+		padding-top: 6px; // vertically align with filters
+		padding-bottom: 6px;
 
-		@include break-small {
+		@include break-large {
 			display: block;
 		}
 	}

packages/design-picker/src/components/design-preview-image/index.tsx

@@ -61,9 +61,9 @@ const DesignPreviewImage: FC< DesignPreviewImageProps > = ( {
 			alt=""
 			options={ getMShotOptions( {
 				scrollable: false,
-				highRes: ! isMobile,
-				isMobile,
-				oldHighResImageLoading,
+				highRes: true,
+				isMobile: false,
+				oldHighResImageLoading: ! isMobile,
 			} ) }
 			scrollable={ false }
 		/>

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;
 			}
 		}
 	}

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;
 			}
 		}

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 (
-		<div className={ clsx( 'design-picker__category-group', { grow } ) }>
+		<div
+			className={ clsx( 'design-picker__category-group', {
+				// eslint-disable-next-line eqeqeq
+				'design-picker__category-group--flex': grow && ! isBigSkyEligible,
+				'design-picker__category-group--grow': isBigSkyEligible,
+			} ) }
+		>
 			<div className="design-picker__category-group-label">{ title }</div>
 			<div className="design-picker__category-group-content">{ children }</div>
 		</div>
@@ -379,7 +387,11 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 					</DesignPickerFilterGroup>
 				) }
 				{ categorization && categoryTopics.length && (
-					<DesignPickerFilterGroup title={ isMultiFilterEnabled ? translate( 'Topic' ) : '' } grow>
+					<DesignPickerFilterGroup
+						title={ isMultiFilterEnabled ? translate( 'Topic' ) : '' }
+						grow={ ! isBigSkyEligible }
+						isBigSkyEligible={ isBigSkyEligible }
+					>
 						<DesignPickerCategoryFilter
 							categories={ isMultiFilterEnabled ? categoryTopics : categorization.categories }
 							onSelect={ categorization.onSelect }