My Jetpack: update notice style on mobile (#39537)

* My Jetpack: update notice mobile style * changelog * Update notice style to the same when there's title
Automattic · Sep 27, 2024 · 4520ed0 · 4520ed0
1 parent 965b8ba
commit 4520ed0
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 0 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss
@@ -69,6 +69,15 @@
 				align-items: center;
 			}
 		}
+
+		@media screen and ( max-width: 600px ) {
+			padding-top: 24px;
+
+			// this is the selector for `.icon-wrapper` in the .notice component
+			& > div:has(svg) {
+				position: initial;
+			}
+		}
 	}
 
 	.cta {

diff --git a/projects/packages/my-jetpack/changelog/update-my-jetpack-notice-mobile-style b/projects/packages/my-jetpack/changelog/update-my-jetpack-notice-mobile-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: visual update to make the GlobalNotice component look better on mobile.
diff --git a/projects/plugins/backup/changelog/update-my-jetpack-notice-mobile-style b/projects/plugins/backup/changelog/update-my-jetpack-notice-mobile-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: visual update to the GlobalNotice component look better on mobile.
diff --git a/projects/plugins/boost/changelog/update-my-jetpack-notice-mobile-style b/projects/plugins/boost/changelog/update-my-jetpack-notice-mobile-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: visual update to the GlobalNotice component look better on mobile.
diff --git a/projects/plugins/jetpack/changelog/update-my-jetpack-notice-mobile-style b/projects/plugins/jetpack/changelog/update-my-jetpack-notice-mobile-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+My Jetpack: visual update to the GlobalNotice component look better on mobile.
diff --git a/projects/plugins/migration/changelog/update-my-jetpack-notice-mobile-style b/projects/plugins/migration/changelog/update-my-jetpack-notice-mobile-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: visual update to the GlobalNotice component look better on mobile.
diff --git a/projects/plugins/protect/changelog/update-my-jetpack-notice-mobile-style b/projects/plugins/protect/changelog/update-my-jetpack-notice-mobile-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: visual update to the GlobalNotice component look better on mobile.
diff --git a/projects/plugins/search/changelog/update-my-jetpack-notice-mobile-style b/projects/plugins/search/changelog/update-my-jetpack-notice-mobile-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: visual update to the GlobalNotice component look better on mobile.
diff --git a/projects/plugins/social/changelog/update-my-jetpack-notice-mobile-style b/projects/plugins/social/changelog/update-my-jetpack-notice-mobile-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: visual update to the GlobalNotice component look better on mobile.
diff --git a/projects/plugins/starter-plugin/changelog/update-my-jetpack-notice-mobile-style b/projects/plugins/starter-plugin/changelog/update-my-jetpack-notice-mobile-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: visual update to the GlobalNotice component look better on mobile.
diff --git a/projects/plugins/videopress/changelog/update-my-jetpack-notice-mobile-style b/projects/plugins/videopress/changelog/update-my-jetpack-notice-mobile-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: visual update to the GlobalNotice component look better on mobile.