Task component: add support for single column layout (#96722)

* add support for single column layout for task component * address feedback
Automattic · Nov 25, 2024 · e602951 · e602951
1 parent 986ff7c
commit e602951
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/client/my-sites/customer-home/cards/tasks/domain-upsell/style.scss b/client/my-sites/customer-home/cards/tasks/domain-upsell/style.scss
@@ -1,3 +1,6 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
 $illustration-top: 32px;
 $illustration-layer-offset: 16px;
 $illustration-height: 139px;
@@ -7,9 +10,12 @@ $illustration-width: 214px;
 	&.task__domain-upsell {
 		.task__illustration {
 			display: flex;
-			width: calc(45% + 32px);
-			margin-bottom: -32px !important;
-			margin-right: -32px !important;
+
+			@include break-small {
+				width: calc(45% + 32px);
+				margin-bottom: -32px !important;
+				margin-right: -32px !important;
+			}
 		}
 	}
 	.task__domain-upsell-illustration {

diff --git a/client/my-sites/customer-home/cards/tasks/style.scss b/client/my-sites/customer-home/cards/tasks/style.scss
@@ -3,26 +3,27 @@
 
 .task {
 	display: flex;
+	flex-direction: column;
 	position: relative;
 	margin-top: 0;
 	margin-bottom: 30px;
 	border-radius: 3px;
 
-	@include breakpoint-deprecated( ">660px" ) {
+	@include break-small {
+		flex-direction: row;
 		box-shadow: 0 0 0 1px var(--color-border-subtle);
 		margin-bottom: 16px;
 	}
 
 	.task__text,
 	.task__illustration {
 		box-sizing: border-box;
-		padding: 24px 24px 0;
 
-		@include breakpoint-deprecated( ">660px" ) {
+		@include break-small {
 			padding: 24px 16px;
 		}
 
-		@include breakpoint-deprecated( ">1040px" ) {
+		@include break-xlarge {
 			padding: 32px 24px;
 		}
 	}
@@ -35,11 +36,17 @@
 	}
 
 	.task__illustration {
-		width: 33.33%;
+		width: 100%;
 		align-self: center;
 		flex-shrink: 0;
 		margin-left: auto;
 		text-align: center;
+		margin-top: 32px;
+
+		@include break-small {
+			width: 33.33%;
+			margin-top: 0;
+		}
 	}
 
 	.task__timing {
@@ -66,7 +73,7 @@
 		line-height: 36px;
 		margin-bottom: 16px;
 
-		@include breakpoint-deprecated( ">800px" ) {
+		@include break-medium {
 			line-height: 40px;
 		}
 	}
@@ -77,7 +84,7 @@
 		line-height: 24px;
 		color: var(--color-text-subtle);
 
-		@include breakpoint-deprecated( ">800px" ) {
+		@include break-medium {
 			line-height: 28px;
 			margin-bottom: 32px;
 		}

diff --git a/client/my-sites/customer-home/style.scss b/client/my-sites/customer-home/style.scss
@@ -299,10 +299,6 @@ body.is-section-home.theme-default.color-scheme {
 			margin-right: 0;
 		}
 
-		.task__illustration {
-			text-align: right;
-		}
-
 		// 32px spacing for everything except the space before the CTA (48px)
 		.task__text {
 			gap: 16px;