Apply modifier to child element to reduce nesting

Author: aduth

client/my-sites/plugins/marketplace-footer/index.tsx

@@ -15,9 +15,6 @@ export const MarketplaceFooter = () => {
 	const isLoggedIn = useSelector( isUserLoggedIn );
 	const currentUserSiteCount = useSelector( getCurrentUserSiteCount );
 	const sectionName = useSelector( getSectionName );
-	const classes = clsx( styles[ 'marketplace-footer' ], {
-		[ styles[ 'is-logged-in' ] ]: isLoggedIn,
-	} );
 
 	const startUrl = addQueryArgs(
 		{
@@ -27,10 +24,12 @@ export const MarketplaceFooter = () => {
 	);
 
 	return (
-		<div className={ classes }>
+		<div className={ styles[ 'marketplace-footer' ] }>
 			<Section
 				header={ preventWidows( __( 'You pick the plugin. We’ll take care of the rest.' ) ) }
-				className={ styles[ 'marketplace-footer__section' ] }
+				className={ clsx( styles[ 'marketplace-footer__section' ], {
+					[ styles[ 'is-logged-in' ] ]: isLoggedIn,
+				} ) }
 			>
 				{ ( ! isLoggedIn || currentUserSiteCount === 0 ) && (
 					<Button primary className={ styles[ 'marketplace-footer__cta' ] } href={ startUrl }>

client/my-sites/plugins/marketplace-footer/style.module.css

@@ -6,10 +6,10 @@
     & .marketplace-footer__section::before {
         background-color: var( --studio-gray-0 );
     }
+}
 
-    &:not(.is-logged-in) .marketplace-footer__section {
-        padding-bottom: 32px;
-    }
+.marketplace-footer__section.is-logged-in {
+	padding-bottom: 32px;
 }
 
 .marketplace-footer__cta {