Sidebar upsell nudge: update visually (#47909)

Author: simison

pnpm-lock.yaml

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Update design of the sidebar upsell.

projects/packages/admin-ui/changelog/update-sidebar-upsell-visual-update

@@ -38,6 +38,10 @@
 		],
 		"test-php": [
 			"@composer phpunit"
+		],
+		"watch": [
+			"Composer\\Config::disableProcessTimeout",
+			"pnpm run watch"
 		]
 	},
 	"repositories": [

projects/packages/admin-ui/composer.json

@@ -25,6 +25,7 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"devDependencies": {
+		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@wordpress/browserslist-config": "6.42.0",
 		"sass-embedded": "1.97.3",

projects/packages/admin-ui/package.json

@@ -1,41 +1,21 @@
+@use "@automattic/jetpack-base-styles/root-variables";
+
 // Keep the slug in sync with `UPGRADE_MENU_SLUG` at class-admin-menu.php
-$upgrade-menu-slug: jetpack-wpadmin-sidebar-free-plan-upsell-menu-item;
-$upgrade-menu-default-color: #069e08;
-$upgrade-menu-default-color-schemes: fresh, light, modern;
-$upgrade-menu-special-color-schemes: (
-	coffee: #9ea476,
-	ectoplasm: #a3b745,
-	midnight: #e14d43,
-);
+#adminmenu li.jetpack-wpadmin-sidebar-free-plan-upsell-menu-item > a {
 
-@mixin upgrade-menu-item-link-selector {
-	#adminmenu li.#{$upgrade-menu-slug} > a,
-	#adminmenu li.#{$upgrade-menu-slug} > a:hover {
-		@content;
+	&,
+	&:hover {
+		background: var(--jp-green-40) !important;
+		border-radius: var(--jp-border-radius) !important;
+		box-shadow: none !important;
+		color: var(--jp-white) !important;
+		margin: 2px 4px;
+		text-align: center;
+		text-wrap: balance;
 	}
-}
 
-@mixin upgrade-menu-item-theme-selector($theme) {
-	body.admin-color-#{$theme} #adminmenu li.#{$upgrade-menu-slug} > a,
-	body.admin-color-#{$theme} #adminmenu li.#{$upgrade-menu-slug} > a:hover {
-		@content;
+	&:hover {
+		background: var(--jp-green-30) !important;
 	}
-}
-
-@include upgrade-menu-item-link-selector {
-	font-weight: 600;
-}
-
-@each $theme in $upgrade-menu-default-color-schemes {
 
-	@include upgrade-menu-item-theme-selector($theme) {
-		color: $upgrade-menu-default-color !important;
-	}
-}
-
-@each $theme, $color in $upgrade-menu-special-color-schemes {
-
-	@include upgrade-menu-item-theme-selector($theme) {
-		color: $color !important;
-	}
 }

projects/packages/admin-ui/src/admin-ui-upgrade-menu.scss

@@ -320,12 +320,11 @@ private static function maybe_add_upgrade_menu_item() {
 			? \Automattic\Jetpack\Redirect::get_url( self::UPGRADE_MENU_SLUG )
 			: self::UPGRADE_MENU_FALLBACK_URL;
 
-		$menu_title = esc_html__( 'Upgrade Jetpack', 'jetpack-admin-ui' )
-			. ' <span aria-hidden="true">↗</span>';
+		$menu_title = esc_html__( 'Upgrade Jetpack', 'jetpack-admin-ui' );
 
 		add_submenu_page(
 			'jetpack',
-			__( 'Upgrade Jetpack', 'jetpack-admin-ui' ),
+			$menu_title,
 			$menu_title,
 			'manage_options',
 			esc_url( $upgrade_url ),

projects/packages/admin-ui/src/class-admin-menu.php

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Update design of the sidebar upsell.

projects/plugins/automattic-for-agencies-client/changelog/update-sidebar-upsell-visual-update

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Update design of the sidebar upsell.