Masterbar: Show notification+help icons on mobile (#38438)

* Masterbar: Show notification/help icon on small screen sizes * changelog * Remove currentColor from background * Update background color for overlapping issue on mobile * Update background color in masterbar package * changelog * Don't use colors.css * Add a comment --------- Co-authored-by: okmttdhr <[email protected]>
Automattic · Jul 22, 2024 · 1e73849 · 1e73849
1 parent 21ce5f9
commit 1e73849
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 4 deletions.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-notifications-help-icons-on-mobile b/projects/packages/jetpack-mu-wpcom/changelog/update-notifications-help-icons-on-mobile
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Show notifications and help icons on mobile
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss
@@ -87,8 +87,63 @@
 /**
  * Profile section of the admin bar
  */
-#wpadminbar #wp-admin-bar-top-secondary {
-	float: none;
-	position: absolute;
-	right: 0;
+#wpadminbar {
+	// Add background color to the right side of the admin bar for the mobile view
+	.quicklinks {
+		background-color: inherit;
+		#wp-admin-bar-top-secondary {
+			background-color: inherit;
+		}
+	}
+
+	#wp-admin-bar-top-secondary {
+		float: none;
+		position: absolute;
+		right: 0;
+
+		@media (max-width: 782px) {
+			#wp-admin-bar-help-center {
+				display: block !important;
+				width: 52px !important;
+				margin-right: 0 !important;
+				.ab-item {
+					width: 52px;
+					svg {
+						width: 36px;
+						height: 36px;
+						padding: 4px 8px;
+					}
+				}
+			}
+
+			#wp-admin-bar-notes {
+				display: block !important;
+				width: 52px !important;
+				.ab-item {
+					justify-content: center;
+
+					.noticon-bell {
+						width: 36px;
+						height: 46px;
+						top: 0;
+
+						&:before {
+							background-position-y: bottom;
+							background-position-x: center;
+							right: 0;
+							width: 36px !important;
+							height: 40px !important;
+									background-size: contain;
+						}
+					}
+				}
+
+				#wpnt-notes-panel2 {
+					top: 46px;
+				}
+			}
+		}
+	}
 }
+
+
diff --git a/projects/packages/masterbar/changelog/update-notifications-help-icons-on-mobile b/projects/packages/masterbar/changelog/update-notifications-help-icons-on-mobile
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add background color to address overlapping