Theme Showcase: Post design review polish (modern version) (#109388)

Author: Copons

client/components/theme-tier/theme-tier-badge/style.scss

@@ -85,4 +85,11 @@
 	.components-button {
 		font-size: inherit;
 	}
-}
+}
+
+.is-theme-showcase-modern {
+	.premium-badge,
+	.theme-tier-free-included-label {
+		border-radius: 24px;
+	}
+}

client/my-sites/themes/banners-modern/difm-banner.tsx

@@ -22,7 +22,7 @@ const DIFMBanner = () => {
 				<p className="banner-modern__description">
 					{ preventWidows(
 						translate(
-							'Built by WordPress.com experts and fully managed for you\u2014no coding or setup required.'
+							'Launch faster and sell smarter with features designed to save time and delight your customers.'
 						)
 					) }
 				</p>

client/my-sites/themes/banners-modern/style.scss

@@ -16,6 +16,9 @@
 	@include break-mobile {
 		max-width: 60%;
 	}
+	@include break-large {
+		max-width: 40%;
+	}
 }
 
 .banner-modern__title {
@@ -75,6 +78,7 @@
 			var(--ai-builder-banner-linear-gradient-overlay),
 			url( ./ai-builder-background.png ) no-repeat bottom right -400px / cover,
 			var(--ai-builder-banner-linear-gradient-underlay);
+		padding: 40px;
 	}
 	@include break-medium {
 		background:
@@ -170,13 +174,20 @@
 	padding-bottom: 288px;
 
 	@include break-mobile {
-		background: url( ./difm-background.png ) no-repeat center right 24px / 35%;
+		background: url( ./difm-background.png ) no-repeat center right 40px / 35%;
 		background-color: var( --studio-gray-0 );
-		padding: 24px;
+		padding: 40px;
 	}
-
 	@include break-medium {
 		padding-bottom: 72px;
 		padding-top: 72px;
 	}
+	@include break-large {
+		background: url( ./difm-background.png ) no-repeat center right 40px / 50%;
+		background-color: var( --studio-gray-0 );
+	}
+	@include break-xlarge {
+		background: url( ./difm-background.png ) no-repeat center right 40px / 40%;
+		background-color: var( --studio-gray-0 );
+	}
 }

client/my-sites/themes/banners-modern/test/difm-banner.test.tsx

@@ -22,9 +22,7 @@ describe( 'DIFMBanner', () => {
 
 	test( 'renders subtitle', () => {
 		render( <DIFMBanner /> );
-		expect(
-			screen.getByText( /Built by WordPress\.com experts and fully managed for you/ )
-		).toBeVisible();
+		expect( screen.getByText( /Launch faster and sell smarter with features/ ) ).toBeVisible();
 	} );
 
 	test( 'renders CTA button linking to DIFM landing page', () => {

client/my-sites/themes/filter-bar-modern/style.scss

@@ -19,6 +19,11 @@
 		.category-pill-navigation__button {
 			text-decoration: none;
 
+			&:not(.is-active):hover, &:not(.is-active):focus {
+				background-color: var( --studio-gray-10 );
+				color: var( --studio-gray-80 );
+			}
+
 			&:first-child {
 				margin-left: 0;
 			}
@@ -31,7 +36,7 @@
 	display: flex;
 	margin: 0 auto;
 	max-width: 1220px;
-	padding: 24px;
+	padding: 32px 24px;
 
 	@media ( min-width: $break-wide ) {
 		padding-left: 0;

client/my-sites/themes/hero-modern/style.scss

@@ -45,6 +45,7 @@ $hero-modern-navbar-height: 57px; // UniversalHeaderNavigation
 	font-weight: 400;
 	line-height: 1;
 	margin: 0 0 8px 0;
+	text-wrap: balance;
 
 	@media ( min-width: $break-small ) {
 		font-size: rem(70px);
@@ -56,6 +57,7 @@ $hero-modern-navbar-height: 57px; // UniversalHeaderNavigation
 	font-size: $font-body-large;
 	line-height: 1.5;
 	margin: 0;
+	text-wrap: balance;
 }
 
 .hero-modern__search {
@@ -70,11 +72,15 @@ $hero-modern-navbar-height: 57px; // UniversalHeaderNavigation
 		height: 55px;
 
 		.components-input-control__container {
+			.components-input-control__prefix {
+				color: var(--studio-gray-30);
+			}
 			input.components-input-control__input {
+				color: var(--studio-gray-90);
 				font-size: $font-body;
 			}
 			.components-input-control__backdrop {
-				border-color: var(--studio-gray-5);
+				border-color: transparent;
 				border-radius: 4px;
 			}
 		}

client/my-sites/themes/sections-modern/style.scss

@@ -7,7 +7,7 @@
 	--theme-section-text: var(--studio-gray-100);
 	--theme-section-text-secondary: var(--studio-gray-80);
 
-	margin-bottom: 96px;
+	margin-bottom: 108px;
 	padding-inline: 24px;
 
 	&:last-child {
@@ -21,7 +21,7 @@
 	--theme-section-text-secondary: var(--studio-gray-10);
 
 	background-color: var(--theme-section-bg);
-	padding: 24px 24px 96px 24px;
+	padding: 48px 24px 96px 24px;
 }
 
 .theme-section-header {
@@ -64,11 +64,13 @@
 .theme-section-header__button.components-button.is-secondary {
 	--wp-components-color-accent: var(--studio-gray-80);
 	--wp-components-color-accent-darker-20: var(--studio-gray-100);
+	padding-left: 20px;
+	padding-right: 20px;
 }
 
 .theme-section-modern__grid {
 	display: grid;
-	gap: 24px;
+	gap: 48px;
 	grid-template-columns: 1fr;
 	margin: 0 auto;
 	max-width: 1220px;
@@ -96,7 +98,12 @@
 }
 
 .recommended-sections .banner-modern {
-	margin: 96px auto;
+	margin: 108px auto;
 	max-width: calc( 1220px - 48px);
 	width: calc( 100% - 48px - 48px);
+
+	@include break-mobile {
+		max-width: calc( 1220px - 80px);
+		width: calc( 100% - 48px - 80px);
+	}
 }

client/my-sites/themes/theme-showcase.scss

@@ -639,10 +639,10 @@
 	}
 
 	.themes-list {
+		gap: 48px;
 		margin: 0 auto;
 
 		@include break-small {
-			gap: 32px;
 			grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 			max-width: 1220px;
 		}
@@ -658,6 +658,14 @@
 		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
 	}
 
+	.theme-card__info {
+		height: auto;
+	}
+
+	.theme-card__info-title {
+		font-size: 18px;
+	}
+
 	// Hide style variation swatches for logged-out modern view
 	.theme-card__info-style-variations {
 		display: none;

client/my-sites/themes/themes-faq/index.tsx

@@ -155,7 +155,7 @@ export default function ThemesFAQ() {
 		<div className="themes-faq">
 			<div className="themes-faq__wrapper">
 				<div className="themes-faq__header">
-					<h2 className="themes-faq__title">{ translate( 'Themes FAQs' ) }</h2>
+					<h2 className="themes-faq__title">{ translate( 'WordPress theme FAQs' ) }</h2>
 				</div>
 				<div className="themes-faq__list">
 					{ faqItems.map( ( item ) => (

client/my-sites/themes/themes-faq/style.scss

@@ -46,9 +46,11 @@
 	line-height: 1.2;
 	color: var( --studio-white );
 	margin: 0;
+	text-wrap: balance;
 
 	@include break-large {
 		font-size: rem( 50px );
+		max-width: 500px;
 	}
 }