My Home: Fix inconsistencies between the different cards on mobile (#…

…97070)
Automattic · Dec 10, 2024 · 64f6288 · 64f6288
1 parent 8a2935b
commit 64f6288
Show file tree

Hide file tree

Showing 17 changed files with 162 additions and 166 deletions.
diff --git a/client/blocks/app-promo/style.scss b/client/blocks/app-promo/style.scss
@@ -2,15 +2,6 @@
 @import "@wordpress/base-styles/mixins";
 
 .app-promo {
-	&.customer-home__card.card {
-		border-bottom: none;
-
-		@include break-large {
-			padding-left: 48px;
-			box-shadow: none;
-		}
-	}
-
 	.app-promo__icon {
 		display: block;
 		margin: 0 auto 6px;

diff --git a/client/components/blogging-prompt-card/index.jsx b/client/components/blogging-prompt-card/index.jsx
@@ -103,7 +103,7 @@ const BloggingPromptCard = ( { siteId, viewContext, showMenu, index } ) => {
 		<div className="blogging-prompt">
 			<Card
 				className={ clsx( 'blogging-prompt__card', {
-					'customer-home__card': viewContext === 'home',
+					'customer-home__card is-small-hero': viewContext === 'home',
 				} ) }
 			>
 				<PromptsNavigation

diff --git a/client/components/blogging-prompt-card/style.scss b/client/components/blogging-prompt-card/style.scss
@@ -1,6 +1,6 @@
 .blogging-prompt {
 	/* Blogging Prompt Card ------------------------ */
-	.card.blogging-prompt__card {
+	.card:not(.customer-home__card).blogging-prompt__card {
 		padding: 24px;
 	}
 	/* Blogging Prompt Header ------------------------ */

diff --git a/client/my-sites/customer-home/cards/actions/quick-links/style.scss b/client/my-sites/customer-home/cards/actions/quick-links/style.scss
@@ -2,7 +2,6 @@
 @import "@wordpress/base-styles/mixins";
 
 .quick-links.foldable-card.card {
-	box-shadow: none;
 	@include breakpoint-deprecated( ">660px" ) {
 		border-radius: 3px;
 	}

diff --git a/client/my-sites/customer-home/cards/actions/wp-for-teams-quick-links/index.jsx b/client/my-sites/customer-home/cards/actions/wp-for-teams-quick-links/index.jsx
@@ -86,7 +86,7 @@ export const QuickLinks = ( {
 
 	return (
 		<FoldableCard
-			className="wp-for-teams-quick-links quick-links"
+			className="wp-for-teams-quick-links quick-links customer-home__card"
 			header={ translate( 'Quick Links' ) }
 			clickableHeader
 			expanded={ isExpanded }

diff --git a/client/my-sites/customer-home/cards/features/domain-upsell/index.jsx b/client/my-sites/customer-home/cards/features/domain-upsell/index.jsx
@@ -228,7 +228,7 @@ export function RenderDomainUpsell( {
 	const illustrationHeader = domainSuggestionName ? domainNameSVG : null;
 
 	return (
-		<Card className="domain-upsell__card customer-home__card">
+		<Card className="domain-upsell__card customer-home__card is-large-hero">
 			<QueryProductsList />
 			<TrackComponentView eventName="calypso_my_home_domain_upsell_impression" />
 			<div>

diff --git a/client/my-sites/customer-home/cards/features/domain-upsell/style.scss b/client/my-sites/customer-home/cards/features/domain-upsell/style.scss
@@ -2,13 +2,6 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 
-body .customer-home__layout .domain-upsell__card {
-	padding: 16px 16px 20px;
-	@include break-small {
-		padding: 32px 24px;
-	}
-}
-
 .domain-upsell__card {
 	h3 {
 		font-family: $brand-serif;

diff --git a/client/my-sites/customer-home/cards/features/help-search/style.scss b/client/my-sites/customer-home/cards/features/help-search/style.scss
@@ -6,18 +6,6 @@ $card_padding_large: 24px;
 $min_results_height: 180px;
 
 .customer-home__layout .help-search {
-	&.card {
-		padding: 0;
-	}
-
-	.help-search__inner {
-		padding: 0 16px;
-
-		@include breakpoint-deprecated( ">660px" ) {
-			padding: 16px 24px 0;
-		}
-	}
-
 	.card-heading {
 		margin-bottom: 16px;
 	}
@@ -27,26 +15,17 @@ $min_results_height: 180px;
 		justify-content: space-between;
 	}
 
-	.help-search__footer {
-		margin-bottom: 30px;
-		@include breakpoint-deprecated( ">660px" ) {
-			margin-bottom: 6px;
-		}
-	}
-
 	.help-search__cta {
 		display: flex;
 		align-items: center;
-		width: 100%;
-		padding: 10px $card_padding_small;
+		width: calc(100% + $card_padding_large * 2);
+		height: auto;
+		padding-left: $card_padding_large;
+		padding-right: $card_padding_large;
+		margin-left: -$card_padding_large;
+		margin-right: -$card_padding_large;
 		color: var(--color-text);
-		line-height: 1;
 		font-size: inherit;
-		height: auto;
-
-		@include break-mobile {
-			padding: 10px $card_padding_large;
-		}
 
 		&:hover,
 		&:focus {
@@ -93,8 +72,8 @@ $min_results_height: 180px;
 	}
 
 	.inline-help__search {
-		// Don't allow ellipsis items to flow outside box
-		width: 100%;
+		width: 100%; // Don't allow ellipsis items to flow outside box
+		padding: 0 0 16px 0;
 	}
 
 	.inline-help__results-item {
@@ -103,55 +82,35 @@ $min_results_height: 180px;
 
 		a {
 			text-decoration: none;
-			line-height: 1;
 			padding: 10px $card_padding_small;
 
 			// Ellipsis overflow handling
-			display: block;
+			display: flex;
+			align-items: center;
 			flex: 1;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 
 			.gridicon,
 			svg {
-				margin: 0 5px -3px 0;
-				position: relative;
-				top: 2px;
+				top: 0;
 			}
 
 			&:hover,
 			&:focus {
 				cursor: pointer;
 			}
-
-			@include break-mobile {
-				padding-left: $card_padding_large;
-				padding-right: $card_padding_large;
-			}
 		}
 	}
 
 	.inline-help__results {
 		min-height: $min_results_height;
-		padding: #{$search_results_top_spacing - 1px} 0 0 0;
-		margin-left: -$card_padding_small;
-		margin-right: -$card_padding_small;
-
-		@include break-mobile {
-			margin-left: -$card_padding_large;
-			margin-right: -$card_padding_large;
-		}
 	}
 
 	.inline-help__results-title {
-		padding-left: $card_padding_small;
-		padding-right: $card_padding_small;
-
-		@include break-mobile {
-			padding-left: $card_padding_large;
-			padding-right: $card_padding_large;
-		}
+		padding-left: 0;
+		padding-right: 0;
 	}
 
 	.inline-help__empty-results {

diff --git a/client/my-sites/customer-home/cards/features/site-preview/index.tsx b/client/my-sites/customer-home/cards/features/site-preview/index.tsx
@@ -87,7 +87,7 @@ const SitePreview = ( {
 	const selectedSiteName = selectedSite ? selectedSite.name : '&nbsp;';
 
 	return (
-		<div className="home-site-preview">
+		<div className="home-site-preview customer-home__card is-full-width">
 			<ThumbnailWrapper showEditSite={ shouldShowEditSite } editSiteURL={ editSiteURL }>
 				{ shouldShowEditSite && (
 					<Button primary className="home-site-preview__thumbnail-label">

diff --git a/client/my-sites/customer-home/cards/features/site-preview/style.scss b/client/my-sites/customer-home/cards/features/site-preview/style.scss
@@ -65,7 +65,11 @@
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
-		padding: 16px 0 0 0;
+		padding: 32px 0 0 0;
+
+		@include break-small {
+			padding: 16px 0 0 0;
+		}
 
 		.home-site-preview__site-info {
 			display: flex;

diff --git a/client/my-sites/customer-home/cards/features/stats/style.scss b/client/my-sites/customer-home/cards/features/stats/style.scss
@@ -2,8 +2,6 @@
 
 .stats .customer-home__card.stats__with-chart {
 	box-shadow: none;
-	border-bottom: none;
-	margin-bottom: 0;
 
 	@include breakpoint-deprecated( ">660px" ) {
 		padding: 16px 24px 0;

diff --git a/client/my-sites/customer-home/cards/launchpad/index.tsx b/client/my-sites/customer-home/cards/launchpad/index.tsx
@@ -59,7 +59,7 @@ const CustomerHomeLaunchpad: FC< CustomerHomeLaunchpadProps > = ( {
 	const permanentDismiss = () => dismiss( { isDismissed: true } );
 
 	return (
-		<div className="customer-home-launchpad">
+		<div className="customer-home-launchpad customer-home__card is-small-hero">
 			<div className={ headerClasses }>
 				<h2 className="customer-home-launchpad__title">{ launchpadTitle }</h2>
 				{ numberOfSteps > completedSteps ? (

diff --git a/client/my-sites/customer-home/cards/launchpad/style.scss b/client/my-sites/customer-home/cards/launchpad/style.scss
@@ -8,7 +8,7 @@
 	box-shadow: 0 0 0 1px var(--color-border-subtle);
 	margin-bottom: 16px;
 
-	@include break-mobile {
+	@include break-small {
 		border-radius: 3px;
 	}
 

diff --git a/client/my-sites/customer-home/cards/notices/celebrate-notice/index.jsx b/client/my-sites/customer-home/cards/notices/celebrate-notice/index.jsx
@@ -25,6 +25,7 @@ const CelebrateNotice = ( {
 	const dispatch = useDispatch();
 	const { skipCurrentView } = useSkipCurrentViewMutation( siteId );
 
+	const showActions = showAction || showSkip;
 	const showNextTask = () => {
 		setIsLoading( true );
 		skipCurrentView();
@@ -55,28 +56,34 @@ const CelebrateNotice = ( {
 	};
 
 	return (
-		<div className={ clsx( 'celebrate-notice', 'task', { 'is-loading': isLoading } ) }>
+		<div
+			className={ clsx( 'celebrate-notice', 'task', 'customer-home__card', 'is-large-hero', {
+				'is-loading': isLoading,
+			} ) }
+		>
 			{ isLoading && <Spinner /> }
 			<div className="celebrate-notice__text task__text">
 				<h2 className="celebrate-notice__title task__title">{ title }</h2>
 				<p className="celebrate-notice__description task__description">{ description }</p>
-				<div className="celebrate-notice__actions task__actions">
-					{ showAction && (
-						<Button
-							className="celebrate-notice__action task__action"
-							primary
-							onClick={ showNextTask }
-						>
-							{ actionText }
-						</Button>
-					) }
+				{ showActions && (
+					<div className="celebrate-notice__actions task__actions">
+						{ showAction && (
+							<Button
+								className="celebrate-notice__action task__action"
+								primary
+								onClick={ showNextTask }
+							>
+								{ actionText }
+							</Button>
+						) }
 
-					{ showSkip && (
-						<Button className="celebrate-notice__skip task__skip is-link" onClick={ skip }>
-							{ skipText }
-						</Button>
-					) }
-				</div>
+						{ showSkip && (
+							<Button className="celebrate-notice__skip task__skip is-link" onClick={ skip }>
+								{ skipText }
+							</Button>
+						) }
+					</div>
+				) }
 			</div>
 			{ isDesktop() && (
 				<div className="celebrate-notice__illustration task__illustration">

diff --git a/client/my-sites/customer-home/cards/notices/reader-first-posts/index.jsx b/client/my-sites/customer-home/cards/notices/reader-first-posts/index.jsx
@@ -16,7 +16,7 @@ const ReaderFirstPosts = () => {
 	};
 
 	return (
-		<Card className="reader-first-posts__nudge">
+		<Card className="reader-first-posts__nudge customer-home__card is-small-hero">
 			<TrackComponentView
 				eventName="calypso_my_home_reader_first_posts_nudge_view"
 				eventProperties={ {

diff --git a/client/my-sites/customer-home/cards/tasks/style.scss b/client/my-sites/customer-home/cards/tasks/style.scss
@@ -7,22 +7,19 @@
 	position: relative;
 	margin-top: 0;
 	margin-bottom: 30px;
-	border-radius: 3px;
 
 	@include break-small {
 		flex-direction: row;
 		box-shadow: 0 0 0 1px var(--color-border-subtle);
 		margin-bottom: 16px;
+		border-radius: 3px;
 	}
 
 	.task__text,
 	.task__illustration {
+		padding: 24px 16px;
 		box-sizing: border-box;
 
-		@include break-small {
-			padding: 24px 16px;
-		}
-
 		@include break-xlarge {
 			padding: 32px 24px;
 		}
@@ -31,8 +28,11 @@
 	.task__text {
 		display: flex;
 		flex-direction: column;
-		margin-top: 16px;
 		align-items: flex-start;
+
+		> :last-child {
+			margin-bottom: 0;
+		}
 	}
 
 	.task__illustration {
@@ -42,7 +42,7 @@
 		margin-left: auto;
 		text-align: center;
 		margin-top: 32px;
-		
+
 		@include break-small {
 			width: 33.33%;
 			margin-top: 0;
@@ -83,7 +83,7 @@
 		font-size: $font-body;
 		line-height: 24px;
 		color: var(--color-text-subtle);
-		
+
 		@include break-medium {
 			line-height: 28px;
 			margin-bottom: 32px;